【Django博客网站】b站项目学习系列八:博客详情界面

目录

详情页面展示

404页面展示

推荐文章数据展示

评论模型

发表评论

详情评论数据展示


  • 详情页面展示

  1. 插入 home 文件夹的 urls.py 文件:
    from users.views import DetailView
    path('detail/', DetailView.as_view(),name='detail'),
  2. 修改 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 }}
  3. 修改 templates 文件夹的 index.html 文件:
    <b><a href="{% url 'home:detail' %}?id={{ article.id }}" style="color: black;">{{ article.title }}</a></b>

  • 404页面展示

  1. 修改 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>

  • 推荐文章数据展示

  1. 插入 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)
  2. 修改 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 %}


  • ​​​​​​​评论模型

  1. 在 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
  2. 创建迁移文件:
    python manage.py makemigrations
  3. 执行迁移文件:
    python manage.py migrate
  4. 在 MySQL 中输入 show tables; 和 desc tb_comment; 可看到迁移情况:


  • ​​​​​​​发表评论

  1. 插入 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'))       #没有登录则跳转到登录页面
  2. 修改 templates 文件夹的 detail.html 文件:
    <!-- 发表评论 -->
    {% csrf_token %}
    <input type="hidden" name="id" value="{{ article.id }}">

  • ​​​​​​​详情评论数据展示

  1. 添加 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,
            }
  2. 修改 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>&nbsp;<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>
  3. 修改 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;
    }
  4. 通过蠕虫复制插入更多测试数据:在 MySQL 中输入 use blog,再多次输入下面语句进行 2 指数形式复制:​​​​​​​
    insert into tb_comment(content,created,article_id,user_id)
    select content,created,article_id,user_id from tb_comment;

  5. 最后根据前述操作通过 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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值