bootstrap+flask+mysql實現網站查詢程式碼

一、需求

通過 bootstrap(ajax) + flask + mysql 實現一個簡單的web查詢頁面。當輸出身份ID資訊後，可以查詢到相應的結果。最終效果圖如下：

flask_mysql_query

二、建立庫與表

這裡我們先根據需要求建立一個資料庫，內容如下：

#建庫
CREATE DATABASE `web12306`  DEFAULT CHARACTER SET utf8;
#建表
web12306 | CREATE TABLE `web12306` (
  `user_email` varchar(100) NOT NULL DEFAULT '',
  `user_pass` varchar(100) NOT NULL DEFAULT '',
  `user_name` varchar(100) NOT NULL DEFAULT '',
  `user_id` varchar(100) NOT NULL DEFAULT '',
  `user_nic` varchar(100) NOT NULL DEFAULT '',
  `user_phone` varchar(100) NOT NULL DEFAULT ''
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
為了便於測試，先插入一條測試資料。

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

三、flask應用代碼

由於是通過sqlalchemy模組串連的資料庫，這裡需要先裝上python模組SQLAlchemy、Flask-SQLAlchemy ，如果主機可以連外網可以通過pip 或easy_install 直接安裝。

# -*- coding: utf-8 -*-
from flask import Flask, request, render_template, jsonify, json
from flask.ext.sqlalchemy import SQLAlchemy
app = Flask(__name__)
db = SQLAlchemy(app)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:password@localhost/web12306'
class session(db.Model):
  __tablename__ = 'web12306'
  user_id = db.Column(db.String(100), primary_key = True)
  user_email = db.Column(db.String(100))
  user_pass = db.Column(db.String(100))
  user_nic = db.Column(db.String(100))
  user_phone = db.Column(db.String(100))
  user_name = db.Column(db.String(100))
@app.route('/scan/<user_id>', methods=['GET'])
def scan(user_id):
     result = session.query.filter_by(user_id=user_id).first()
     if result is None:
            json_result={'user_id':None}
            return json.dumps(json_result,ensure_ascii=False)
     else:
            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}
            return json.dumps(json_result,ensure_ascii=False)
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
  app.run(host='0.0.0.0', port = 8080, debug=True)

代碼的最上面的class部分定義了一個查詢session類，/scan/<user_id> 部分定義了一個類API 請求的get類，通過http://url /scan/使用者ID 請求，會返回一個json格式的結果。最後的index 路由通過模板檔案會調用上面定義好的API，並將結果返回。

四、模板

模板檔案很簡單，通過html 建立一個查詢的 button ，通過jquery ajax 的get請求裡的load方法接收api 的資料。這部分主機參考：

flask 文檔 ajax部分

Giant Flying Saucer部落格

後者也是從flask文檔中的樣本化過來的，我這裡將giant flying部落格的模板也簡單修改了下，內容如下：

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

美化後的代碼可以到我的github上查看。