模版提取
在完成了花架子的搭建之后，现在需要看一下前端的Html代码了。
Html代码
打开这几份代码进行横行对比，可以发现里面好大一部分都是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Kodinger">
<title>My Login Page — Bootstrap 4 Login Page Snippet</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/my-login.css">
</head>
<body class="my-login-page">
<section class="h-100">
<div class="container h-100">
每一个的头部都是这样的，作为一个懒惰的程序员，当然是要把他们拎出来了。
我们写一个base.html来当作模版。
以forgot.html为例，可以看出只有红框框选中的地方和其他几个文件不一样
forgot
那么我们的base.html可以写出这样
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Kodinger">
<title>
{% block title %}
登录
{% endblock %}
</title>
<link rel="stylesheet" type="text/css" href={% static 'bootstrap/css/bootstrap.min.css' %}>
<link rel="stylesheet" type="text/css" href={% static 'css/my-login.css' %}>
</head>
<body class="my-login-page">
<section class="h-100">
<div class="container h-100">
{% block main %}
{% endblock %}
</div>
</section>
<script src={% static "js/jquery.min.js" %}></script>
<script src={% static "bootstrap/js/bootstrap.min.js" %}></script>
<script src={% static "js/my-login.js" %}></script>
</body>
</html>
留出了{% block main %} {% endblock %}来摆放差异的内容
模块化后的forgot
新的forgot.html如图所示。
同理，完成其他几个html的模版提取。
页面渲染部分代码编写
编写代码可以通过url访问几个页面
首先是首页
有两种方式可以实现：
- 函数视图
函数视图便于理解
代码可读性与复用性都不佳 - 类视图
代码可读性好
类视图相对于函数视图有更高的复用性
所以选择使用类视图：
from django.shortcuts import render
from django.views import View
class LoginView(View):
def get(self, request):
return render(request, 'login/index.html')
定义类视图的路由：
from django.urls import path
from . import views
urlpatterns = [
path('', views.LoginView.as_view(), name='login'),
]
同理，完成其他几个页面的类视图GET代码编写：
from django.shortcuts import render
from django.views import View
class LoginView(View):
def get(self, request):
return render(request, 'login/index.html')
class ForgotView(View):
def get(self, request):
return render(request, 'login/forgot.html')
class RegisterView(View):
def get(self, request):
return render(request, 'login/register.html')
class ResetView(View):
def get(self, request):
return render(request, 'login/reset.html')
路由配置
from django.urls import path
from . import views
urlpatterns = [
path('', views.LoginView.as_view(), name='login'),
path('forgot/', views.ForgotView.as_view(), name='forgot'),
path('register/', views.RegisterView.as_view(), name='register'),
path('reset/', views.ResetView.as_view(), name='reset'),
]
页面跳转
下面修改index.html里面的a标签完成页面上直接跳转
image.png
改为
<a href={% url 'forgot' %} class="float-right">同理找到全部需要修改的a标签
运行后点击页面上仅有的几个按钮测试跳转是否正常。
再把里面的一些英文改成中文，到此这个抄来的前端页面，大半都变成我们自己的东西了。
本土化
以上就完成了页面模版的提取与简单的类视图。
后续再讲POST的实现。
由于代码的量已经增加的有点多，全部贴出来不太美观，所以上库进行版本管理量。
Git地址：https://github.com/zx490336534/Zxapitest.git
