- 新建Flask项目。
- 设置调试模式。
- 理解Flask项目主程序。
- 使用装饰器，设置路径与函数之间的关系。
- 使用Flask中render_template，用不同的路径，返回首页、登录员、注册页。
- 用视图函数反转得到URL，{{url_for(‘login’)}}，完成导航条里的链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hogwarts</title>
<base target="_blank">
<link rel="stylesheet" type="text/css" href="../static/first.css">
</head>
<body class="body">
<nav>
<h1> 霍格沃兹校园论坛 </h1>
<h2> Hogwarts'BBS </h2>><br>
<a href="{{ url_for('first') }}">首页</a>
<a href="">新闻</a>
<a href="{{ url_for('sign_up') }}">登陆</a>
<a href="{{ url_for('sign_in') }}">注册</a>
<a href="">退出</a>
<input type="text"name="search">
<button type="submit">搜索</button>
</nav>
</body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link href="../static/sign.css" rel="stylesheet" type="text/css">
<script src="../static/sign.js"></script>
</head>
<body>
<div class="box">
<h2>欢迎登陆</h2>
<div class="input_box">
用户名： <input id="uname" type="text" placeholder="请输入用户名" class="b1">
</div>
<div class="input_box">
密码： <input id="upass" type="password" placeholder="请输入密码" class="b1">
</div>
<div id="error_box" class="error_box"><br></div>
<div class="button">
<button class="login" onclick="fnLogin()">登录</button>
<button class="cancel" onclick=window.alert("是否确认离开，您输入的数据可能不会被保存")>取消</button></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link href="../static/sign.css" rel="stylesheet" type="text/css">
<script src="../static/sign.js"></script>
</head>
<body>
<div class="box">
<h2>欢迎注册</h2>
<div class="input_box">
输入用户名： <input id="uname" type="text" placeholder="请输入用户名" class="b1">
</div>
<div class="input_box">
输入密码： <input id="upass" type="password" placeholder="请输入密码" class="b1">
</div>
<div class="input_box">
确认密码： <input id="checkpass" type="password" placeholder="请确认密码" class="b1">
</div>
<div id="error_box" class="error_box"><br></div>
<div class="button">
<button class="login" onclick="fnLogin()">登录</button>
<button class="cancel" onclick=window.alert("是否确认离开，您输入的数据可能不会被保存")>取消</button></div>
</div>
</body>
</html>
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def first():
return render_template('first.html')
@app.route('/sign_up/',methods=['GET','POST'])
def sign_up():
return render_template('sign_up.html')
@app.route('/sign_in/')
def sign_in():
return render_template('sign_in.html')
if __name__ == '__main__':
app.run()
