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

1. 页面展示

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

from django.views import Viewclass 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#获取文档idid=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>

Django博客系统(详情页面展示)相关推荐

Django博客系统(404页面展示)
1. 修改查询不到数据返回的响应 1.在home.views.py文件中定义视图 try:article=Article.objects.get(id=id) except Article.DoesN ...
Django博客系统(详情评论数据展示)
1. 查询评论数据并展示 1.查询评论数据并通过context传递给HTML from home.models import Comment from django.shortcuts import ...
Django博客系统(首页用户名展示)
1. 用户名写入到cookie # 响应登录结果 response = redirect(reverse('home:index'))# 设置状态保持的周期 if remember != 'on':# ...
黑马博客——详细步骤(十一)博客系统的前台展示页面
7.博客系统的前台展示页面:首页+文章详情页面改后缀为.art 改模板文件中的相对路径为绝对路径验证首页和文章详情页没有问题 default.art 和 article.art 出口body和cs ...
博客系统前端页面代码实现及页面展示(代码版)
hi,大家好,今天为大家带来博客系统的前端代码及页面展示我们使用VS code 这个编码工具来编写代码博客系统前端页面分为四个部分 1.博客列表页 2.博客编辑页 3.博客登录页 4.博客详情页
博客系统程序(页面设计)
咱们学习javaEE的目的就是完成一个网站.在当前学习的基础上,已经可以完成我们的博客系统的页面的设计了!!! 首先我们要进行统筹规划: 首先我们的博客页面将会有4个页面: 1.博客列表页 2.博客详 ...
实现一个博客系统(前端页面设计)
博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...
博客系统（页面设计）
目录博客系统(页面设计) 效果预览博客列表页博客详情页博客登录页博客编辑页实现博客列表实现导航栏实现版心实现左侧个人信息实现博客列表实现博客详情页引入导航栏(HTML.CSS) ...
简单博客系统静态页面（html+css+JavaScript+第三方库Jquery mdn）
目录一.基本构造 1.博客列表页 2.博客详情页 3.登录页 4.博客编辑页二.文件目录 1.css 文件夹 blog_detail.css blog_edit.css blog_list.css ...

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

1. 页面展示

2. 首页接口设计

3. 查询分类数据并展示

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

Django博客系统(详情页面展示)相关推荐

最新文章

热门文章