Django的页面模版提取（三）

zx钟

发布于 2019-07-19 16:34:35

6550

发布于 2019-07-19 16:34:35

文章被收录于专栏：测试游记测试游记

模版提取

在完成了花架子的搭建之后，现在需要看一下前端的Html代码了。

Html代码打开这几份代码进行横行对比，可以发现里面好大一部分都是一样的

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <meta charset="utf-8">
 5    <meta name="author" content="Kodinger">
 6    <title>My Login Page &mdash; Bootstrap 4 Login Page Snippet</title>
 7    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
 8    <link rel="stylesheet" type="text/css" href="css/my-login.css">
 9</head>
10<body class="my-login-page">
11    <section class="h-100">
12        <div class="container h-100">

每一个的头部都是这样的，作为一个懒惰的程序员，当然是要把他们拎出来了。我们写一个base.html来当作模版。以forgot.html为例，可以看出只有红框框选中的地方和其他几个文件不一样

forgot

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

 1{% load static %}
 2<!DOCTYPE html>
 3<html>
 4<head>
 5  <meta charset="utf-8">
 6  <meta name="author" content="Kodinger">
 7  <title>
 8    {% block title %}
 9      登录
10    {% endblock %}
11  </title>
12  <link rel="stylesheet" type="text/css" href={% static 'bootstrap/css/bootstrap.min.css' %}>
13  <link rel="stylesheet" type="text/css" href={% static 'css/my-login.css' %}>
14</head>
15<body class="my-login-page">
16<section class="h-100">
17  <div class="container h-100">
18    {% block main %}
19
20    {% endblock %}
21  </div>
22</section>
23
24<script src={% static "js/jquery.min.js" %}></script>
25<script src={% static "bootstrap/js/bootstrap.min.js" %}></script>
26<script src={% static "js/my-login.js" %}></script>
27</body>
28</html>

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

模块化后的forgot 新的forgot.html如图所示。同理，完成其他几个html的模版提取。

页面渲染部分代码编写

编写代码可以通过url访问几个页面首先是首页有两种方式可以实现：

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

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

定义类视图的路由：

1from django.urls import path
2from . import views
3
4urlpatterns = [
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
 9
10class ForgotView(View):
11    def get(self, request):
12        return render(request, 'login/forgot.html')
13
14
15class RegisterView(View):
16    def get(self, request):
17        return render(request, 'login/register.html')
18
19
20class ResetView(View):
21    def get(self, request):
22        return render(request, 'login/reset.html')

路由配置

1from django.urls import path
2from . import views
3
4urlpatterns = [
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]