Bootstrap+flask+mysql Implement website Query program code

I. Demand

Implement a simple Web query page with bootstrap (Ajax) + flask + MySQL. When the ID information is output, you can query for the corresponding result. The final effect figure is as follows:

Flask_mysql_query

Second, create the Library and table

Here we first need to create a database, which reads as follows:

#建库
CREATE DATABASE ' web12306 ' DEFAULT CHARACTER SET UTF8;
#建表
web12306 | CREATE TABLE ' web12306 ' (
' user_email ' varchar not NULL DEFAULT ',
' User_pass ' varchar not NULL DEFAULT ',
' user_name ' varchar not NULL DEFAULT ',
' user_id ' varchar not NULL DEFAULT ',
' user_nic ' varchar not NULL DEFAULT ',
' User_phone ' varchar not NULL DEFAULT '
) Engine=innodb DEFAULT Charset=utf8;
To facilitate testing, insert a test data first.

mysql> INSERT into web12306 values (' test@361way.com ', ' Test ', ' op-d ' Road, ' 410221 ', ' www.361way.com ', ' 13800000000 ');

Three, flask application code

Because the database is connected through the SQLAlchemy module, you need to install the Python module SQLAlchemy, Flask-sqlalchemy, if the host can connect the extranet can be directly installed through the PIP or 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 (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).
If 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)

The topmost class section of the code defines a query session class,/scan/<user_id> section that defines a get class for a class API request that returns a JSON-formatted result by http://url/scan/a user ID request. The final index route through the template file invokes the defined API above and returns the result.

Four, template

The template file is simple, creating a button for the query through HTML to receive API data through the Load method in the jquery Ajax GET request. This part of the host reference:

Flask Documentation Ajax Section

Giant Flying Saucer Blog

The latter is also from the Flask document in the sample, I will giant Flying blog template is also simple to modify the following, the contents are as follows:

<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= "ten" id= "Echotext" name= "Echotext" >
<button type= "button" id= "submitbtn" name= "Submitbtn" >submit via ajax</button><br><br>
<strong><div id= "Echoresult" ></div></strong>
{% Endblock%}

The beautified code can be viewed on my github.