- 新建Flask项目。
- 设置调试模式。
- 理解Flask项目主程序。
- 使用装饰器，设置路径与函数之间的关系。
- 使用Flask中render_template，用不同的路径，返回首页、登录员、注册页。
- 用视图函数反转得到URL，url_for(‘login’)，完成导航里的链接。
#encoding:utf8
from flask import * #从flask这个框架中导入Flask这个类
import config
app = Flask(__name__) #初始化一个Flask对象,需要传递一个参数__name__
app.config.from_object(config)
@app.route(‘/’) #是一个装饰器,在函数上面, 其作用是做一个URL与视图函数的映射,127.0.0.1:5000/ 去执行hello_world()函数
def hello_world():
return ‘Hello world!’
if __name__ == '__main__’: #当前这个文件作为主程序运行,就会执行这段,作为模块就不会
app.run() #启动一个web服务器，来监听并接受用户的请求。
untitled.py
1 from flask import Flask,render_template 2 3 app = Flask(__name__) 4 5 @app.route('/') 6 def base(): 7 return render_template('base.html') 8 9 @app.route('/login/') 10 def login(): 11 return render_template('login.html') 12 13 @app.route('/regist/') 14 def regist(): 15 return render_template('regist.html') 16 17 18 19 if __name__ == '__main__': 20 app.run(debug=True)
base.html
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>首页title> 5 <link type="text/css" rel="stylesheet" href="{ {url_for('static',filename='css/login.css')}}"> 6 head> 7 <body> 8 <img id="myOnOff" onclick="mySwitch()" 9 src="https://tva4.sinaimg.cn/crop.0.0.1242.1242.180/bde8475djw8f1hu7mrcy2j20yi0yiabl.jpg" width="30px"> 10 <a href="{ { url_for('base') }}">首页a> 11 <a href="{ { url_for('regist') }}">注册a> 12 <a href="{ { url_for('login') }}">登录a> 13 14 <img src="{ { url_for('static',filename='img/615a00260bb4117f98e0d128532ff959.jpg')}}" width="50px"> 15 16 body> 17 html>
login.css
1 *{ 2 margin: 3px; 3 padding: 3px; 4 font-family:"新宋体"; 5 font-size: 16px; 6 } 7 8 .box { 9 border: 1px solid #cccccc; 10 position: absolute; 11 top: 42%; 12 left: 50%; 13 height: 320px; 14 width: 390px; 15 background: #FFF; 16 margin-left: -195px; 17 margin-top: -160px; 18 } 19 20 h2 { 21 font-size: 16px; 22 text-align: center; 23 height: 46px; 24 font-weight:normal; 25 color:#666; 26 line-height: 46px; 27 backgroud:#f7f7f7; 28 overflow: hidden; 29 border-bottom:solid 1px #ddd; 30 } 31 .input_box { 32 width: 350px; 33 padding-bottom: 15px; 34 margin:0 auto; 35 overflow:hidden; 36 text-align: center; 37 } 38 39 input { 40 align-self: center; 41 height: 30px; 42 width: 280px; 43 44 } 45 46 button { 47 align-content: center; 48 font-family: 新宋体; 49 font-size: 28px; 50 text-align: center; 51 background: #cccccc; 52 height: 40px; 53 width: 300px; 54 }
