每一个的头部都是这样的，作为一个懒惰的程序员，当然是要把他们拎出来了。

我们写一个base.html来当作模版。

以forgot.html为例，可以看出只有红框框选中的地方和其他几个文件不一样

forgot

那么我们的base.html可以写出这样

 1{% load static %} 2 3 4 5  6  7  8 {% block title %} 9 登录10 {% endblock %}11 12 13 14151617 

22232425262728

留出了{% block main %} {% endblock %}来摆放差异的内容

模块化后的forgot

新的forgot.html如图所示。

同理，完成其他几个html的模版提取。

页面渲染部分代码编写

编写代码可以通过url访问几个页面

首先是首页

有两种方式可以实现：

函数视图函数视图便于理解代码可读性与复用性都不佳类视图代码可读性好类视图相对于函数视图有更高的复用性所以选择使用类视图：

1from django.shortcuts import render2from django.views import View34class LoginView(View):5 def get(self, request):6 return render(request, 'login/index.html')

定义类视图的路由：

1from django.urls import path2from . import views34urlpatterns = [5 path('', views.LoginView.as_view(), name='login'),6]

同理，完成其他几个页面的类视图GET代码编写：

 1from django.shortcuts import render 2from django.views import View 3 4 5class LoginView(View): 6 def get(self, request): 7 return render(request, 'login/index.html') 8 910class ForgotView(View):11 def get(self, request):12 return render(request, 'login/forgot.html')131415class RegisterView(View):16 def get(self, request):17 return render(request, 'login/register.html')181920class ResetView(View):21 def get(self, request):22 return render(request, 'login/reset.html')

路由配置

1from django.urls import path2from . import views34urlpatterns = [5 path('', views.LoginView.as_view(), name='login'),6 path('forgot/', views.ForgotView.as_view(), name='forgot'),7 path('register/', views.RegisterView.as_view(), name='register'),8 path('reset/', views.ResetView.as_view(), name='reset'),9]

页面跳转

下面修改index.html里面的a标签完成页面上直接跳转

image.png

改为

同理找到全部需要修改的a标签

运行后点击页面上仅有的几个按钮测试跳转是否正常。

再把里面的一些英文改成中文，到此这个抄来的前端页面，大半都变成我们自己的东西了。

本土化

以上就完成了页面模版的提取与简单的类视图。

后续再讲POST的实现。

由于代码的量已经增加的有点多，全部贴出来不太美观，所以上库进行版本管理量。

Git地址：https://github.com/zx490336534/Zxapitest.git