Django Blog | 10 自定义Form，美化页面并实现文章编辑功能

一、前情回顾

在前面，我们完成了Django Blog博客markdown发布和显示的功能，但发布页面的输入框比(fei)较(chang)简陋，这一节中我们将一起来优化博客发布页面：给博客添加合适的Bootstrap表格样式。

在上一节更新完成后，我们的文章发布界面是上面这样，感觉也还行，像个样子，当又感觉有点简陋，确实，无论是页面左右边距，还是输入框，还是发布按钮，就凸显出一股穷酸劲。。。这节我们来简单改下，顺便实现下文章修改功能。

二、设置自己的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>   ...和以前一样   

• 在作者后面添加了编辑按钮

• 修改了文章摘要的样式

其他都没动，最后文章详情页面显示效果如下图所示：

感觉上比之前又更美啦～

文章编辑功能效果演示如下：

以上就是“Django Blog | 10 自定义Form，美化页面并实现文章编辑功能”的全部内容，希望对你有所帮助。
​
​关于Python技术储备

学好 Python 不论是就业还是做副业赚钱都不错，但要学会 Python 还是要有一个学习规划。最后大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！

一、Python所有方向的学习路线

Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

二、Python必备开发工具

三、Python视频合集

观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。

四、实战案例

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

五、Python练习题

检查学习结果。

六、面试资料

我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

最后祝大家天天进步！！

上面这份完整版的Python全套学习资料已经上传至CSDN官方，朋友如果需要可以直接微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】。