目录
-
详情页面展示
- 插入 home 文件夹的 urls.py 文件:
from users.views import DetailView path('detail/', DetailView.as_view(),name='detail'),
- 修改 templates 文件夹的 detail.html 文件:
{% load static %} <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script> <link rel="stylesheet" href="{% static 'prism/prism.css' %}"> <link rel="stylesheet" href="{% static 'common/common.css' %}"> <link rel="stylesheet" href="{% static 'common/jquery.pagination.css' %}"> <script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script> <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script> <script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}" data-ckeditor-basepath="{% static 'ckeditor/ckeditor/' %}" id="ckeditor-init-script"></script> <script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script> <script type="text/javascript" src="{% static 'js/host.js' %}"></script> <script type="text/javascript" src="{% static 'js/common.js' %}"></script> <script type="text/javascript" src="{% static 'js/detail.js' %}"></script> <script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script> <a class="dropdown-item" href="{% url 'users:writeblog' %}">写文章</a> <a class="dropdown-item" href='{% url 'users:center'%}'>个人信息</a> <a class="dropdown-item" href='{% url 'users:center' %}'>退出登录</a> <body> 修改: {% for cat in categories %} {% if cat.id == category.id %} <li class="nav-item active"> <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a> </li> {% else %} <li class="nav-item"> <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a> </li> {% endif %} {% endfor %} <!-- 标题及作者 --> <h1 class="mt-4 mb-4">{{ article.title }}</h1> <div class="alert alert-success"><div>作者:<span>{{ article.author.username }}</span></div><div>浏览:{{ article.total_views }}</div></div> <!-- 文章正文 --> {{ article.content|safe }}
- 修改 templates 文件夹的 index.html 文件:
<b><a href="{% url 'home:detail' %}?id={{ article.id }}" style="color: black;">{{ article.title }}</a></b>
-
404页面展示
- 修改 templates 文件夹的 404.html 文件:
{% load static %} <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> <img src="{% static 'img/404.png' %}" alt=""> <a href="{% url 'home:index' %}" class="primaryAction btn btn-primary">返回首页</a>
-
推荐文章数据展示
- 插入 users 文件夹的 views.py 文件:
class DetailView(View): def get(self,request): # detail/?id=xxx&page_num=xxx&page_size=xxx id=request.GET.get('id') #获取文档id categories = ArticleCategory.objects.all() # 获取博客分类信息 try: article=Article.objects.get(id=id) except Article.DoesNotExist: return render(request,'404.html') else: article.total_views+=1 article.save() hot_articles = Article.objects.order_by('-total_views')[:9] # 获取热点数据 context = { 'categories':categories, 'category':article.category, 'article':article, 'hot_articles':hot_articles } return render(request,'detail.html',context=context)
- 修改 templates 文件夹的 index.html 文件:
<!-- 推荐 --> {% for hot_article in hot_articles %} <a href="{% url 'home:detail' %}?id={{ hot_article.id }}" style="color: black">{{ hot_article.title }}</a><br> {% endfor %}
-
评论模型
- 在 home 文件夹的 models.py 模型中定义评论模型:
class Comment(models.Model): content=models.TextField() #评论内容 article=models.ForeignKey(Article, on_delete=models.SET_NULL, null=True) #评论的文章 user=models.ForeignKey('users.User', on_delete=models.SET_NULL, null=True) #评论用户 created=models.DateTimeField(auto_now_add=True) #评论发布时间 def __str__(self): return self.article.title class Meta: db_table='tb_comment' verbose_name = '评论管理' verbose_name_plural = verbose_name
- 创建迁移文件:
python manage.py makemigrations
- 执行迁移文件:
python manage.py migrate
- 在 MySQL 中输入 show tables; 和 desc tb_comment; 可看到迁移情况:
-
发表评论
- 插入 users 文件夹的 views.py 文件:
from home.models import Comment,Article class DetailView(View): def post(self,request): user=request.user #获取用户信息 if user and user.is_authenticated: #判断用户是否登录 id=request.POST.get('id') #接收数据 content=request.POST.get('content') try: #判断文章是否存在 article = Article.objects.get(id=id) except Article.DoesNotExist: return HttpResponseNotFound('没有此文章') Comment.objects.create( #保存到数据 content=content, article=article, user=user ) article.comments_count+=1 #修改文章评论数量 article.save() path=reverse('home:detail')+'?id={}'.format(article.id) #拼接跳转路由 return redirect(path) else: return redirect(reverse('users:login')) #没有登录则跳转到登录页面
- 修改 templates 文件夹的 detail.html 文件:
<!-- 发表评论 --> {% csrf_token %} <input type="hidden" name="id" value="{{ article.id }}">
-
详情评论数据展示
- 添加 users 文件夹的 views.py 文件:
from home.models import Comment from django.shortcuts import redirect,reverse class DetailView(View): def get(self,request): page_num=request.GET.get('page_num',1) page_size=request.GET.get('page_size',5) comments = Comment.objects.filter( # 获取当前文章的评论数据 article=article ).order_by('-created') total_count = comments.count() #获取评论总数 paginator = Paginator(comments, page_size) # 创建分页器:每页N条记录 try: # 获取每页商品数据 page_comments = paginator.page(page_num) except EmptyPage: return HttpResponseNotFound('empty page') # 如果page_num不正确则404 total_page = paginator.num_pages # 获取列表页总页数 context = { 'categories':categories, 'category':article.category, 'article':article, 'hot_articles':hot_articles, }
- 修改 templates 文件夹的 index.html 文件:
<!-- 显示评论 --> <h4>共有{{ total_count }}条评论</h4> <div class="row"> {% for comment in comments %} <div class="col-12" > <hr><p><strong style="color: pink"></strong></p> <div> <div><span><strong>{{ comment.user.username }}</strong></span> <span style="color: gray">{{ comment.created | date:'Y:m:d H:i:s' }}</span></div> <br> <p>{{ comment.content|safe }}</p> </div> </div> {% endfor %} <div class="pagenation" style="text-align: center"> <div id="pagination" class="page"></div> </div> </div>
- 修改 templates 文件夹的 detail.html 文件:
currentPage: {{ page_num }}, totalPage: {{ total_page }}, callback:function (current) { location.href='/detail/?id={{ article.id }}&page_size={{ page_size }}&page_num='+current; }
- 通过蠕虫复制插入更多测试数据:在 MySQL 中输入 use blog,再多次输入下面语句进行 2 指数形式复制:
insert into tb_comment(content,created,article_id,user_id) select content,created,article_id,user_id from tb_comment;
-
最后根据前述操作通过 git 将内容上传至 github:
6. 上传成功后可在 github 中显示项目内容:
学习介绍链接:https://blog.csdn.net/castlegirl/article/details/135075747?spm=1001.2014.3001.5501
项目链接:GitHub - haifengyuhui/project_blogweb: Project: A website for haifengyuhui's blog