前端是一个非常蛋疼的工作，不仅需要了解html、css、JavaScript、jquery……你还要有审美、有极大的耐心。脾气暴躁的不建议上手。
我目前用的框架是bootstrap4，官网地址：https://v4.bootcss.com/。（这个还是几年前在航信敏哥带我入门的）。建议初学者多看看官方中文文档，我这边直接上代码。
1、首先在static目录下导入相关的包，包目录如下：
我在所有包都放到百度网盘上了，欢迎自取，链接：
https://pan.baidu.com/s/1W5rHfMXjtOKpzpP3Il_p0A
提取码：
93cq
2、把之前templates目录下的html全都备个份，我是直接在后缀加了一个.bak。编程一定要养成随时备份的好习惯。
3、在templates目录下新建templates/base.html，base是个公共页面，里面引入我们刚才导的包，后面的页面就不用单独引入了。记得最前面要加入{% load staticfiles %}载入静态资源文件。
base页面还涉及到两个知识点一是打洞。例如{% block title %}{% endblock %}这段代码，子页面如果也有{% block title %}{% endblock %}就会把子页面的代码增加到base里来，如果没有这里就为空。
第二个知识点是引入其他页面。例如 {% include 'header.html' %}，这个相当于把header.html里的所有代码放到base里的这个位置，方便管理和阅读。
<!-- 载入静态文件 -->{% load staticfiles %}<!DOCTYPE html><!-- 网站主语言 --><html lang="zh-cn"><head><!-- 网站采用的字符编码 --><meta charset="utf-8"><!-- 预留网站标题的位置 --><title>{% block title %}{% endblock %}</title><!-- 引入bootstrap的css文件 --><link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"></head><body><!-- 引入导航栏 -->{% include 'header.html' %}<!-- 预留具体页面的位置 -->{% block content %}{% endblock content %}<!-- 引入注脚 -->{% include 'footer.html' %}<!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 --><script src="{% static 'jquery/jquery-3.3.1.js' %}"></script><script src="{% static 'popper/popper-1.14.4.js' %}"></script><!-- 引入bootstrap的js文件 --><script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script><script>function export_excel() {var post_url = '/daily/excel_export/';location.replace(post_url);}</script></body></html>
4、新建templates/header.html。header和footer都是属于公共页面，每个页面都会显示。
<!DOCTYPE html><!-- 定义导航栏 --><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container"><!-- 导航栏商标 --><a class="navbar-brand" href="{% url 'daily:list' %}">日报系统</a><!-- 导航入口 --><div><ul class="navbar-nav"><!-- Django的 if 模板语句 -->{% if user.is_authenticated %}<!-- 如果用户已经登录，则显示用户名下拉框 --><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ user.username }}</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="{% url 'daily:create' %}">写日报</a><a class="dropdown-item" href='{% url "userprofile:edit" user.id %}'>修改信息</a><a class="dropdown-item" href="{% url "userprofile:logout" %}">退出登录</a></div></li><!-- 如果用户未登录，则显示 “登录” -->{% else %}<li class="nav-item"><a class="nav-link" href="{% url 'userprofile:login' %}">登录</a></li><!-- if 语句在这里结束 -->{% endif %}</ul></div></div></nav>
5、新建templates/footer.html
{% load staticfiles %}<!-- Footer --><div><br><br><br></div><footer class="py-3 bg-dark fixed-bottom"><div class="container"><p class="m-0 text-center text-white">wufan © 日报系统</p></div></footer>
6、修改templates/list.html，这个页面继承base.html，通过打洞把相关的代码替换到base里，div里放的是bootstrap的相关样式，这里就不细讲了，其他从后端取值的代码不变。
<!DOCTYPE html><!-- extends表明此页面继承自 base.html 文件 -->{% extends "base.html" %}{% load staticfiles %}<!-- 写入 base.html 中定义的 title -->{% block title %}日报列表{% endblock title %}<!-- 写入 base.html 中定义的 content -->{% block content %}<br/><div class="container"><div class="row"><div class="col-md-4"><form><div class="input-group mb-3"><input type="text" class="form-control" name="date" placeholder="日期格式:XXXX-XX-XX"><div class="input-group-append"><input type="submit" class="btn btn-success" value="提交按钮"></div></div></form></div><div class="col-md-8"><button type="button" class="btn btn-primary" onclick="export_excel()" style="float:right;">导出excel</button></div></div></div><hr><div class="container"><table class="table table-striped"><tr><th>姓名</th><th>今日任务</th><th>明日计划</th><th>日期</th><th>附件</th></tr>{% for daily in dailylist %}<tr><td>{{ daily.author }}</td><td>{{ daily.todaytask }}</td><td>{{ daily.tomorrowtask }}</td><td>{{ daily.created|date:'Y-m-d' }}</td><td>{{ daily.dailyfile }}</td></tr>{% endfor %}</table><!-- 页码导航 --><div class="pagination row"><div class="m-auto"><span class="step-links"><!-- 如果不是第一页，则显示上翻按钮 -->{% if dailylist.has_previous %}<a href="?page=1" class="btn btn-success">« 1</a><span>...</span><a href="?page={{ dailylist.previous_page_number }}"class="btn btn-secondary">{{ dailylist.previous_page_number }}</a>{% endif %}<!-- 当前页面 --><span class="current btn btn-danger">{{ dailylist.number }}</span><!-- 如果不是最末页，则显示下翻按钮 -->{% if dailylist.has_next %}<a href="?page={{ dailylist.next_page_number }}"class="btn btn-secondary">{{ dailylist.next_page_number }}</a><span>...</span><a href="?page={{ dailylist.paginator.num_pages }}"class="btn btn-success">{{ dailylist.paginator.num_pages }} »</a>{% endif %}</span></div></div></div>{% endblock content %}
7、同理修改templates/create.html
<!DOCTYPE html>{% extends "base.html" %} {% load staticfiles %}{% block title %} 写日报 {% endblock title %}{% block content %}<div class="container"><div class="row"><div class="col-12"><br><form method="post" action=".">{% csrf_token %}<!-- 账号 --><div class="form-group"><label>今日任务</label><input type="text" class="form-control" name="todaytask"></div><!-- 密码 --><div class="form-group"><label>明日计划</label><input type="text" class="form-control" name="tomorrowtask"></div><!-- 提交按钮 --><button type="submit" class="btn btn-primary">提交</button></form></div></div></div>{% endblock content %}
8、修改templates/edit.html
<!DOCTYPE html>{% extends "base.html" %} {% load staticfiles %}{% block title %} 用户信息 {% endblock title %}{% block content %}<div class="container"><div class="row"><div class="col-12"><br><div class="col-md-4">用户名: {{ user.username }}</div><br><br><div class="col-md-4">当前昵称: {{ profile.nikename }}</div><br><br><form method="post" action=".">{% csrf_token %}<!-- avatar --><div class="form-group col-md-4"><label for="avatar">新昵称</label><input type="text" class="form-control" name="nikename"></div><!-- 提交按钮 --><button type="submit" class="btn btn-primary">提交</button></form><a href="{% url "daily:list" %}">返回</a></div></div></div>{% endblock content %}
9、修改templates/login.html
<!DOCTYPE html>{% extends "base.html" %} {% load staticfiles %}{% block title %} 登录 {% endblock title %}{% block content %}<div class="container"><div class="col-12"><br><h5>还没有账号？</h5><h5>点击<a href='{% url "userprofile:register" %}'>注册账号</a>加入我们吧！</h5><br><form method="post" action="."></form>{# <!-- 新增 -->#}{# <br>#}{# <h5>忘记密码了？</h5>#}{# <h5>点击<a href='{% url "password_reset_recover" %}'>这里</a>重置密码</h5>#}</div><div class="row"><div class="col-12"><br><form method="post" action=".">{% csrf_token %}<!-- 账号 --><div class="form-group"><label for="username">账号</label><input type="text" class="form-control" id="username" name="username"></div><!-- 密码 --><div class="form-group"><label for="password">密码</label><input type="password" class="form-control" id="password" name="password"></div><!-- 提交按钮 --><button type="submit" class="btn btn-primary">提交</button></form></div></div></div>{% endblock content %}
10、修改templates/register.html
<!DOCTYPE html>{% extends "base.html" %} {% load staticfiles %}{% block title %} 注册 {% endblock title %}{% block content %}<div class="container"><div class="row"><div class="col-12"><br><form method="post" action=".">{% csrf_token %}<!-- 账号 --><div class="form-group col-md-4"><label for="username">昵称</label><input type="text" class="form-control" id="username" name="username" required></div><!-- 邮箱 --><div class="form-group col-md-4"><label for="email">Email</label><input type="text" class="form-control" id="email" name="email"></div><!-- 密码 --><div class="form-group col-md-4"><label for="password">设置密码</label><input type="password" class="form-control" id="password" name="password" required></div><!-- 确认密码 --><div class="form-group col-md-4"><label for="password2">确认密码</label><input type="password" class="form-control" id="password2" name="password2" required></div><!-- 提交按钮 --><button type="submit" class="btn btn-primary">提交</button></form></div></div></div>{% endblock content %}
11、重新打开http://127.0.0.1:8000/daily/list/，是不是整个页面都焕然一新了。
再试试登录、注册、写日报页面，看看和之前有什么区别呢？
