- 新建Flask项目。
- 设置调试模式。
- 理解Flask项目主程序。
- 使用装饰器，设置路径与函数之间的关系。
- 使用Flask中render_template，用不同的路径，返回首页、登录员、注册页。
- 用视图函数反转得到URL，url_for(‘login’)，完成导航里的链接。
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def deng():
return render_template('deng.html')
@app.route('/zhuce')
def zhuce():
return render_template('zhuce.html')
@app.route('/test')
def test():
return render_template('test1.html')
if __name__ == '__main__':
app.run(debug=True)
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片导航</title>
<link rel="stylesheet" type="text/css" href="../static/css/test1.css">
</head>
<body>
<div class="header">
<a href="/">
<span class="dz">首页</span>
<a href="http://127.0.0.1:5000/test"/>
</a>
<a href="{{ url_for('/')}}" class="dz">登录</a>
<a href="{{ url_for('/zhuce')}}" class="dz">注册</a>
<a href="http://127.0.0.1:5000/" class="dz">登录</a>
<a href="http://127.0.0.1:5000/zhuce" class="dz">注册</a>
<input type="text" name="q" id="q" value="" autocomplete="off"
placeholder="搜索" class="search-input"><br>
</div>
<div class="daohang">
<h2>用户导航</h2>
<hr>
<div class="img">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/">
<img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
<div class="desc">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/">学校荣誉</a>
</div>
</div>
<div class="img">
<a href="http://www.gzcc.cn/html/banxuechengguo/">
<img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
<div class="desc">
<a href="http://www.gzcc.cn/html/banxuechengguo/">师生获奖</a>
</div>
</div>
<div class="img">
<a href="http://www.gzcc.cn/html/xygk/ldgh/">
<img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
<div class="desc">
<a href="http://www.gzcc.cn/html/xygk/ldgh/">领导关怀</a>
</div>
</div>
<div class="img">
<a href="http://i.gzcc.cn" target="_blank">
<img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
<div class="desc">
<a href="http://i.gzcc.cn" target="_blank">数字广商</a>
</div>
</div>
<div class="img">
<a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
<img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
<div class="desc">
<a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">画说校园</a>
</div>
</div>
<div class="img">
<a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
<img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
<div class="desc">
<a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频广商</a>
</div>
</div>
<div class="img">
<a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
<img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
<div class="desc">
<a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a>
</div>
</div>
<div class="img">
<a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
<img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
<div class="desc">
<a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a>
</div>
</div>
</div>
<div id="footer">
版权 © baidu.com
</div>
</div>
</body>
</html>
