[bootstrap flask mysql]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/", 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/ 部分定义了一个类API 请求的get类，通过http://url /scan/用户ID 请求，会返回一个json格式的结果。最后的index 路由通过模板文件会调用上面定义好的API，并将结果返回。

四、模板

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

flask 文档 ajax部分

Giant Flying Saucer博客

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

<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>
Enter a value to echo back:

Submit via AJAX



{% endblock %}

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

[bootstrap flask mysql]bootstrap+flask+mysql实现网站查询程序代码

http://m.bbyears.com/shujuku/78370.html

推荐访问: