码迷,mamicode.com
首页 > 其他好文 > 详细

开始Flask项目

时间:2017-11-04 00:13:40      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:导航   config   border   ges   http   idt   title   ack   pad   

  1. 新建Flask项目。
  2. 设置调试模式。
  3. 理解Flask项目主程序。
  4. 使用装饰器,设置路径与函数之间的关系。
  5. 使用Flask中render_template,用不同的路径,返回首页、登录员、注册页。
  6. 用视图函数反转得到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 }

技术分享

技术分享

 

开始Flask项目

标签:导航   config   border   ges   http   idt   title   ack   pad   

原文地址:http://www.cnblogs.com/l-j-l/p/7780521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!