加载静态文件,父模板的继承和扩展
- 用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 %}
- 首页、登录页、注册页都按上述步骤改写。
-
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def base():
return render_template('base.html')
@app.route('/login/')
def login():
return render_template('login.html')
@app.route('/register/')
def register():
return render_template('register.html')
if __name__ == '__main__':
app.run(debug=True)
导航页的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<title>父模板</title>
<title>{% block title%}
{% endblock %} wk</title>
<!--<script src="../static/js/base.js" type="text/javascript"></script>-->
<script src="{{ url_for('static',filename='js/base.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="../static/css/base.css">
{% block head %}
{% endblock %}
</head>
<body id="myBody">
<nav class="body">
<div style="background-color: antiquewhite">
<img id="myOn_Off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="25" height="25">
<a href="{{ url_for('base') }}">首页</a>
<a href="">下载APP</a>
搜索框<input id="search" type="text" name="search" placeholder="请输入搜索内容：">
<button id="play" type="submit">查找</button>
<ul class="nav navbar-nav">
<a class="login" href="{{ url_for('login') }}">登录</a>
<a class="register" href="{{ url_for('register') }}">注册</a>
</div>
<br>
</nav>
<div class="logo">
</div>
<div class="img">
<a href="https://baike.so.com/doc/2156196-2281474.html">
<img src="https://p1.ssl.qhmsg.com/t01545bf9b68092711f.jpg"></a>
<div class="describe"><a href="">迪丽热巴</a></div>
</div>
<div class="img">
<a href="https://baike.so.com/doc/2156196-2281474.html">
<img src="https://p1.ssl.qhmsg.com/t018e004ed8688e16cb.jpg"></a>
<div class="describe"><a href="">迪丽热巴</a></div>
</div>
<div class="img">
<a href="https://baike.so.com/doc/2156196-2281474.html">
<img src="https://p1.ssl.qhmsg.com/t018115ba19a408a65a.jpg"></a>
<div class="describe"><a href="">迪丽热巴</a></div>
</div>
</div>
{% block main %}
{% endblock %}
<footer>
<div class="footer_box">
Copyright@2013-14-520 个人版权，版权所有 telephone:520520 mobile phone:666
</div>
</footer>
</div>
</body>
</html>
登录：
{% extends 'base.html' %}
{% block denglutitle %}登录{% endblock %}
{% block dengluhead %}
<link href="../static/css/denglu.css" rel="stylesheet" type="text/css">
<script src="../static/js/denglu.js"></script>
{% endblock %}
{% block denglubody %}
<div class="box">
<h2>登录</h2>
<form action="{{ url_for('gg') }}" method="post">
<div class="input_box">
username：<input type="text" id="uname" placeholder="请输入用户名" name="username">
</div>
<div class="input_box">
password：<input type="password" id="upass" placeholder="请输入密码" name="password">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="fnLogin()">Enter</button>
</div>
</form>
</div>
{% endblock %}
注册：
{% extends 'base.html' %}
{% block zhucetitle %}注册{% endblock %}
{% block zhucehead %}
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="../static/css/zhuce.css">
<script src="../static/js/zhuce.js"></script>
{% endblock %}
{% block zhucebody %}
<div class="box">
<h2>注册</h2>
<form action="{{ url_for('login') }}" method="post">
<div class="input_box">
<input type="text" id="user" placeholder="请输入用户名" name="username">
</div>
<div class="input_box">
<input type="password" id="upass" placeholder="请输入密码"name="password">
</div>
<div class="input_box">
<input type="password" id="upass1" placeholder="请再次确认密码">
</div>
<div id="error_box"><br>
</div>
<div class="input_box">
<button onclick="fnRegistration()">Enter</button>
</div>
</form>
</div>
{% endblock %}
