为什么我会收到路径错误以查看以下代码中的单个电子邮件的内容？

Question

在inbox.js文件中，我正在尝试收听每个电子邮件single_email_div的单击事件，然后将其发送到电子邮件 in Views.pys.pys.py

inbox.js

function load_mailbox(mailbox) {
  // Show the mailbox and hide other views
  document.querySelector("#emails-view").style.display = "block";
  document.querySelector("#compose-view").style.display = "none";

  // Show the mailbox name
  document.querySelector("#emails-view").innerHTML = `<h3>${
    mailbox.charAt(0).toUpperCase() + mailbox.slice(1)
  }</h3>`;

  // Show the emails of that particular mailbox 
  fetch(`/emails/${mailbox}`)
  .then(response => response.json())
  .then(emails => {
      // Print emails
      console.log(emails);
      // ... do something else with emails ...  
      emails.forEach(email => {
        const single_email_div = document.createElement('div');
        single_email_div.innerHTML = `<a href="{%url 'email' email.id %}">
                              <br> ${email.id} <br> 
                              From: ${email.sender} <br> 
                              Subject: ${email.subject} <br> 
                              TimeStamp: ${email.timestamp} <br>
                              Read: ${email.read} <br><br>
                              </a>`

        if(`${email.read}` === false)
        {single_email_div.style.backgroundColor = "white";}
        else
        {single_email_div.style.backgroundColor = "grey";}

        const emails_div = document.querySelector('#emails-view');
        emails_div.append(single_email_div);
        
        // When a user clicks on an email, the user should be taken to a view where they see the content of that email
        document.querySelector("single_email_div").addEventListener('click', () => { 
            fetch(`/emails/${id}`)
            .then(response => response.json())
            .then(email => {
          
                // show email and hide other views
                document.querySelector("#emails-view").style.display = "none";
                document.querySelector("#compose-view").style.display = "none";  
                document.querySelector("#email-view").style.display = "block";
          
                // display email
                const view = document.querySelector("#email-view");
          
                view.innerHTML =
                  `<ul>
                    
                     <li> From: ${email.sender} </li>
                     <li> To: ${email.recipients} </li>
                     <li> Subject: ${email.subject} </li> 
                     <li> TimeStamp: ${email.timestamp} </li>
                     <li> Body: ${email.body} <br><br>
                  
                  </ul>`
            
            });      
            })
              
      });
})
              return false;
}   
   

inbox.html

{% block body %}
    <h2>{{ request.user.email }}</h2>

    <button class="btn btn-sm btn-outline-primary" id="inbox">Inbox</button>
    <button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
    <button class="btn btn-sm btn-outline-primary" id="sent">Sent</button>
    <button class="btn btn-sm btn-outline-primary" id="archived">Archived</button>
    <a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
    <hr>



    <div id="emails-view">    </div>
    <div id="email-view">     </div>
  

    <div id="compose-view">
        <h3>New Email</h3>
        <form id="compose-form">
            <div class="form-group">
                From: <input disabled class="form-control" value="{{ request.user.email }}">
            </div>
            <div class="form-group">
                To: <input id="compose-recipients" class="form-control">
            </div>
            <div class="form-group">
                <input class="form-control" id="compose-subject" placeholder="Subject">
            </div>
            <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
            <input type="submit" class="btn btn-primary"/>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

urls.py

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),


    # API Routes
    path("emails", views.compose, name="compose"),
    path("emails/<int:email_id>", views.email, name="email"),
    path("emails/<str:mailbox>", views.mailbox, name="mailbox"),
    
]

views.pys.py

@login_required
def mailbox(request, mailbox):

    # Filter emails returned based on mailbox
    if mailbox == "inbox":
        emails = Email.objects.filter(
            user=request.user, recipients=request.user, archived=False
        )
    elif mailbox == "sent":
        emails = Email.objects.filter(
            user=request.user, sender=request.user
        )
    elif mailbox == "archive":
        emails = Email.objects.filter(
            user=request.user, recipients=request.user, archived=True
        )
    else:
        return JsonResponse({"error": "Invalid mailbox."}, status=400)

    # Return emails in reverse chronologial order
    emails = emails.order_by("-timestamp").all()
    return JsonResponse([email.serialize() for email in emails], safe=False)


@csrf_exempt
@login_required
def email(request, email_id):

    # Query for requested email
    try:
        email = Email.objects.get(user=request.user, pk=email_id)
    except Email.DoesNotExist:
        return JsonResponse({"error": "Email not found."}, status=404)

    # Return email contents
    if request.method == "GET":
        return JsonResponse(email.serialize())

    # Update whether email is read or should be archived
    elif request.method == "PUT":
        data = json.loads(request.body)
        if data.get("read") is not None:
            email.read = data["read"]
        if data.get("archived") is not None:
            email.archived = data["archived"]
        email.save()
        return HttpResponse(status=204)

    # Email must be via GET or PUT
    else:
        return JsonResponse({
            "error": "GET or PUT request required."
        }, status=400)

以下是我一直遇到的错误：

Page not found (404)
Request Method: GET
Request URL:    http://127.0.0.1:8000/%7B%25url%20'email'%20email.id%20%25%7D
Using the URLconf defined in project3.urls, Django tried these URL patterns, in this order:

admin/
[name='index']
login [name='login']
logout [name='logout']
register [name='register']
emails [name='compose']
emails/<int:email_id> [name='email']
emails/<str:mailbox> [name='mailbox']
The current path, {%url 'email' email.id %}, didn’t match any of these.

Answer 1

您无法使用django模板标签“ {％％}” in .js：

 single_email_div.innerHTML = `<a href="{%url 'email' email.id %}">

在这里您已经应该有

single_email_div.innerHTML = `<a href="/emails/${email.id}/">