Django页面导航-主页列表不可见

lmyy7pcs  于 2023-08-08  发布在  Go
关注(0)|答案(1)|浏览(106)

我是超级新的Dango;原谅我一个新手的问题:)
我通过创建一个“笔记应用程序”来学习Django。这就是应用程序主页的外观。x1c 0d1x的数据
当我单击笔记列表中的任何笔记时,它会在右侧页面上打开详细信息。但问题是它会抹掉左手边的音符列表。要重新加载列表,我需要再次单击“主页”链接。预期的行为是,它应该保留左侧的注解列表,并在右侧框架上显示详细信息。



urls.py

from django.urls import path
from .views import NoteListView, NoteDetailView, NoteCreateView, NoteUpdateView, NoteDeleteView
from . import views

urlpatterns = [
    path('', NoteListView.as_view(), name='lekha-home'),
    path('note/<int:pk>/', NoteDetailView.as_view(), name='note-detail'),
    path('note/new/', NoteCreateView.as_view(), name='note-create'),
    path('note/<int:pk>/update', NoteUpdateView.as_view(), name='note-update'),
    path('note/<int:pk>/delete', NoteDeleteView.as_view(), name='note-delete'),
    path('about/', views.about, name='lekha-about'),
]

字符串
views.py

class NoteListView(ListView):
    model = Note
    template_name = 'lekha/home.html'
    context_object_name = 'notes'
    ordering = ['-date_created']

class NoteDetailView(DetailView):
    model = Note
    # success_url = 'lekha/note_detail.html'

class NoteCreateView(LoginRequiredMixin, CreateView):
    model = Note
    fields = ['title', 'content']

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)


home.html

{% extends "lekha/base.html" %}
{% block content %}
    {% for note in notes %}

<div class="list-group">
  <a href="{% url 'note-detail' note.id %}" class="list-group-item list-group-item-action">{{ note.title }}</a>
</div>

    {% endfor %}
{% endblock content %}


note_detail.html

{% extends "lekha/base.html" %}
{% block content2 %}
    <article class="media content-section">
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-8" href="#">{{ object.author }}</a>
          <small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
            {% if object.author == user %}
                <a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
                <a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
            {% endif %}
        </div>
        <h4 class="article-title">{{ object.title }}</h4>
          <hr>
        <p class="article-content">{{ object.content }}</p>
      </div>
    </article>
{% endblock content2 %}


这就是我在base.html中调用它的方式

<main role="main" class="container-fluid px-2">
      <div class="row">
        <div class="col-md-3">
          <div class="content-section">
            <h4>Notes</h4>
                {% block content %}{% endblock %}
         </div>
        </div>
        <div class="col-md-8">
            {% block content2 %}{% endblock %}
        </div>
      </div>
    </main>


对不起,详细的文章。我将感谢任何提示。谢谢你,谢谢

enxuqcxy

enxuqcxy1#

欢迎您来到Django!
您的模板note_detail.html扩展了base.html,它不包含笔记列表的HTML,并且note_detail.html不添加该列表,所以这就是它没有显示的原因-您还没有添加它!
为此,您需要从home.htmlnote_detail.html的相同的{% block content %},并且还需要手动将notes上下文变量传递给模板。您可以通过ListView类免费获得这些信息。
第一,对模板的修改:
note_detail.html

{% extends "lekha/base.html" %}

{% block content %}
  {% for note in notes %}

  <div class="list-group">
    <a href="{% url 'note-detail' note.id %}" class="list-group-item list-group-item-action">{{ note.title }}</a>
  </div>

  {% endfor %}
{% endblock content %}
{% block content2 %}
    <article class="media content-section">
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-8" href="#">{{ object.author }}</a>
          <small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
            {% if object.author == user %}
                <a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
                <a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
            {% endif %}
        </div>
        <h4 class="article-title">{{ object.title }}</h4>
          <hr>
        <p class="article-content">{{ object.content }}</p>
      </div>
    </article>
{% endblock content2 %}

字符串
并对视图进行了更改:
views.py

class NoteListView(ListView):
    model = Note
    template_name = 'lekha/home.html'
    context_object_name = 'notes'
    ordering = ['-date_created']

class NoteDetailView(DetailView):
    model = Note

    def get_context_data(self):
        data = super().get_context_data
        data['notes'] = Note.objects.all().order_by('-date_created')


最后一个提示:为了保持HTML模板“干燥”,您应该将注解列表提取到一个单独的HTML模板(通常称为部分)中,您可以将其插入到多个其他模板中。模板设置如下所示:
partials/all_notes. html {%用于注解中的注解%}

<div class="list-group">
  <a href="{% url 'note-detail' note.id %}" class="list-group-item list-group-item-action">{{ note.title }}</a>
</div>

{% endfor %}


home.html

{% extends "lekha/base.html" %}

{% block content %}
{% include 'lekha/partials/all_notes.html' %}
{% endblock content %}


note_detail.html

{% extends "lekha/base.html" %}

{% block content %}
{% include 'lekha/partials/all_notes.html' %}
{% endblock content %}

{% block content2 %}
    <article class="media content-section">
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-8" href="#">{{ object.author }}</a>
          <small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
            {% if object.author == user %}
                <a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
                <a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
            {% endif %}
        </div>
        <h4 class="article-title">{{ object.title }}</h4>
          <hr>
        <p class="article-content">{{ object.content }}</p>
      </div>
    </article>
{% endblock content2 %}


base.html

<main role="main" class="container-fluid px-2">
      <div class="row">
        <div class="col-md-3">
          <div class="content-section">
            <h4>Notes</h4>
                {% block content %}{% endblock %}
         </div>
        </div>
        <div class="col-md-8">
            {% block content2 %}{% endblock %}
        </div>
      </div>
    </main>

相关问题