一、需求

通过 bootstrap(ajax) + flask + mysql 实现一个简单的web查询页面。当输出身份ID信息后，可以查询到相应的结果。最终效果图如下：

flask_mysql_query

二、创建库与表

这里我们先根据需要求创建一个数据库，内容如下：

 1#建库
 2CREATE DATABASE `web12306`  DEFAULT CHARACTER SET utf8;
 3#建表
 4web12306 | CREATE TABLE `web12306` (
 5  `user_email` varchar(100) NOT NULL DEFAULT '',
 6  `user_pass` varchar(100) NOT NULL DEFAULT '',
 7  `user_name` varchar(100) NOT NULL DEFAULT '',
 8  `user_id` varchar(100) NOT NULL DEFAULT '',
 9  `user_nic` varchar(100) NOT NULL DEFAULT '',
10  `user_phone` varchar(100) NOT NULL DEFAULT ''
11) ENGINE=InnoDB DEFAULT CHARSET=utf8;

为了便于测试，先插入一条测试数据。

1mysql> insert into web12306 values ('test@361way.com','test','运维之路','410221','www.361way.com','13800000000');

三、flask应用代码

由于是通过sqlalchemy模块连接的数据库，这里需要先装上python模块SQLAlchemy、Flask-SQLAlchemy ，如果主机可以连外网可以通过pip 或easy_install 直接安装。

 1# -*- coding: utf-8 -*-
 2from flask import Flask, request, render_template, jsonify, json
 3from flask.ext.sqlalchemy import SQLAlchemy
 4app = Flask(__name__)
 5db = SQLAlchemy(app)
 6app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:password@localhost/web12306'
 7class session(db.Model):
 8  __tablename__ = 'web12306'
 9  user_id = db.Column(db.String(100), primary_key = True)
10  user_email = db.Column(db.String(100))
11  user_pass = db.Column(db.String(100))
12  user_nic = db.Column(db.String(100))
13  user_phone = db.Column(db.String(100))
14  user_name = db.Column(db.String(100))
15@app.route('/scan/<user_id>', methods=['GET'])
16def scan(user_id):
17     result = session.query.filter_by(user_id=user_id).first()
18     if result is None:
19            json_result={'user_id':None}
20            return json.dumps(json_result,ensure_ascii=False)
21     else:
22            json_result = {'user_id': result.user_id, 'user_email': result.user_email, 'user_pass': result.user_pass, 'user_nic': result.user_nic, 'user_phone': result.user_phone, 'user_name': result.user_name}
23            return json.dumps(json_result,ensure_ascii=False)
24@app.route('/')
25def index():
26    return render_template('index.html')
27if __name__ == '__main__':
28  app.run(host='0.0.0.0', port = 8080, debug=True)

代码的最上面的class部分定义了一个查询session类，/scan/ 部分定义了一个类API 请求的get类，通过http://url /scan/用户ID 请求，会返回一个json格式的结果。最后的index 路由通过模板文件会调用上面定义好的API，并将结果返回。

四、模板

模板文件很简单，通过html 创建一个查询的 button ，通过jquery ajax 的get请求里的load方法接收api 的数据。这部分主机参考：

flask 文档 ajax部分

Giant Flying Saucer博客

后者也是从flask文档中的示例化过来的，我这里将giant flying博客的模板也简单修改了下，内容如下：

 1<title>Flask AJAX Demo</title>
 2<meta http-equiv="content-type" content="text/html; charset=utf-8">
 3<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
 4<script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
 5{% block content %}
 6<script type="text/javascript">
 7  $(function() {
 8    $("#submitBtn").click(function() {
 9    $('#echoResult').load("/scan/" + $('input[name="echoText"]').val());
10    });
11  });
12</script>
13<strong>Enter a value to echo back:</strong>
14<input type="text" size="10" id="echoText" name="echoText">
15<button type="button" id="submitBtn" name="submitBtn">Submit via AJAX</button><br><br>
16<strong><div id="echoResult"></div></strong>
17{% endblock %}

美化后的代码可以到我的github上查看。

mysql 查询SQLalchemy模块的用法，可以查看该模块的帮忙文档。