经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Python » 查看文章
基于django的个人博客网站建立(四)
来源:cnblogs  作者:sfencs  时间:2019/5/29 8:58:02  对本文有异议

基于django的个人博客网站建立(四)

前言

今天主要添加了留言与评论在后台的管理和主页文章的分页显示,文章类别的具体展示以及之前预留链接的补充

主要内容

其实今天的内容和前几天的基本相似,就是个体力活

首先是评论在后台的管理:

  1. @auth
  2. def view_comment(request):
  3. if request.method == 'GET':
  4. all_comment = models.Comment.objects.all().order_by('id').reverse()
  5. return render(request, 'backend/view_comment.html', {'all_comment': all_comment})
  1. {% extends 'backend/base.html' %}
  2. {% block link %}
  3. <!-- Bootstrap Markdown -->
  4. {% endblock %}
  5. {% block content %}
  6. <div class="content-wrapper">
  7. <!-- Content Header (Page header) -->
  8. <section class="content-header">
  9. <h1>
  10. 查看评论
  11. </h1>
  12. <ol class="breadcrumb">
  13. <li class="breadcrumb-item"><a href="#">我的博客后台</a></li>
  14. <li class="breadcrumb-item active">查看评论</li>
  15. </ol>
  16. </section>
  17. <!-- Main content -->
  18. <section class="content">
  19. <div class="row">
  20. <div class="col-lg-12">
  21. <div class="box">
  22. <div class="box-header with-border">
  23. <h3 class="box-title">评论列表</h3>
  24. </div>
  25. <!-- /.box-header -->
  26. <div style="height: auto" class="box-body">
  27. <div class="table-responsive">
  28. <table id="articlelist" class="table table-hover no-wrap dataTable" data-page-size="10" role="grid" aria-describedby="articlelist_info">
  29. <thead>
  30. <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>
  31. <th class="sorting" tabindex="0" aria-controls="articlelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Username</th>
  32. <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">content</th>
  33. <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">creationTime</th>
  34. <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Email</th>
  35. <th class="sorting" tabindex="0" aria-controls="employeelist" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Articletitle</th>
  36. <th class="sorting" tabindex="0" aria-controls="articlelist" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending">Action</th>
  37. </tr>
  38. </thead>
  39. <tbody>
  40. {% for comment in all_comment %}
  41. <tr role="row" class="odd">
  42. <td class="sorting_1">{{ comment.id }}</td>
  43. <td>{{ comment.userName }}</td>
  44. <td>{{ comment.content }}</td>
  45. <td>{{ comment.creationTime }}</td>
  46. <td>{{ comment.email }}</td>
  47. <td>{{ comment.article.title }}</td>
  48. <td>
  49. <form style="margin-top: 3px" action="/backend/delete_comment/" method="post">
  50. {% csrf_token %}
  51. <input name="delete_comment_id" style="display: none" type="text" value="{{ comment.id }}">
  52. <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>
  53. </form>
  54. </td>
  55. </tr>
  56. {% endfor %}
  57. </tbody>
  58. </table>
  59. </div>
  60. </div>
  61. </div>
  62. <!-- /.box -->
  63. </div>
  64. </div>
  65. </section>
  66. <!-- /.content -->
  67. </div>
  68. {% endblock %}
  69. {% block script %}
  70. <script>
  71. $('#view_comment').addClass('active')
  72. </script>
  73. {% endblock %}

删除评论:

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

然后同样是留言的管理:

  1. @auth
  2. def view_message(request):
  3. if request.method == 'GET':
  4. all_message = models.Message.objects.all().order_by('id').reverse()
  5. return render(request, 'backend/view_message.html', {'all_message': all_message})
  6. @auth
  7. def delete_message(request):
  8. if request.method == 'POST':
  9. delete_message_id = request.POST.get('delete_message_id')
  10. models.Message.objects.filter(id=delete_message_id).delete()
  11. return redirect('/backend/view_message')

接下来讲主页的分页显示

这里主要用了django的Paginator做了分页管理:

  1. def index(request):
  2. if request.method == 'GET':
  3. all_article = models.Article.objects.all().order_by('id').reverse()
  4. paginator = Paginator(all_article,7)
  5. page = request.GET.get('page')
  6. try:
  7. contacts = paginator.page(page)
  8. except PageNotAnInteger:
  9. contacts = paginator.page(1)
  10. except EmptyPage:
  11. contacts = paginator.page(paginator.num_pages)
  12. all_type = models.ArticleType.objects.all()
  13. return render(request, 'show/index.html',{'all_article':contacts,'all_type':all_type})

页面显示也做了修改

  1. {% extends "show/base.html" %}
  2. <!-- ======================== END HEADER AREA HERE ================================= -->
  3. <!-- =================== START MAIN CONTENT AREA HERE ========================-->
  4. {% block main %}
  5. <main class="main-content-area section-padding-bottom">
  6. <div class="container">
  7. <div class="row">
  8. <div class="col-md-12">
  9. <div class="row">
  10. {% for article in all_article %}
  11. <div class="col-md-10 mx-auto nagative-margin" data-aos="fade">
  12. <div class="themeix-single-post">
  13. <div class="left-post-number float-left">
  14. <div class="post-number"><span>{{ article.id }}</span></div>
  15. </div>
  16. <div class="right-blog-details ">
  17. <div class="blog-meta">
  18. <p>{{ article.creationTime }}</p>
  19. {% for type in article.articletotype_set.all %}
  20. <p>{{ type.type.name }}</p>
  21. {% endfor %}
  22. </div>
  23. <div class="blog-title pb-3 pt-1">
  24. <h2 class="heading-2"><a href="/blog-details/?article_id={{ article.id }}">{{ article.title }}</a></h2>
  25. </div>
  26. <div class="blog-thumb mb-0">
  27. <a href="/blog-details/?article_id={{ article.id }}"><img src="/static/assets/images/article/{{ article.id }}.jpg" alt="post" /></a>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. {% endfor %}
  33. </div>
  34. </div>
  35. </div>
  36. <div class="post-pagination text-center" data-aos="fade-up">
  37. <ul>
  38. {% if all_article.has_previous %}
  39. <li><a href="/index?page={{ all_article.previous_page_number }}"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a></li>
  40. {% endif %}
  41. {% if all_article.has_previous %}
  42. <li><a href="/index?page={{ all_article.previous_page_number }}">{{ all_article.previous_page_number }}</a></li>
  43. {% endif %}
  44. <li id="nowpage" style="
  45. font-weight: 600;
  46. background: #1D2EF2;
  47. transition: 0.4s;
  48. color: white!important;
  49. border: 1px solid #1D2EF2;" ><a style="color: white!important;" href="/index?page={{ all_article.number }}">{{ all_article.number }}</a></li>
  50. {% if all_article.has_next %}
  51. <li><a href="/index?page={{ all_article.next_page_number }}">{{ all_article.next_page_number }}</a></li>
  52. {% endif %}
  53. {% if all_article.has_next %}
  54. <li><a href="/index?page={{ all_article.next_page_number }}"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
  55. {% endif %}
  56. </ul>
  57. </div>
  58. </div>
  59. </main>
  60. <!-- ======================== END MAIN CONTENT AREA HERE ========================-->
  61. <!-- ==================== START FOOTER AREA ===================================== -->
  62. {% endblock %}

显示为:

接下来为文章的所有分类做了一个页面来显示

  1. def category(request):
  2. if request.method == 'GET':
  3. all_type = models.ArticleType.objects.all()
  4. return render(request, 'show/category.html', {'all_type': all_type})
  1. {% extends "show/base.html" %}
  2. <!-- ======================== END HEADER AREA HERE ================================= -->
  3. <!-- =================== START MAIN CONTENT AREA HERE ========================-->
  4. {% block header-text %}
  5. <div class="header-text text-center">
  6. <span>{% now "Y-m-d" %}</span>
  7. <h1 class="heading-1 mb-5 mt-1">Categories</h1>
  8. <div class="themeix-author">
  9. <a href="author.html"><img style="width: 100px;height: 100px" src="/static/assets/images/myavator.png" alt="author" /></a>
  10. <h4 class="heading-4 pt-2 pb-3"><a href="/index">huchengyue</a></h4>
  11. </div>
  12. </div>
  13. {% endblock %}
  14. {% block main %}
  15. <!-- ======================== END HEADER AREA HERE ================================= -->
  16. <!-- =================== START MAIN CONTENT AREA HERE ========================-->
  17. <main class="main-content-area section-padding-bottom clearfix wow fadeIn" data-wow-duration="2s">
  18. <div class="page-wrapper tags-page">
  19. <div class="container">
  20. <div class="row">
  21. <div class="col-md-12">
  22. <div class="row">
  23. <div class="col-md-10 mx-auto nagative-margin pb-0">
  24. {% for type in all_type %}
  25. <div class="row dotted-border mb-60" data-aos="fade-up">
  26. <div class="col-md-6">
  27. <div class="tags-thumb">
  28. <a href="/category/details/?type={{ type.name }}"><img src="https://source.unsplash.com/random/800x450?{{ type.id }}" alt="tag-thumb" /></a>
  29. </div>
  30. </div>
  31. <div class="col-md-6">
  32. <div class="tags-right-text">
  33. <div class="btn-post"><span>{{ type.articletotype_set.all.count }} post</span></div>
  34. <div class="tag-title">
  35. <h2 class="heading-2"><a href="/category/details/?type={{ type.name }}">{{ type.name }}</a></h2>
  36. </div>
  37. <p>该分类为{{ type.name }},具体文章请点击查看</p>
  38. <div class="btn-more"><a href="/category/details/?type={{ type.name }}">View All</a></div>
  39. </div>
  40. </div>
  41. </div>
  42. {% endfor %}
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </main>
  50. <!-- ======================== END MAIN CONTENT AREA HERE ========================-->
  51. <!-- ==================== START FOOTER AREA ===================================== -->
  52. {% endblock %}

图中每一个分类的配图是使用的https://source.unsplash.com/random/800x450 网站的随机图片,所以页面加载的有一点慢,但还可以接受

最后就是点击分类进入该分类的文章区域,和主页显示的类似,不多说了。

总结

对于文章的相关的东西到目前为止基本差不多了,大体功能已经实现,一些细节部分以后再完善,明天预计完成一个添加照片分享的功能,可以记录和展示一下自己拍到的或收集到的图片。

?

原文链接:http://www.cnblogs.com/sfencs-hcy/p/10940409.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号