简说Python，号主老表，Python终身学习者，数据分析爱好者，从18年开始分享Python知识，原创文章227篇，写过Python、SQL、Excel入门文章，也写过Web开发、数据分析文章，老表还总结整理了一份2022Python学习资料和电子书资源，关注后私信回复：2022 即可领取。
一、前情回顾
在前面，我们完成了Django Blog博客markdown发布和显示的功能，但发布页面的输入框比(fei)较(chang)简陋，这一节中我们将一起来优化博客发布页面：给博客添加合适的Bootstrap表格样式。
在上一节更新完成后，我们的文章发布界面是上面这样，感觉也还行，像个样子，当又感觉有点简陋，确实，无论是页面左右边距，还是输入框，还是发布按钮，就凸显出一股穷酸劲。。。这节我们来简单改下，顺便实现下文章修改功能。
Django Blog系列文章
Django Blog|02 创建admin账户&settings.py介绍
Django Blog|03 创建一个blog app和Article模型
Django Blog|04 创建blog视图和完成MVT框架开发
Django Blog|06 添加博客详情页视图，显示博客详情
Django Blog|07 引入Bootstrap前端框架，优化页面
Django Blog | 09 这么简单！实现博客markdown输入和显示
二、设置自己的Form格式，美化页面
我们之前是直接调用的Django自带的form表单格式，接下来我们将来设置自己专属的表单格式。
首先，我们需要在对应应用（app）下新建一个forms.py文件，用于自定义form，进入目录Project/brief_blog/myblog/blog，然后右键新建一个forms.py文件，
并写入下方代码：
from django import forms from blog.models import Article class ArticleForm(forms.ModelForm): class Meta: model = Article fields = ('title', 'author', 'summary', 'content') labels = { 'title': '标题', 'author': '作者', 'summary': '摘要', 'content': '正文内容' } widgets = { 'title': forms.TextInput(attrs={'class': 'form-control'}), 'author': forms.Select(attrs={'class': 'form-select'}), 'summary': forms.TextInput(attrs={'class': 'form-control'}), }
接下来我们解释下上面forms.py中的代码，首先，我们需要导入django的forms（Django内置表单实现对象），其次我们需要导入我们需要设置表单格式的model类Article。
接着我们创建了一个ArticleFrom类来定制文章发布表单格式，该类继承了forms.ModelFrom（模型表单，可以直接通过模型操作数据库表字段值，简单说就是表单提交数据可以直接存储到数据库）。
在该类下创建一个Meta类，用来定义ArticleFrom元数据（可以理解为基本设置）。
- model：要操作的数据模型，就是我们自己定义的models类；
- fields：页面显示哪些字段，可以是序列（列表 元组都可以）批量指定，也可以直接是'__all__'表示所有字段；
- labels：字典，{'字段名': '页面显示文案'}设置对应字段在页面的提示文案，默认是字段名；
- widgets：可以设置页面显示的一些样式，如代码里设置的attrs属性，设置了每个输入框的
class为form-control。
有人可能会奇怪了，为什么class要设置成form-control，而不是别的呢？因为我们直接套用的Bootstrap官网提供的form表单输入框样式，不同的输入类型会有不同的类，大家可以直接官网查看学习，还可以查看更多样式的设置进一步优化页面：https://getbootstrap.com/docs/5.1/forms/overview/。
最后，Project/brief_blog/myblog/templates/article_add.html也小改了一下：
...和之前一样 <h1>写博客</h1> <form method="POST"> <!-- 添加csrf_token，防止黑客攻击，获取表单提交内容 csrf Cross Site Request Forgery)攻击 跨站请求伪造攻击 --> {% csrf_token %} {{ form.media }} {{ form }} <button type="submit" class="btn btn-primary">发布</button> </form> {% endblock %}
我们直接运行就可以啦，
简单美化
三、实现文章编辑（更新）功能
其实我们完成了文章的编写和详情展示后，再来写文章编辑功能，就非常好实现了，首先我们在/Project/brief_blog/myblog/templates中新建文章编辑页面模板article_edit.html，内容如下：
{% extends 'base.html' %} {% block title %} 老表爱技术-编辑博客 {% endblock %} {% block content %} <h1>编辑博客</h1> <form method="POST"> <!-- 添加csrf_token，防止黑客攻击，获取表单提交内容 csrf Cross Site Request Forgery)攻击 跨站请求伪造攻击 --> {% csrf_token %} {{ form.media }} {{ form }} <button type="submit" class="btn btn-primary">更新</button> </form> {% endblock %}
仔细观察，其实就是复制下文章发布页面模板，然后改下文案即可。因为确实对于文章编辑页面和发布页面区别不大，至少目前我们先这样。
模板创建好后，我们就去/Project/brief_blog/myblog/blog/views.py中添加一个视图，新增代码如下：
from django.views.generic import ListView, DetailView, CreateView, UpdateView from blog.models import Article from blog.forms import ArticleForm ···其余的和之前代码一样 # 编辑博客 class EditArticleView(UpdateView): model = Article form_class = ArticleForm template_name = 'article_edit.html'
这里我们需要新导入一个UpdateView这个类，该视图可以显示当前对象表单内容，并能在修改后对修改后的对象进行保存。
然后我们新建了一个EditArticleView类，继承自UpdateView即可，和AddArticleView一样，指定下model、form_class、template_name即可。
接下来我们要给我们新创建的师徒配置路由，进入到/Project/brief_blog/myblog/blog/urls.py，然后添加上EditArticleView的路由：
from django.urls import path from blog import views urlpatterns = [ # 第一个参数：路由地址 # 第二个参数：视图函数，直接通过views调用即可，要加上as_view # 第三个参数：路由名 path('', views.HomeView.as_view(), name='home'), # <int:pk> pk表示文章的编号，系统自带的主键 path('article/<int:pk>', views.ArticleDetailView.as_view(), name='detial_article'), path('add_article', views.AddArticleView.as_view(), name='add_article'), path('article/edit/<int:pk>', views.EditArticleView.as_view(), name='edit_article'), ]
接下来，我们还需将入口配置在前端页面上，就是在哪里显示这个编辑按钮，一般来说，编辑按钮都是在文章详情页面的，所以我们也将其放置到文章详情页面，所以我们直接修改下/Project/brief_blog/myblog/templates/article_detial.html即可，
...和之前一样 {% block content %} <div class="row"> <!-- 标题及作者 --> <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1> <div class="col-12 mt-4 mb-4"> 作者：{{ article.author }} <a href="{% url 'edit_article' article.pk %}" style="text-decoration:none;font-size: 12px;text-align: right;float:right;color: rgb(93, 89, 89)"> 编辑 </a> </div> <!-- 文章摘要 --> <h5 style="margin-top: 10px;margin-bottom: 10px;padding: 10px;outline: 0px;font-size: 14px;white-space: normal;text-align: left;color: rgb(62, 62, 62);background-color: rgb(248, 248, 248);border-radius: 3px;line-height: 2;word-break: break-all !important;letter-spacing: 1px !important;word-spacing: 1px !important;"> {{article.summary}} </h5> </div> <!-- 文章正文 --> <div id="content"> <textarea>{{article.content}}</textarea> </div> <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script> ...和以前一样
- 在作者后面添加了
编辑按钮 - 修改了文章摘要的样式
其他都没动，最后文章详情页面显示效果如下图所示：
感觉上比之前又更美啦～
文章编辑功能效果演示如下：
