Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能
、模板写法同Flask，可以参考之前的FLask-模板
、将之前的BootStrap静态页面中的数据使用模板写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Djanjo</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
<h1>文章列表
<small>by zhonghuihong </small></h1> </div>
<div class="container page-body">
<div class="col-md-9" role="main">
<div class="body-main">
{% for article in article_list%}------------->所以现在重点是要返回这个list，这个list是从view.py中的页面视图中返回
<div>
<h2>{{ article.title }}</h2>
<p>{{ article.brief_content }}</p>
</div>
{% endfor %} </div>
</div>
<div class="col-md-3" role="complementary">
<div>
<h2>最新文章</h2>
{% for article in article_list %}
<h4><a href="#">{{ article.title }}</a></h4>
{% endfor %} </div>
</div>
</div> </body>
</html>
、在view.py中新增一个视图函数，返回list
def get_index_page(requestss):
all_article=Article.objects.all();
return render(requestss,'blog/index.html',----------------->render()函数就是渲染页面，第一个函数写入参数，第二个参数指定这个函数要渲染的页面，这里要渲染的是'index.html'页面，第三个
参数是指定要返回到前端页面的数据，这里只需要返回一个list,前端根据for循环取出数据进行展示
{
'article_list':all_article
});
、然后配置应用路由（项目路由都是一样的，所以不用配置）
urlpatterns=[
path('hello_world',hello_world),
path('content',article_content),
path('Article_List',get_index_page)----------------->一定要注意这里没有get_index_page()，只写方法名，后面不加()，否则会报错
];
、最终结果
、打开文章详情页的思路同上，只不过不是返回全部文章列表，而是返回其中一篇文章，文章id自己指定
但是存在一个问题，就是无法直接在地址上指定打开某个文章，这样很不方便
所以需要优化为：在URL上输入文章ID就能直接跳转到对应ID的文章详情----通过URL传参-----这就需要自己来定制URL了
articles=Article.objects.all()[0];
#session_list=articles.content.split('\n')
return render(requestss,'blog/detail.html',
{
'article':articles,
#'session_list':session_list
'curr_article':curr_article
});
改写为：
①、修改路由：路由里传入参数
urlpatterns=[
path('hello_world',hello_world),
path('content',article_content),
path('Article_List',get_index_page),
#path('Article_detail',get_article_detial)
path('Article_detail/<int:article_ID>',get_article_detial)------>后面接一个id ];
②、修改视图函数，增加一个传入的参数article_ID
#视图函数，返回文章详情页
def get_article_detial(requestss,article_ID):
articles=Article.objects.all();
curr_article=0;
for article in articles:------------------>循环判断每个文章，若文章的ID等于我输入的ID，那么久跳出循环
if article.article_id==article_ID:
curr_article=article_ID;
#break; #session_list=articles.content.split('\n')
return render(requestss,'blog/detail.html',
{
'article':articles[curr_article]-------------------->注意这个要写，否则返回的是空白
, #'session_list':session_list 'curr_article':curr_article });
、现在已经实现了首页文章列表的获取展示、指定文章详情页的获取展示，现在要开始实现首页文章列表跳转文章详情页
<div class="container page-body">
<div class="col-md-9" role="main">
<div class="body-main">
{% for article in article_list%}
<div>
<h2><a href="Article_detail/{{ article.article_id }}">{{ article.title }}</a></h2>----------------->只要加一个a标签就可以了
<p>{{ article.brief_content }}</p>
</div>
{% endfor %}
但是目前存在一个问题：
因为索引是从0开始的，但是这个开始运行时从1开始，所以会出现索引错位问题，比如点开第一篇文章，实际打开的是第二篇（id=1）
解决办法：
#视图函数，返回文章详情页
def get_article_detial(requestss,article_ID):
articles=Article.objects.all();
curr_article=None;
for article in articles:
if article.article_id==article_ID:
curr_article=article_ID-1;-------------------->填入的id减去1，即可，验证通过
#break; #session_list=articles.content.split('\n')
return render(requestss,'blog/detail.html',
{
'article':articles[curr_article],
#'session_list':session_list
'curr_article':curr_article
});
、现在已经实现了首页跳转到对应详情页的功能，现在需要实现在文章详情页有上一页，下一页的功能
①、前端代码（直接取bootstrap官网中找--组件--分页--翻页）
前端可以改成以下：说明我们需要传递【privious_article】、【next_article】，这两个参数来自视图后台
<nav aria-label="...">
<ul class="pager">
<li><a href="Article_detail/{{privious_article.article_id}}">上一页:{{privious_article.title}}
</a></li>
<li><a href="Article_deticle/{{next_article.article_id}}">下一页：{{next_article.title}}</a></li> </ul> </nav>
②、视图（view.py）函数改造
#视图函数，返回文章详情页，新增返回上一页、下一页的数据
def get_article_detial(requestss,article_ID):
articles=Article.objects.all();
curr_article=None;
privious_index=0;
next_index=0;
#我们需要知道当前文章的信息
for index,article in enum(articles):
#如果当前文章的index==0,说明么有上一篇文章
if inde==0：
privious_index=0;
next_index=index+1;
#如果当前文章的index等于列表长度，说明没有下一篇文章
elif index==len(articles)-1:
privious_index=index-1;
next_index=index;
else:
privious_index=index-1;
next_index=index+1;
if article.article_id==article_ID:
curr_article=article_ID-1;-------------------->填入的id减去1，即可，验证通过
privious_article=articles[privious_index]
next_article=articles[next_index]
#break; #session_list=articles.content.split('\n')
return render(requestss,'blog/detail.html',
{
'article':articles[curr_article],
#'session_list':session_list
'curr_article':curr_article,
'privious_article':privious_article,
'next_article':next_article
});
③、运行可看到结果
但是这个有一个问题，如果已经在第一篇文章，再点击上一篇，无响应
如果已经在最后一篇文章，再点击下一篇文章，无响应，原因是代码中这种情况下，next_index=当前文章的index，所以怎么点击都还是在当前这个index
这个后续可以改造的~~待续
Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能的更多相关文章
- django博客项目8：文章详情页
首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...
- django初探-创建简单的博客系统(二)
上篇django初探-创建简单的博客系统(一)已经记录了Django实现博客的发布的整个过程,接下来继续说明博客标题和内容的显示. 显示博客详细 将博客内容保存到数据库还不是发布博客的终极目的,博客一 ...
- django 部署一个简单的博客系统
转:https://www.cnblogs.com/fnng/p/3737964.html 写的目的, 加深影响,熟悉开发流程, 开发都是练出来的. 环境 python3.5 windows 7 1. ...
- django初探-创建简单的博客系统
django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...
- django初探-创建简单的博客系统(一)
django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...
- python学习笔记--Django入门二 Django 的模板系统
为了使网站更干净简洁更容易维护,页面的设计和Python的代码必须分离开.我们可以使用Django的 模板系统 (Template System)来实现这种模式. 几个简单的模板标签(tag): ...
- Django练习项目之搭建博客
背景:自从今年回家过年后,来到公司给我转了试用,我的学习效率感觉不如从前,而且刚步入社会我总是想要怎么想明白想清楚一些事,这通常会花掉,消耗我大量的精力,因为我想把我的生活管理规划好了,而在it技术学 ...
- 第四章：Django 的模板系统(转)
在之前的章节中,你可能觉得例子中视图返回文本有点不妥.即是, HTML 是直接写在 Python 代码中的. 这种做法会导致这些问题: 要做任何设计上的更改就必须改写 Python 代 ...
- Django框架-模板系统
来看一段代码 def current_datetime(request): now = datetime.datetime.now() html = "<html><bod ...
随机推荐
- halcon+WinForm打开摄像头
注意引用halcon.dll,项目属性平台一致(X64) using HalconDotNet;//引用halcon using System.Threading;//引用线程 namespace M ...
- python8--文件操作 with。。。open语法
复习 一.类型转换 1.数字类型:int() | bool() | float() 2.str与int:int('10') | int('-10') | int('0') | float('-. ...
- 02-oracle中的基础sql
1.SQL SQL(Structured Query Language) 语言是目前主流的关系型数据库上执行数据操作.数据检索以及数据库维护所需要的标准语言,是用户与数据库之间进行交流的接口,许多关系 ...
- HTML界面多语言切换
我在做个人网站时考虑到多语言转换的问题,最后在JS文件中将所有文字数据储存然后设置HTML中的class与key属性来达到多语言效果.当然,还有一个别的方法,就是所有有文字内容的div都用不同语言写一 ...
- 深入理解JAVA中的代理模式
前言 代理是什么 事故现场:我家的宠物今天生病了,而我又没有相关的医学知识,所以我只让我的宠物多喝热水吗? 结果显然是不行的,所以我需要去找宠物医生这些更专业的人来帮我的宠物治病. 这个时候,代理就出 ...
- JS 条形码插件--JsBarcode 在小程序中使用
在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...
- centos 7.2下搭建vsftp 虚拟用户
虚拟用户搭建vsftp 要求一: 只允许上传 下载 不能删除 不能更换名称 yum install pam* yum install db4* -y yum install vsftpd chkcon ...
- 出现： object() takes no parameters 之后应该如何修改
这个错误花费了很多的时间去解决,包括重写代码也无济于事. 因为粗心,浪费了很多的时间在这个上面,特写此博客来记录,也希望朋友们不要粗心,特别是初学者. 接下来进入正文: 当在写self.XXX 下方 ...
- js较深入的知识点
浏览器渲染过程是怎样的?重绘重排是什么?如何避免过多的重绘重排? 将html解析为dom树; 将css解析为cssom; 结合DOM树和CSSOM树,生成一棵渲染树(Render Tree); 生成布 ...
- [Kubernetes]谈谈容器跨主机网络
继上篇文章:[Kubernetes]浅谈容器网络,自己给自己挖的坑,这篇文章来谈谈容器跨主机网络. 要理解容器"跨主通信"的原理,就要来谈谈 Flannel 这个项目. Flann ...