- 用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 %}
- 首页、登录页、注册页都按上述步骤改写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}
mis</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/test1.css') }}">
{% block head %}
{% endblock %}
</head>
<body>
<div class="header">
<a href="{{ url_for('test') }}" class="dz">首页</a>
<a href="{{ url_for('deng') }}" class="dz">登录</a>
<a href="{{ url_for('zhuce') }}" class="dz">注册</a>
<input type="text" name="q" id="q" value="" autocomplete="off"
placeholder="搜索" class="search-input"><br>
</div>
<div id="footer">
版权 © runoob.com
</div>
{% block body %}
{% endblock %}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
{% extends 'test1.html' %}
<meta charset="UTF-8">
<title>{% block title %}
登录界面
{% endblock %}
</title>
{% block head %}
<link rel="stylesheet" type="text/css" href="../static/css/deng.css">
<script src="../static/jsp/deng.js"></script>
{% endblock %}
</head>
<body>
{% block body %}
<div class="box">
<h1>登录</h1>
<div class="input_box">
<input id="name" type="text" placeholder="请输入用户名">
</div>
<div class="input_box">
<input id="pass" type="password" placeholder="请输入密码">
</div>
<div id="error_box"><br>
</div>
<div class="input_box">
<button onclick="fnLogin()">登录</button>
</div>
</div>
{% endblock %}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
{% extends 'test1.html' %}
<meta charset="UTF-8">
<title>{% block title %}
注册
{% endblock %}</title>
{% block head %}
<link rel="stylesheet" type="text/css" href="../static/css/zhuce.css">
<script src="../static/jsp/zhuce.js"></script>
{% endblock %}
</head>
<body>
{% block body %}
<div class="box">
<h1>注册</h1>
<div class="input_box">
<input id="name" type="text" placeholder="请输入用户名">
</div>
<div class="input_box">
<input id="phone" type="text" placeholder="手机号">
</div>
<div class="input_box">
<input id="pass" type="password" placeholder="请输入密码">
</div>
<div class="input_box">
<input id="passcom" type="password" placeholder="请再次输入密码">
</div>
<div id="error_box"><br>
</div>
<div class="input_box">
<button onclick="fnLogin()">注册</button>
</div>
</div>
{% endblock %}
</body>
</html>
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def test():
return render_template('test1.html')
@app.route('/zhuce')
def zhuce():
return render_template('zhuce.html')
@app.route('/deng')
def deng():
return render_template('deng.html')
if __name__ == '__main__':
app.run(debug=True)
浙公网安备 33010602011771号