Django2.3 用Bootstrap美化页面并添加相应的功能
用Bootstrap3就足够了，此处用Bootstrap的CSS样式就可以了
链接
1.美化主页
1.1 导入链接
此处只需要导入Bootstrap的CSS核心文件就可以了，此处是用CDN导入的，也可以本地导入，比较麻烦，以后再说吧。
1.2 页面头部和主体部分
page-header指定头部，page-body类指定主体部分。
直接从官网上粘贴过来的
1.3 添加分页按钮
navigation类添加分页按钮，等待一会实现
1.4 Button样式
把新建文章弄成一个按钮，button类。
index.html的代码
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<div class="container page-header">
<h1>博客主页
<small>by boysmall>
h1>
div>
<div class="container page-body">
<div class="body-main">
{% for article in articles %}
<div>
<a class="text-info h3" href="{% url 'blog:detail' article.id %}">{{ article.title }}a>
<p class="text-warning lead">{{ article.content }}p>
div>
{% endfor %}
div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
<a class="btn btn-success" href="{% url 'blog:new_blog' 0 %}">新建文章a>
div>
body>
html>
2.美化详细页面
与美化表单差不多，就是添加了翻页的按钮
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<div class="container page-header">
<h1>{{ article.title }}h1>
div>
<div class="container page-body">
<div class="body-main">
<p>{{ article.content }}p>
div>
<div>
<a class="btn btn-success" href="{% url 'blog:new_blog' article.id %}">修改文章a>
<a class="btn btn-info" href="{% url 'blog:index' %}">返回主页a>
div>
<nav aria-label="...">
<ul class="pager">
<li><a href="{% url 'blog:detail' previous_article.id %} ">上一篇{{ previous_article.title }}a>li>
<li><a href="{% url 'blog:detail' next_article.id %} ">下一篇{{ next_article.title }}a>li>
ul>
nav>
div>
body>
html>
3. 美化表单
3.1 把表单变得便于维护
原本的表单里又ifelse语句使得表单变得冗长
（1）把ifelse的范围缩小。
（2）DTL里如果发现不存在的变量默认为空，但是过滤器default:‘指定值’ 可以判断，如果变量不存在则把变量设置为指定的值，如果存在把变量就是原本的值。
这样表单变得易于维护了
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<form action="{% url 'blog:index' %}" method="post">
{% if article %}
<p>修改文章p>
{% else %}
<p>新建文章p>
{% endif %}
{% csrf_token %}
<input type="hidden" name="id" value="{{ article.id | default:'0'}}">
<label>
文章标题
<input type="text" name="title" value="{{ article.title }}">
label>
<br/>
<label>
文章内容
label>
<br/>
<input type="submit" value="提交">
form>
body>
html>
3.2 开始用Bootstrap美化表单
其实就是Bootstrap页面的东西复制粘贴调节得来的
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<form action="{% url 'blog:index' %}" method="post" class="form-horizontal">
{% if article %}
<p>修改文章:p>
{% else %}
<p>新建文章:p>
{% endif %}
{% csrf_token %}
<input type="hidden" name="id" value="{{ article.id | default:'0'}}">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">文章标题label>
<div class="col-sm-10">
<input type="text" name="title" value="{{ article.title }}">
div>
div>
<div class="form-group">
<label for="content" class="col-sm-2 control-label">文章内容label>
<div class="col-sm-10">
<input type="text" name="content" value="{{ article.content }}" }>
div>
div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign inbutton>
div>
div>
form>
body>
html>
4. 添加上一篇下一篇功能
4.1 修改detail.html
<nav aria-label="...">
<ul class="pager">
<li><a href="{% url 'blog:detail' previous_article.id %} ">上一篇{{ previous_article.title }}a>li>
<li><a href="{% url 'blog:detail' next_article.id %} ">下一篇{{ next_article.title }}a>li>
ul>
nav>
4.2 修改视图函数，传入参数
此处需要修改视图函数了，获取前后文章数据。
def detail(request, article_id):
articles = Article.objects.all()
# 如果是第一篇或者最后一篇，上一篇或者下一篇就是自己
if article_id == str(1):
# 如果是第一篇
previous_article_id = str(article_id)
else:
previous_article_id = str(int(article_id) - 1)
if article_id == str(len(articles)):
# 如果是最后一篇
next_article_id = str(article_id)
else:
next_article_id = str(int(article_id) + 1)
# 分别获得当前文章、上一篇、下一篇文章
article = Article.objects.get(pk=article_id)
previous_article = Article.objects.get(pk=previous_article_id)
next_article = Article.objects.get(pk=next_article_id)
return render(request, "blog/detail.html", {"article": article,
"previous_article": previous_article,
"next_article": next_article,
})
5. 添加分页的功能
5.1 分页模块介绍
https://docs.djangoproject.com/zh-hans/2.2/topics/pagination/ 官方文档
使用manage.py的shell功能
python manage.py shell
from django.core.paginator import Paginator
1.构造分页组对象 。用来分页的列表，每页的元素数目
2.分页组的属性 ，方法。
3.分页的属性，方法。
# 等待分页的列表
objects=['one','two','three','four','five','three']
# 构造分页组对象
p=Paginator(objects,2)
# 分页组对象的属性
p.count #总的列表长度 6
p.num_pages # 分页页数 3
# 获得分页对象
page1=p.page(1)
page3=p.page(3)
# 分页对象的方法
# 1.判断分页前后
page1.has_previous()
page1.has_next()
page3.has_previous()
page3.has_next()
# 2.是否有其他页
Page.has_other_pages()
# 3. 这个页的起始终止索引
page3.start_index()# 5
page3.end_index() #6
# 4. 前面后面的页码
page1.next_page_number()# 2
page3.previous_page_number()# 2
# 分页的属性
page3.number # 2
5.2 实现思路
- url传递index/1表示第一页，index/2表示第二页，以此类推。
- 视图层向接受当前的页码并且传递向模板传递以下数据
（1）总的页数构成的页码，例如有四页，就传递[1,2,3,4]便于直接显示。
（2）当前页的页码。
（3）当前页的起始到终止元素构成的列表。
（4）上一页，下一页
5.3 模板部分
在最后的分页部分添加链接
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<div class="container page-header">
<h1>博客主页
<small>by boysmall>
h1>
div>
<div class="container page-body">
<div class="body-main">
{% for article in articles %}
<div>
<a class="text-info h3" href="{% url 'blog:detail' article.id %}">{{ article.title }}a>
<p class="text-warning lead">{{ article.content }}p>
div>
{% endfor %}
div>
<a class="btn btn-success" href="{% url 'blog:new_blog' 0 %}">新建文章a>
<div class="body-footer">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="{% url 'blog:index' previous_page %}" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
{% for num in pages_num %}
<li><a href="{% url 'blog:index' num %}">{{ num }}a>li>
{% endfor %}
<li>
<a href="{% url 'blog:index' next_page %}" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
div>
div>
body>
html>
5.4 视图部分
获得当前分页的信息，并且进行修改
# Create your views here.
def index(request, page): # 给定页数
# 接收到HTTP的POST请求用来新建或修改博客成功
# 指定page_num到分页的第几页
if request.POST.get('title', '') != '':
# 如果接收到了POST请求
id = request.POST['id']
title = request.POST['title']
content = request.POST['content']
if id == '0':
# 如果新建博客
Article.objects.create(title=title, content=content)
else:
# 如果是修改博客，从数据库里取出来，并且修改后存到数据库里
edited_article = Article.objects.get(pk=id)
edited_article.title = title
edited_article.content = content
edited_article.save()
# 展示所有数据
all_articles = Article.objects.all()
paginator = Paginator(all_articles, 3) # 此处每页指定元素数目
pages_num = paginator.num_pages # 一共有这么多页
articles = paginator.page(page) # 当前分页的文章
# 如果是第一页或者最后一页，上一篇或者下一页就是自己
if articles.has_previous():
previous_page = str(int(page) - 1)
else:
previous_page = page
if articles.has_next():
next_page = str(int(page) + 1)
else:
next_page = page
return render(request, 'blog/index.html', {'articles': articles, # 当前分页的文章
'pages_num': range(1, pages_num + 1), # 从1到page_num的列表
'current_page': page, # 当前的页码
'previous_page': previous_page, # 下一页页码
'next_page': next_page,
})
5.5 调试
最后发现new_blog.html和detail.html里会有显示需要向主页跳转时提供参数，提供1即可。跳转到第一页.
6.最后的代码
资源