- 新建Flask项目。
- 设置调试模式。
- 理解Flask项目主程序。
- 使用装饰器，设置路径与函数之间的关系。
- 使用Flask中render_template，用不同的路径，返回首页、登录员、注册页。
- 用视图函数反转得到URL，{{url_for(‘login’)}}，完成导航条里的链接。
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/zhuce/')
def zhuce():
return render_template('zhuce.html')
@app.route('/denglu/')
def denglu():
return render_template('denglu.html')
if __name__ == '__main__':
app.run(debug=True)
index：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <h1>首页</h1> <a href="http://127.0.0.1:5000/denglu">登录</a> <a href="http://127.0.0.1:5000/zhuce">注册</a> </body> </html>
登录：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <link href="../static/css/vvv.css" rel="stylesheet" type="text/css"> <script src="../static/js/ggg.js"></script> </head> <body> <div class="div1"> <div class="div2">登录</div> <div class="div3"> <div class="iconfont ic-user"></div> 用户：<input id="username" type="text" placeholder="请输入用户名"> </div> <div class="div3"> 密码：<input id="userpass" type="text" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="div3"> <button onclick="myLogin()">登陆</button> </div> </div> <br> </body> </html>
注册：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>界面</title> <link href="../static/css/yyy.css" rel="stylesheet" type="text/css"> <script src="../static/js/rrr.js"></script> </head> <div class="div1"> <div class="div2">注册</div> <div class="div3"> 请输入你的昵称：<input id="username" type="text" placeholder="请输入你的昵称"> </div> <div class="div3"> 设置密码：<input id="userpass" type="text" placeholder="请输入密码"> </div> <div class="div3"> 重复密码：<input id="userpass1" type="text" placeholder="请再次输入密码"> </div> <div class="div3"> 请输入手机号：<input id="phonenumber" type="text" placeholder="请输入11位手机号"> </div> <div id="error_box"><br></div> <div class="div3"> <button onclick="myLogin()">注册</button> </div> <div class="div2">点击 “注册” 即表示您同意并愿意遵守<br>用户协议 和 隐私政策 。</div> </div> <br> </body> </html>
