Django博客系统(详情页面展示)

1. 页面展示

1.在home.views.py文件中定义视图

from django.views import View

class DetailView(View):

    def get(self,request):


        return render(request,'detail.html')

2.在home.urls.py文件中定义路由

from users.views import DetailView
urlpatterns = [
    # 参数1：路由
    # 参数2：视图函数
    # 参数3：路由名，方便通过reverse来获取路由
    path('detail/', DetailView.as_view(),name='detail'),
]

3.修改detail.html中的资源加载方式

    <!-- Header部分 -->
       {% load staticfiles %}
    <!-- 引入bootstrap的css文件 -->
    <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' %}">
    <!--导入css-->
    <link rel="stylesheet" href="{% static 'common/common.css' %}">
    <link rel="stylesheet" href="{% static 'common/jquery.pagination.css' %}">
    <!-- 引入vuejs -->
    <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>
    ...
    <!-- Footer部分 -->
    <!--ckeditor-->
    <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>
    <!-- 引入js -->
    <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:logout' %}'>退出登录</a>

2. 首页接口设计

1.请求方式

选项	方案
请求方法	POST
请求地址	/?id=xxx&page_num=xxx&page_size=xxx

2.请求参数

参数名	类型	是否必传	说明
id	string	否	文章id
page_num	string	否	评论页码
page_size	string	否	评论每页条目数

3.响应结果：HTML

字段	说明
失败	响应错误提示
成功	展示数据

3. 查询分类数据并展示

1.查询文章数据并通过context传递给HTML

class DetailView(View):

    def get(self,request):
        # detail/?id=xxx&page_num=xxx&page_size=xxx
        #获取文档id
        id=request.GET.get('id')

        # 获取博客分类信息
        categories = ArticleCategory.objects.all()

        try:
            article=Article.objects.get(id=id)
        except Article.DoesNotExist:
            return render(request,'404.html')

        context = {
            'categories':categories,
            'category':article.category,
            'article':article,
        }

        return render(request,'detail.html',context=context)

2.在detail.html文件中使用模板语言展示文章数据

#分类数据展示
 <div>
    <ul class="nav navbar-nav">
        {% 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 %}
    </ul>
</div>

#详情数据展示
 <!-- 标题及作者 -->
<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>
<!-- 文章正文 -->
<div class="col-12" style="word-break: break-all;word-wrap: break-word;">
    {{ article.content|safe }}
</div>
<br>

4. 修改首页跳转到详情页面的链接

<!-- 标题 -->
<h4>
    <b><a href="{% url 'home:detail' %}?id={{ article.id }}" style="color: black;">{{ article.title }}</a></b>
</h4>