Django Blog | 10 自定义Form，美化页面并实现文章编辑功能-阿里云开发者社区

一、前情回顾

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

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

Django Blog系列文章

Django Blog|01 创建环境和项目

Django Blog|02 创建admin账户&settings.py介绍

Django Blog|03 创建一个blog app和Article模型

Django Blog|04 创建blog视图和完成MVT框架开发

Django Blog|05 修改首页显示博客列表

Django Blog|06 添加博客详情页视图，显示博客详情

Django Blog|07 引入Bootstrap前端框架，优化页面

Django Blog|08 添加编写+发布博客功能

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)">
    <!-- 文章摘要 -->
    <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}}
<!-- 文章正文 -->
<div id="content">
    <textarea>{{article.content}}</textarea>
<script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
...和以前一样

在作者后面添加了 编辑 按钮
修改了文章摘要的样式

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

感觉上比之前又更美啦～

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

Django框架开发004期 Python编程调用自定义Django框架template模板网页

需要修改settings.py文件中的两个配置：将DEBUG设置为False，标识当前处于非调试模式非调试模式下需要指定ALLOWED_HOSTS，这里将它简单地设置为[‘*’]，代表允许所有的域名访问在Django框架中，自带一个后台管理页面admin，这个管理页面很全，但是，有些并不是我们需要的，所以我们可以根据admin的实现流程来自定义自己的需求，即根据admin的实现方式来实现自定制--Xadmin 首先，我们先解析admin的流程，在Django中，我们在创建项目的时候，Django... 由Django的CBV模式流程，可以知道在`url匹配完成后，会执行自定义的类中的as_view方法`。如果自定义的类中没有定义`as_view方法`，根据面向对象中类的继承可以知道，则`会执行其父类View中的as_view方法` `在Django的View的as_view方法中，又会调用dispatch方法`。

一、前情回顾

Django Blog系列文章

二、设置自己的Form格式，美化 页面

三、实现文章编辑（更新）功能

二、设置自己的Form格式，美化页面