前端是一个非常蛋疼的工作,不仅需要了解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