加载静态文件,父模板的继承和扩展
- 用url_for加载静态文件
- <script src="{{ url_for('static',filename='js/login.js') }}"></script>
- flask 从static文件夹开始寻找
- 可用于加载css, js, image文件
- 继承和扩展
- 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
- 子模板继承父模板
- {% extends 'base.html’ %}
- 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
- <title>{% block title %}{% endblock %}-MIS问答平台</title>
- {% block head %}{% endblock %}
- {% block main %}{% endblock %}
- 子模板中写代码实现自己的需求。block
- {% block title %}登录{% endblock %}
- 首页、登录页、注册页都按上述步骤改写。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %} {% endblock %}首页</title> <link type="text/css" rel="stylesheet"href="{{ url_for('static',filename='css/index.css') }}"> {% block head %} {% endblock %} </head> <body> <img src="../static/images/2345_image_file_copy_1.jpg" alt="wo"width="30"> <a href="{{ url_for('index') }}">首页</a> <a href="http://127.0.0.1:5000/login">login</a> <a href="{{ url_for('register') }}">regist</a> {% block main %}{% endblock %} </body> </html>
login.html
{% extends'index.html' %}
{% block title %}登录页-{% endblock %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}">
<script src ="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
{% block main %}
<div class="box">
<h2>登录</h2>
<div class="input_box">
登 录：<input id="uname" type="text" placeholder="请输入用户名">
</div>
<div class="input_box">
密 码：<input id="upass" type="password" placeholder="请输入密码">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="fnLogin()">登录</button>
</div>
</div>
{% endblock %}
regist.html
{% extends'index.html' %}
{% block title %}注册页-{% endblock %}
{% block head %}
<link href="{{ url_for('static',filename='css/register.css') }}" rel="stylesheet" type="text/css">
<script src="{{ url_for('static',filename='js/register.js') }}"></script>
{% endblock %}
{% block main %}
<div class="flex-container">
<div class="box">
<h2>注册</h2>
<div class="input_box">
请输入账号 <input id="uname" type="text" placeholder="请输入账号"> </div><br>
<div class="input_box">
请输入密码 <input id="upass" type="password" placeholder="请输入密码"></div><br>
<div class="input_box">
再输入密码 <input id="upass1" type="password" placeholder="再输入密码"></div><br>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="fnLogin()" >注册</button></div>
</div>
</div>
{% endblock %}
