开始Flask项目
1,
- 新建Flask项目。
- 设置调试模式。
- 理解Flask项目主程序。
- 使用装饰器,设置路径与函数之间的关系。
- 使用Flask中render_template,用不同的路径,返回首页、登录员、注册页。
- 用视图函数反转得到URL,{{url_for(‘login’)}},完成导航条里的链接。
- py
-
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)
base
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页导航</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <nav> <img src=" https://123p2.sogoucdn.com/imgu/2017/10/20171031223052_33.png"><br> <a href="{{ url_for('index') }}">首页</a> <a href="">下载</a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="{{ url_for('login') }}">登录</a> <a href="{{ url_for('register') }}">注册</a> </nav> </body> </html>
login
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆</title> <link href="base.css" rel="stylesheet" type="text/css"> <script src="base.js"></script> </head> <body> <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> <button onclick=window.alert("此页面询问您是否要离开:您输入的数据可能不会被保存")>取消</button> </div> </div> </body> </html>
register
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link href="base.css" rel="stylesheet" type="text/css"> <script src="base.js"></script> </head> <body> <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 class="input_box"> 确认密码: <input id="checkpass" type="password" placeholder="请确认密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">注册</button> <button onclick=window.alert("此页面询问您是否要离开:您输入的数据可能不会被保存")>取消</button></div> </div> </body> </html>