基於django的我的博客網站創建（四）

基於django的我的博客網站創建（四）

前言

網站效果可點擊這裏訪問

---

今天主要添加了留言與評論在後臺的管理和主頁文章的分頁顯示，文章類別的具體展現以及以前預留連接的補充

主要內容

其實今天的內容和前幾天的基本類似，就是個體力活

首先是評論在後臺的管理：

@auth
def view_comment(request):
    if request.method == 'GET':
        all_comment = models.Comment.objects.all().order_by('id').reverse()
        return render(request, 'backend/view_comment.html', {'all_comment': all_comment})

{% extends 'backend/base.html' %}

    {% block link %}
        <!-- Bootstrap Markdown -->

    {% endblock %}

   {% block content %}
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        查看評論
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">個人博客後臺</a></li>
        <li class="breadcrumb-item active">查看評論</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="row">

          <div class="col-lg-12">
            <div class="box">
               <div class="box-header with-border">
                 <h3 class="box-title">評論列表</h3>
               </div>
               <!-- /.box-header -->
               <div style="height: auto" class="box-body">
                        <div class="table-responsive">
            <table id="articlelist" class="table table-hover no-wrap dataTable" data-page-size="10" role="grid" aria-describedby="articlelist_info">
               <thead>
                  <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="articlelist" rowspan="1" colspan="1" aria-sort="ascending" aria-label="No: activate to sort column descending">Id</th>
                            <th class="sorting" tabindex="0" aria-controls="articlelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Username</th>
                            <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">content</th>
                            <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">creationTime</th>
                            <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Email</th>
                            <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Articletitle</th>
                            <th class="sorting" tabindex="0" aria-controls="articlelist" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending">Action</th>
                        </tr>
               </thead>
               <tbody>

                    {% for comment in all_comment %}
               <tr role="row" class="odd">
                     <td class="sorting_1">{{ comment.id }}</td>

                     <td>{{ comment.userName }}</td>
                            <td>{{ comment.content }}</td>
                            <td>{{ comment.creationTime }}</td>
                            <td>{{ comment.email }}</td>
                            <td>{{ comment.article.title }}</td>
                     <td>

                                <form style="margin-top: 3px" action="/backend/delete_comment/" method="post">
                                    {% csrf_token %}
                                    <input name="delete_comment_id" style="display: none" type="text" value="{{ comment.id }}">
                                    <button type="submit" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="刪除"><i class="ti-trash" aria-hidden="true"></i></button>
                                </form>
                            </td>
                  </tr>
                    {% endfor %}
                  </tbody>

            </table>
                        </div>
                </div>

             </div>

              <!-- /.box -->
          </div>

      </div>

   </section>
   <!-- /.content -->
  </div>


{% endblock %}

{% block script %}
    <script> $('#view_comment').addClass('active') </script>

{% endblock %}

刪除評論：

@auth
def delete_comment(request):
    if request.method == 'POST':
        delete_comment_id = request.POST.get('delete_comment_id')
        models.Comment.objects.filter(id=delete_comment_id).delete()
        return redirect('/backend/view_comment')

而後一樣是留言的管理：

@auth
def view_message(request):
    if request.method == 'GET':
        all_message = models.Message.objects.all().order_by('id').reverse()
        return render(request, 'backend/view_message.html', {'all_message': all_message})

@auth
def delete_message(request):
    if request.method == 'POST':
        delete_message_id = request.POST.get('delete_message_id')
        models.Message.objects.filter(id=delete_message_id).delete()
        return redirect('/backend/view_message')

接下來說主頁的分頁顯示

這裏主要用了django的Paginator作了分頁管理：

def index(request):
    if request.method == 'GET':

        all_article = models.Article.objects.all().order_by('id').reverse()
        paginator = Paginator(all_article,7)
        page = request.GET.get('page')
        try:
            contacts = paginator.page(page)
        except PageNotAnInteger:

            contacts = paginator.page(1)
        except EmptyPage:

            contacts = paginator.page(paginator.num_pages)

        all_type = models.ArticleType.objects.all()
        return render(request, 'show/index.html',{'all_article':contacts,'all_type':all_type})

頁面顯示也作了修改

{% extends "show/base.html" %}
      <!-- ======================== END HEADER AREA HERE ================================= -->
      <!-- =================== START MAIN CONTENT AREA HERE ========================-->
{% block main %}
      <main class="main-content-area section-padding-bottom">
         <div class="container">
            <div class="row">
               <div class="col-md-12">
                  <div class="row">
                     {% for article in all_article %}
                     <div class="col-md-10 mx-auto nagative-margin" data-aos="fade">
                        <div class="themeix-single-post">
                           <div class="left-post-number float-left">
                              <div class="post-number"><span>{{ article.id }}</span></div>

                           </div>
                           <div class="right-blog-details ">
                              <div class="blog-meta">
                                 <p>{{ article.creationTime }}</p>
                                  {% for type in article.articletotype_set.all %}
                                 <p>{{ type.type.name }}</p>
                                  {% endfor %}
                              </div>
                              <div class="blog-title pb-3 pt-1">
                                 <h2 class="heading-2"><a href="/blog-details/?article_id={{ article.id }}">{{ article.title }}</a></h2>
                              </div>

                              <div class="blog-thumb mb-0">
                                 <a href="/blog-details/?article_id={{ article.id }}"><img src="/static/assets/images/article/{{ article.id }}.jpg" alt="post" /></a>
                              </div>

                           </div>
                        </div>
                     </div>
                     {% endfor %}

                  </div>
               </div>
            </div>
            <div class="post-pagination text-center" data-aos="fade-up">
             <ul>
                     {% if all_article.has_previous %}
               <li><a href="/index?page={{ all_article.previous_page_number }}"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a></li>
                     {% endif %}
                     {% if all_article.has_previous %}
               <li><a href="/index?page={{ all_article.previous_page_number }}">{{ all_article.previous_page_number }}</a></li>
                     {% endif %}

               <li id="nowpage" style="
    font-weight: 600;
    background: #1D2EF2;
    transition: 0.4s;
    color: white!important;
    border: 1px solid #1D2EF2;" ><a style="color: white!important;" href="/index?page={{ all_article.number }}">{{ all_article.number }}</a></li>
               {% if all_article.has_next %}
               <li><a href="/index?page={{ all_article.next_page_number }}">{{ all_article.next_page_number }}</a></li>
                     {% endif %}
                 {% if all_article.has_next %}
               <li><a href="/index?page={{ all_article.next_page_number }}"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
                     {% endif %}

             </ul>
            </div>

         </div>
      </main>
      <!-- ======================== END MAIN CONTENT AREA HERE ========================-->
      <!-- ==================== START FOOTER AREA ===================================== -->
{% endblock %}

顯示爲：

接下來爲文章的全部分類作了一個頁面來顯示

def category(request):
    if request.method == 'GET':
        all_type = models.ArticleType.objects.all()
        return render(request, 'show/category.html', {'all_type': all_type})

{% extends "show/base.html" %}
      <!-- ======================== END HEADER AREA HERE ================================= -->
      <!-- =================== START MAIN CONTENT AREA HERE ========================-->

{% block header-text %}
                         <div class="header-text text-center">
                            <span>{% now "Y-m-d" %}</span>
                            <h1 class="heading-1 mb-5 mt-1">Categories</h1>
                            <div class="themeix-author">
                               <a href="author.html"><img style="width: 100px;height: 100px" src="/static/assets/images/myavator.png" alt="author" /></a>
                               <h4 class="heading-4 pt-2 pb-3"><a href="/index">huchengyue</a></h4>
                            </div>
                         </div>
{% endblock %}

{% block main %}
      <!-- ======================== END HEADER AREA HERE ================================= -->
      <!-- =================== START MAIN CONTENT AREA HERE ========================-->
      <main class="main-content-area section-padding-bottom clearfix wow fadeIn" data-wow-duration="2s">
         <div class="page-wrapper tags-page">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <div class="row">
                        <div class="col-md-10 mx-auto nagative-margin pb-0">

                           {% for type in all_type %}
                           <div class="row dotted-border mb-60" data-aos="fade-up">
                              <div class="col-md-6">
                                 <div class="tags-thumb">
                                    <a href="/category/details/?type={{ type.name }}"><img src="https://source.unsplash.com/random/800x450?{{ type.id }}" alt="tag-thumb" /></a>
                                 </div>
                              </div>
                              <div class="col-md-6">
                                 <div class="tags-right-text">
                                    <div class="btn-post"><span>{{ type.articletotype_set.all.count }} post</span></div>
                                    <div class="tag-title">
                                       <h2 class="heading-2"><a href="/category/details/?type={{ type.name }}">{{ type.name }}</a></h2>
                                    </div>
                                    <p>該分類爲{{ type.name }}，具體文章請點擊查看</p>
                                    <div class="btn-more"><a href="/category/details/?type={{ type.name }}">View All</a></div>
                                 </div>
                              </div>
                           </div>
                            {% endfor %}

                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </main>
      <!-- ======================== END MAIN CONTENT AREA HERE ========================-->
      <!-- ==================== START FOOTER AREA ===================================== -->
{% endblock %}

圖中每個分類的配圖是使用的https://source.unsplash.com/random/800x450 網站的隨機圖片，因此頁面加載的有一點慢，但還能夠接受

最後就是點擊分類進入該分類的文章區域，和主頁顯示的相似，很少說了。

總結

對於文章的相關的東西到目前爲止基本差很少了，大致功能已經實現，一些細節部分之後再完善，明天預計完成一個添加照片分享的功能，能夠記錄和展現一下本身拍到的或收集到的圖片。

​