十六.静态页面抽取模板
引言
模板标签之模板继承
静态模板文件：链接：https://pan.baidu.com/s/1eZKi4a5fBTmy-DwAQmr51w
提取码：8mmy
django--------block / extends / include 用法
为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行 : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% block xxx %}需要改变的代码{% endblock %}
一.分析静态页面
1.静态vs动态
| 条目 | 静态页面 | 动态页面 |
|---|---|---|
| 网站内容 | 固定不变 | 随访问时间，对象等不断变化 |
| 访问速度 | 更快，不需要脚本计算及读取后台数据库 | 更慢 |
| 改变内容 | 不方便，需要修改页面文件然后上传 | 简单，更新数据库即可 |
| 安全性 | 因为没有后台交互安全性更高 | 有安全隐患，容易被攻击 |
| 兼容性 | 夸平台，夸服务器 | 依赖网站开发语言环境 |
| 开发语言 | html | python，java，php |
2.本次项目页面分析
本项目由5个模块组成分别是：news、course、doc、user、admin，按照django的风格，在前面创建的模板文件夹templates下，分别创建以app名命名的文件夹news，course，doc，user，admin，用于存放每个应用的模板文件。在前面创建的静态文件夹statc下，也分别创建js，css，images，font等文件夹用来存放静态文件。
3.分析模板页面
user/login.html
news/index.html
doc/docDownload.html
course/course.html
news/search.html
抽取模板要先对应用内的网页进行分析，找出网页之间的共性。
对着5个页面分析不难发现：
每个页面的头部和尾部都是一样的。
注册页面（register.html）、课程页面（course.html）中间是由一个部分构成。
首页（index.html）、下载页面（download.html）、搜索页（search.html）中间由左右两个部分构成，下载页面（download.html）和搜索页（search.html）的右边部分都一样，而首页（index.html）的右边部分只比下载搜索页面多了一个人们推荐。
分析完后，我们可以来考虑怎么提取模板：
将最普遍的头部和尾部作为一个模板、中间部门由django的模板语法block代替,命名为base.html，这样注册页面、课程页面就可以在继承base.html后，将中间一部分填进去。
继承base.html，将中间一部分分为两部分，左边使用一个block代替，右边将在线课程和关注我源码填进去，再加一个block用于代替热门推荐，命名为base2.html,这样首页只需将左边一部分和热门推荐填进去，下载页面和搜索页面只用填左边一部分。
默认没有填的block,为空白。
遵循少数服从多数的原则，如果大多数都有这个共性，那就将共性作为模板，其他使用block代替，如果只有一两个，就不必使用模板了。
二.模板抽取
1.准备工作
将准备好的静态模板放到项目文件的static与templates文件夹中
2.抽取基本框架
何为基本框架？ 通过上面的对比可知，在所有的页面中公用的部分即为集合框架
为何要抽取基本框架？ 因为我们使用的是已经写好的静态模板，当我们把他们与后端相结合时，很多的文件路径不对，或者是很多前端的语法不在满足我们后端语法的需求，我们需要对一部分代码进行从新构造。在构造的过程中，为了简化构造过程，不在重复写反复利用的代码，我们该类代码抽离出来，进行统一的调用，增加代码的利用率。
在该项目中，重复利用的为index.html首页中的 1. 顶部导航 2.右边侧栏 3. 底边页脚
实现过程：
1.在templates文件夹下建立base文件夹
2.将index.html文件复制到该文件夹下，重命名为base.html文件
3.对文件进行抽取
- 在base.html中导入static静态文件夹
- 将文件中的文件路径，改为后端动态路径
- 将文件中的a标签路径接口改为自己的接口
例：
注：
这句代码在index.html文件中存在，所以不进行抽取，并且在部分不是共有部分，我们会在index.html文件中进行改写
<link rel="stylesheet" href="../css/news/index.css"
最后的得到的dase.html文件
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- title 模板 -->
<title>{% block title %}{% endblock title %}</title>
<!-- title 模板 end -->
<link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
<link rel="stylesheet" href="{% static 'css/base/common.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
<!-- 页面css 模板 -->
{% block link %}
{% endblock link %}
<!-- 页面css 模板 end -->
</head>
<body>
<!-- header start -->
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
<!-- logo end -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
{% block menus %}
<li class="active"><a href="{% url 'news:index' %}">首页</a></li>
<li><a href="{% url 'course:index' %}">在线课堂</a></li>
<li><a href="{% url 'doc:index' %}">下载文档</a></li>
<li><a href="#">搜索</a></li>
{% endblock menus %}
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<div class="login-box">
{% if user.is_authenticated %}
<div class="author">
<i class="PyWhich py-user"></i>
<span>{{ user.username }}</span>
<ul class="author-menu">
{% if user.is_staff %}
<li><a href="{% url 'myadmin:index' %}">后台管理</a></li>
{% endif %}
<li><a href="{% url 'user:logout' %}">退出登录</a></li>
</ul>
</div>
{% else %}
<div>
<i class="PyWhich py-user"></i>
<span>
<a href="{% url 'user:login' %}" class="login">登录</a> / <a href="{% url 'user:register' %}"
class="reg">注册</a>
</span>
</div>
{% endif %}
</div>
<!-- login end -->
</div>
</header>
<!-- header end -->
<!-- main start 模板 -->
{% block main_start %}
<main id="main">
<div class="w1200 clearfix">
{% block side %}
<aside class="side">
<div class="side-activities">
<h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
<div class="activities-img">
<a href="javascript:void(0);" target="_blank">
<img src="{% static 'images/english.jpg' %}" alt="title">
</a>
<p class="activities-tips">对话国外小姐姐</p>
</div>
<ul class="activities-list">
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-start">报名中</span>
<span class="active-title"><a
href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-end">已结束</span>
<span class="active-title"><a
href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
</a>
</li>
</ul>
</div>
<div class="side-attention clearfix">
<h3 class="attention-title">关注我</h3>
<ul class="side-attention-address">
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
style="color:rgb(0, 108, 226);"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
style="color:rgb(245,92,110);"></i>XinLan</a>
</li>
</ul>
<div class="side-attention-qr">
<p>扫码关注</p>
</div>
</div>
<!-- 热门推荐 模板 -->
{% block hot_recommend %}
<div class="side-hot-recommend">
<h3 class="hot-recommend">热门推荐</h3>
<ul class="hot-news-list">
<li>
<a href="javascript:void(0)" class="hot-news-contain clearfix">
<div class="hot-news-thumbnail">
<img src="{% static 'images/python_web.jpg' %}"
alt="">
</div>
<div class="hot-news-content">
<p class="hot-news-title">Django调试工具django-debug-toolbar安装使用教程</p>
<div class="hot-news-other clearfix">
<span class="news-type">python框架</span>
<!-- 自带的 -->
<time class="news-pub-time">11月11日</time>
<span class="news-author">python</span>
</div>
</div>
</a>
</li>
</ul>
</div>
{% endblock hot_recommend %}
<!-- 热门推荐 模板 end -->
</aside>
{% endblock side %}
<!-- main-contain 模板 -->
{% block main_contain %}
{% endblock %}
<!-- main-contain end -->
<!-- side start 模板 -->
<!-- side end -->
</div>
</main>
{% endblock main_start %}
<!-- main 内容模板 end -->
<!-- footer start -->
<footer id="footer">
<div class="footer-box">
<div class="footer-content">
<p class="top-content">
<span class="link">
<a href="javascript:void(0)">关于Python</a> |
<a href="javascript:void(0)">我就是我</a> |
<a href="javascript:void(0)">人生苦短</a> |
<a href="javascript:void(0)">我用Python</a>
</span>
<span class="about-me">关于我: <i class="PyWhich py-wechat"></i> XinLan</span>
</p>
<p class="bottom-content">
<span>地址： xxxx</span>
<span>联系方式: <a href="tel:400-1567-315">400-1567-315</a> (24小时在线)</span>
</p>
</div>
<p class="copyright-desc">
Copyright © 2008 - 2018 xxx有限公司. All Rights Reserved
</p>
</div>
</footer>
<!-- footer end -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="{% static 'js/base/common.js' %}"></script>
<script src="{% static 'js/base/message.js' %}"></script>
<!-- 自定义js模板 -->
{% block script %}
{% endblock script %}
<!-- 自定义js模板 end -->
</body>
</html>
3.news/index模板的继承与引用
3.1 继承模板
1.在文件中导入要继承的模板
{% extends 'base/base.html' %}
2.加载静态文件
{% load static %}
3.继承父类模板 base.html
4.删除在该模板中与父类模板重复的部分
5.得到的继承后的index.html模板
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- title 模板 -->
<title>{% block title %}{% endblock title %}</title>
<!-- title 模板 end -->
<link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
<link rel="stylesheet" href="{% static 'css/base/common.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
<!-- 页面css 模板 -->
{% block link %}
{% endblock link %}
<!-- 页面css 模板 end -->
</head>
<body>
<!-- header start -->
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
<!-- logo end -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
{% block menus %}
<li class="active"><a href="{% url 'news:index' %}">首页</a></li>
<li><a href="{% url 'course:index' %}">在线课堂</a></li>
<li><a href="{% url 'doc:index' %}">下载文档</a></li>
<li><a href="#">搜索</a></li>
{% endblock menus %}
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<div class="login-box">
{% if user.is_authenticated %}
<div class="author">
<i class="PyWhich py-user"></i>
<span>{{ user.username }}</span>
<ul class="author-menu">
{% if user.is_staff %}
<li><a href="{% url 'myadmin:index' %}">后台管理</a></li>
{% endif %}
<li><a href="{% url 'user:logout' %}">退出登录</a></li>
</ul>
</div>
{% else %}
<div>
<i class="PyWhich py-user"></i>
<span>
<a href="{% url 'user:login' %}" class="login">登录</a> / <a href="{% url 'user:register' %}"
class="reg">注册</a>
</span>
</div>
{% endif %}
</div>
<!-- login end -->
</div>
</header>
<!-- header end -->
<!-- main start 模板 -->
{% block main_start %}
<main id="main">
<div class="w1200 clearfix">
{% block side %}
<aside class="side">
<div class="side-activities">
<h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
<div class="activities-img">
<a href="javascript:void(0);" target="_blank">
<img src="{% static 'images/english.jpg' %}" alt="title">
</a>
<p class="activities-tips">对话国外小姐姐</p>
</div>
<ul class="activities-list">
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-start">报名中</span>
<span class="active-title"><a
href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-end">已结束</span>
<span class="active-title"><a
href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
</a>
</li>
</ul>
</div>
<div class="side-attention clearfix">
<h3 class="attention-title">关注我</h3>
<ul class="side-attention-address">
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
style="color:rgb(0, 108, 226);"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
style="color:rgb(245,92,110);"></i>XinLan</a>
</li>
</ul>
<div class="side-attention-qr">
<p>扫码关注</p>
</div>
</div>
<!-- 热门推荐 模板 -->
{% block hot_recommend %}
<div class="side-hot-recommend">
<h3 class="hot-recommend">热门推荐</h3>
<ul class="hot-news-list">
<li>
<a href="javascript:void(0)" class="hot-news-contain clearfix">
<div class="hot-news-thumbnail">
<img src="{% static 'images/python_web.jpg' %}"
alt="">
</div>
<div class="hot-news-content">
<p class="hot-news-title">Django调试工具django-debug-toolbar安装使用教程</p>
<div class="hot-news-other clearfix">
<span class="news-type">python框架</span>
<!-- 自带的 -->
<time class="news-pub-time">11月11日</time>
<span class="news-author">python</span>
</div>
</div>
</a>
</li>
</ul>
</div>
{% endblock hot_recommend %}
<!-- 热门推荐 模板 end -->
</aside>
{% endblock side %}
<!-- main-contain 模板 -->
{% block main_contain %}
{% endblock %}
<!-- main-contain end -->
<!-- side start 模板 -->
<!-- side end -->
</div>
</main>
{% endblock main_start %}
<!-- main 内容模板 end -->
<!-- footer start -->
<footer id="footer">
<div class="footer-box">
<div class="footer-content">
<p class="top-content">
<span class="link">
<a href="javascript:void(0)">关于Python</a> |
<a href="javascript:void(0)">我就是我</a> |
<a href="javascript:void(0)">人生苦短</a> |
<a href="javascript:void(0)">我用Python</a>
</span>
<span class="about-me">关于我: <i class="PyWhich py-wechat"></i> XinLan</span>
</p>
<p class="bottom-content">
<span>地址： xxxx</span>
<span>联系方式: <a href="tel:400-1567-315">400-1567-315</a> (24小时在线)</span>
</p>
</div>
<p class="copyright-desc">
Copyright © 2008 - 2018 xxx有限公司. All Rights Reserved
</p>
</div>
</footer>
<!-- footer end -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="{% static 'js/base/common.js' %}"></script>
<script src="{% static 'js/base/message.js' %}"></script>
<!-- 自定义js模板 -->
{% block script %}
{% endblock script %}
<!-- 自定义js模板 end -->
</body>
</html>
3.2模板的引用
1.在news的app应用文件夹下views.py文件，配置显示函数
2.在news的app应用文件夹下建立urls.py文件，配置路由
from django.urls import path
from . import views
# url的命名空间
app_name = 'news'
urlpatterns = [
path('', views.index, name='index'), # 将这条路由命名为index
]
命名空间可以在一个子应用有多个url时，需要引用其中一个url，做字典方式应用
{%url '命名空间：urlname'%}
3.来到项目目录下的urls文件，配置app的路由
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
#设置app的路由
path('',include('news.urls'))
]
4.运行结果
4.course模板的继承和引用
4.1继承模板
1.在文件中导入要继承的模板
{% extends 'base/base.html' %}
2.加载静态文件
{% load static %}
3.继承父类模板 base.html
4.删除在该模板中与父类模板重复的部分
5.得到的继承后的course.html模板
course.html
{% extends 'base/base.html' %}
{% load static %}
{% block title %}在线课堂{% endblock %}
{% block link %}
<link rel="stylesheet" href="{% static '/css/course/course.css' %}">
{% endblock %}
{% block menus %}
<li ><a href="{% url 'news:index' %}">首页</a></li>
<li class="active"><a href="{% url 'course:index' %}">在线课堂</a></li>
<li><a href="{% url 'doc:index' %}">下载文档</a></li>
<li><a href="search.html">搜索</a></li>
{% endblock menus %}
{% block main_start %}
<main id="course-container">
<div class="w1200">
<ul class="course-list">
<li class="course-item">
<a href="https://www.shiguangkey.com/course/2432">
<img class="course-img" src="{% static 'images/python_advanced.jpg' %}"
alt="潭州英语">
<div class="course-content">
<p class="course-info">python 全栈开发</p>
<p class="course-author">不动(python金牌讲师)</p>
<p class="course-price free">免费</p>
</div>
</a>
</li>
<li class="course-item">
<a href="https://www.shiguangkey.com/course/2432">
<img class="course-img" src="{% static 'images/python_web.jpg' %}"
alt="潭州英语">
<div class="course-content">
<p class="course-info">django 项目</p>
<p class="course-author">XinLan(python讲师)</p>
<p class="course-price free">免费</p>
</div>
</a>
</li>
</ul>
</div>
</main>
{% endblock %}
4.2模板的引用
1.在course的app应用文件夹下views.py文件，配置显示函数(建立视图类)
from django.shortcuts import render
from django.views import View
# Create your views here.
class IndexViews(View):
def get(self,request):
return render(request,'course/course.html')
2.在course的app应用文件夹下建立urls.py文件，配置路由
from django.urls import path
from . import views
#命名空间
app_name = 'course'
urlpatterns = [
path('', views.IndexViews.as_view(), name='index'), # 将这条路由命名为index
]
命名空间可以在一个子应用有多个url时，需要引用其中一个url，做字典方式应用
{%url '命名空间：urlname'%}
3.来到项目目录下的urls文件，配置app的路由
为什么添加course/ 路径,因为我们实现进入首页，然后通过该路径进入子引用
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
#设置app的路由
path('',include('news.urls')),
#为什么添加course/ 路径,因为我们实现进入首页，然后通过该路径进入子引用
path('course/',include('course.urls'))
]
5.doc/docDownload模板的继承和引用
5.1继承模板
1.在文件中导入要继承的模板
{% extends 'base/base.html' %}
2.加载静态文件
{% load static %}
3.继承父类模板 base.html
4.删除在该模板中与父类模板重复的部分
5.得到的继承后的docDownload.html模板
{% extends 'base/base.html' %}
{% block title %}
{% load static %}
文档下载
{% endblock title %}
{% block link %}
<link href="{% static 'css/doc/docDownload.css' %}" rel="stylesheet">
{% endblock link %}
<!-- header start -->
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
<!-- logo end -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
{% block menus %}
<li><a href="{% url 'news:index' %}">首页</a></li>
<li class="active"><a href="{% url 'course:index' %}">在线课堂</a></li>
<li><a href="{% url 'doc:index' %}">下载文档</a></li>
<li><a href="search.html">搜索</a></li>
{% endblock menus %}
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<!-- login end -->
</div>
</header>
<!-- header end -->
<!-- main start -->
{% block main_contain %}
<div class="main-contain ">
<div class="banner">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802845035,3786939119&fm=26&gp=0.jpg"
alt="">
</div>
<div class="pay-doc-contain">
<ul class="pay-list">
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="d-contain">
<p class="doc-title">python cookbook 3.0 教程</p>
<p class="doc-desc">强烈推荐的python 教程。</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下载</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">流畅的Python</p>
<p class="pay-desc">【本书特色】
本书由奋战在Python开发一线近20年的Luciano Ramalho执笔，Victor Stinner、Alex
Martelli等Python大咖担纲技术审稿人，从语言设计层面剖析编程细节，兼顾Python 3和Python
2，告诉你Python中不亲自动手实践就无法理解的语言陷阱成因和解决之道，教你写出风格地道的Python代码。</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下载</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">深入Flask</p>
<p class="pay-desc">深入Flask，强烈推荐！</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下载</a>
</div>
</li>
</ul>
</div>
</div>
{% endblock main_contain %}
<!-- main-contain end -->
<!-- side start -->
<!-- side end -->
<!-- footer end -->
{% block script %}
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
{% endblock script %}
5.2模板的引用
1.在doc的app应用文件夹下views.py文件，配置显示函数
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,'doc/docDownload.html')
2.在course的app应用文件夹下建立urls.py文件，配置路由
from django.urls import path
from . import views
# url的命名空间
app_name = 'doc'
urlpatterns = [
path('', views.index, name='index'), # 将这条路由命名为index
]
命名空间可以在一个子应用有多个url时，需要引用其中一个url，做字典方式应用
{%url '命名空间：urlname'%}
3.来到项目目录下的urls文件，配置app的路由
为什么添加doc/ 路径,因为我们实现进入首页，然后通过该路径进入子引用
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
#设置app的路由
path('',include('news.urls')),
#为什么添加course/ 路径,因为我们实现进入首页，然后通过该路径进入子引用
path('course/',include('course.urls')),
##为什么添加doc/ 路径,因为我们实现进入首页，然后通过该路径进入子引用
path('doc/',include('doc.urls'))
]
6.user/login模板的继承和引用
6.1继承模板
1.在文件中导入要继承的模板
{% extends 'base/base.html' %}
2.加载静态文件
{% load static %}
3.继承父类模板 base.html
4.删除在该模板中与父类模板重复的部分
5.得到的继承后的login.html模板
{% extends 'base/base.html' %}
{% load static %}
{% block title %}
登录
{% endblock title %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock link %}
<!-- header start -->
<!-- header end -->
{% block main_start %}
<!-- container start -->
<main id="container">
<div class="login-contain">
<div class="top-contain">
<h4 class="please-login">请登录</h4>
<a href="javascript:void(0);" class="register">立即注册 ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" name="password" class="form-control">
</div>
<div class="form-item clearfix">
<label>
<input type="checkbox" name="remember">
<span>记住我</span>
</label>
<a href="javascript:void(0);" class="forget-password">忘记密码?</a>
</div>
<div class="form-login">
<input type="submit" value="登录" class="login-btn">
</div>
</form>
</div>
</main>
<!-- container end -->
{% endblock main_start %}
6.得到的继承后的register·.html模板
{% extends 'base/base.html' %}
{% load static %}
{% block title %}注册{% endblock title %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock link %}
{% block main_start %}
<main id="container">
<div class="register-contain">
<div class="top-contain">
<h4 class="please-register">请注册</h4>
<a href="javascript:void(0);" class="login">立即登录 ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="text" placeholder="请输入用户名" name="username" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" name="password" class="form-control">
</div>
<div class="form-item">
<input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control">
</div>
<div class="form-item">
<input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off" autofocus>
</div>
<div class="form-item">
<input type="text" placeholder="请输入图形验证码" name="captcha_graph" class="form-captcha">
<a href="javascript:void(0);" class="captcha-graph-img">
<img src="#" alt="验证码" title="点击刷新">
</a>
</div>
<div class="form-item">
<input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" autocomplete="off">
<a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a>
</div>
<div class="form-item">
<input type="submit" value="立即注册" class="register-btn">
</div>
</form>
</div>
</main>
{% endblock main_start %}
{% block script %}
<script src="{% static 'js/user/auth.js' %}"></script>
{% endblock script %}
6.2模板的引用
1.在user的app应用文件夹下views.py文件，配置显示函数(建立视图类)
from django.shortcuts import render
# Create your views here.
def login(request):
#登录模块
return render(request, 'user/login.html')
def register(request):
#注册模块
return render(request,'user/register.html')
2.在user的app应用文件夹下建立urls.py文件，配置路由
from django.urls import path
from . import views
# url的命名空间
app_name = 'user'
urlpatterns = [
path('login/', views.login, name='login'),
path('register/', views.register, name='register'),
]
命名空间可以在一个子应用有多个url时，需要引用其中一个url，做字典方式应用
{%url '命名空间：urlname'%}
3.来到项目目录下的urls文件，配置app的路由
同上面比较同样是子应用，为什么不设置路径，因为在user中不只是一个接口
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
#设置app的路由
path('',include('news.urls')),
#为什么添加course/ 路径,因为我们实现进入首页，然后通过该路径进入子引用
path('course/',include('course.urls')),
#为什么添加doc/ 路径,因为我们实现进入首页，然后通过该路径进入子引用
path('doc/',include('doc.urls')),
#同上面比较同样是子应用，为什么不设置路径，因为在user中不只是一个接口
path('',include('user.urls'))
]
7.运行结果
其他模板的引用以后调用
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
