1.蓝图
2.Nav的使用
3.mysql使用
4.模板的使用
蓝图使用
新建user文件夹,在user文件夹下变新建tamplates，还有init.py和views.py
init.py1
2
3
4
5from flask import Blueprint
//声明蓝图
user = Blueprint('user', __name__,template_folder='templates')
from api.v1.user import views
然后在run.py中注册蓝图1
2
3
4先导入
from api.v1.user import user
app.register_blueprint(user,url_prefix='/user') 后边的是路径
然后在user的views中就可以写方法了。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23from flask import Flask, request, jsonify,render_template
from flask.json import tojson_filter
from api.v1.user import user
from api.v1 import first
import pymysql
import sys
import json
from flask_bootstrap import Bootstrap
//路由
@user.route('/',methods=['GET','POST'])
//方法
def my_index():
args = request.args;
age = ''
name = ''
if args.__contains__('name'):
name = request.args.getlist(key='name')
if args.__contains__('age'):
age = request.args.__getitem__('age')
//返回数据是json
return jsonify({'method':sys._getframe().f_code.co_name,
'name':str(name),
'age':age})
现在我们想返回一个html，那么就在tamplates中新建一个index.html
代码如下:1
2
3
4
5
6
7
8
9
10<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结果</title>
</head>
<body>
<h1>helloword</h1>
</body>
</html>
然后在views中增加路由1
2
3@user.route('/helloword')
def helloword():
return render_template('helloword.html')
运行程序,输入地址127.0.0.1：5000/helloword，出现helloword，就算我们的程序跑起来了。
Nav的使用
nav就是html的头部或者banner，我们写一个简单的例子1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<ul class="nav nav-tabs">
<li role="presentation" class="dropdown" id="myDropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true"
aria-expanded="false">
主页 <span class="caret" id="page1"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="page1">
<li role="presentation">
<a role="menuitem" href="add">添加</a></li>
<li role="presentation">
<a role="menuitem" href="list">列表</a></li>
</li>
</ul>
</li>
<li class="dropdown" >
<a class="dropdown-toggle" id="group2" data-toggle="dropdown" href="#" role="button">
文章 <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="group2">
<li role="presentation">
<a role="menuitem" href="add">添加</a>
</li>
<li role="presentation">
<a role="menuitem" href="list">列表</a>
</li>
<li role="presentation">
<a role="menuitem" href="list">列表</a>
</li>
</ul>
</li>
<li class="active" role="presentation">
<a class="dropdown-toggle" data-toggle="" href="#" role="button" aria-haspopup="true" aria-expanded="false">
关于
</a>
</li>
</ul>
这里边有一个ul 套着一个li，一个li套着一个ul，第二个 ul就是二级菜单。
mysql使用
本地需要装环境mysql，用户是root，密码是123456，数据库是test，格式是utf8。下边是我们一个函数返回查询到的表中所有user的名字和年龄。1
2
3
4
5
6
7
8
9
10
11
12
13
14def userList():
con = pymysql.connect('127.0.0.1', 'root', '123456', 'test', charset='utf8') # 添加utf8 否则中文乱码
cur = con.cursor()
cur.execute('select * from user')
nums = cur.rownumber
all = cur.fetchall()
data = []
for i in range(len(all)):
one = all[i]
data.append({'name': str(one[1]),
'age': one[2]})
con.close()
return data
模板的使用
模板是需要我们在模板中先定义一个空的block，然后在继承这个html，把这个block给添加上，等于把一个html文件分拆成多个文件，也可以理解成组件化。添加一个base.html
代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<ul class="nav nav-tabs">
<li role="presentation" class="dropdown" id="myDropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true"
aria-expanded="false">
主页 <span class="caret" id="page1"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="page1">
<li role="presentation">
<a role="menuitem" href="add">添加</a></li>
<li role="presentation">
<a role="menuitem" href="list">列表</a></li>
</li>
</ul>
</li>
<li class="dropdown" >
<a class="dropdown-toggle" id="group2" data-toggle="dropdown" href="#" role="button">
文章 <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="group2">
<li role="presentation">
<a role="menuitem" href="add">添加</a>
</li>
<li role="presentation">
<a role="menuitem" href="list">列表</a>
</li>
<li role="presentation">
<a role="menuitem" href="list">列表</a>
</li>
</ul>
</li>
<li class="active" role="presentation">
<a class="dropdown-toggle" data-toggle="" href="#" role="button" aria-haspopup="true" aria-expanded="false">
关于
</a>
</li>
</ul>
这下边就是定义的缺少的block
{% block page_content %}
{% endblock %}
然后我们在子网页中继承这个模板并且添加上去block1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29//继承刚才的网页
{% extends 'base.html' %}
//下边的block的对应刚才定义的代码块，对应不上的话，会展现不出来下边的代码
{% block page_content %}
<div class="pager">
<h1 align="center">用户列表</h1>
<table class="table nav-tabs">
{% for i in data %}
<tr>
<td>名字：{{ i.name }}</td>
<td>年龄：{{ i.age }}</td>
</tr>
{% endfor %}
<tr>
<td align="center">
<a href="add">
<input type="button" value="添加用户" align="center" style="width: 200px">
</a>
</td>
<td align="center">
<a href="list" >
<input type="button" value="用户列表" style="width: 200px">
</a>
</td>
</tr>
</table>
</div>
{% endblock %}