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上查看。

时间: 2024-10-15 19:44:25

bootstrap+flask+mysql实现网站查询程序代码的相关文章

PHP生成MySQL数据表结构程序代码

程序代码如下  代码如下 复制代码 <?php /**  * 生成mysql数据字典  */ // 配置数据库 $database = array(); $database['DB_HOST'] = '127.0.0.1'; $database['DB_NAME'] = 'test'; $database['DB_USER'] = 'testuser'; $database['DB_PWD'] = '123456'; $mysql_conn = @mysql_connect("{$data

php+mysql+session登录实例程序代码

实例  代码如下 复制代码 <?php // 为php和mysql剔除不安全html代码. function safestrip($string){    $string = strip_tags($string);    $string = mysql_real_escape_string($string);    return $string; }   //登录信息显示函数 function messages() {  $message = '';  if($_SESSION['succes

PHP手机号归属地查询程序代码

先来看一个调用第三方法网站的一个程序 主要使用curl实现,需要开启php对curl的支持. 如果你是windows系统在你的的php.ini文件的设置,找到php_curl.dll,并取消前面的分号注释就行了,如下所示: //取消下在的注释 extension=php_curl.dll 如果您是在Linux下面,那么,您需要重新编译您的PHP了,编辑时,您需要打开编译参数,在configure命令上加上"–with-curl"参数. 然后重启apache  代码如下 复制代码 <

PHP网站备份程序代码分享

效果图:PHP代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网站程序备份</title> </head> <body> <form name="myform" method="post&q

asp alexa查询程序代码

<% '****************************** '****************************** Dim domain,Url,Url1,strPage,StrPage1 Dim xmldom,SD,SITE,dimg domain = request.QueryString("url") if domain = "" then domain = "111cn.net" If Not iswww(doma

关于PHP网站计数器程序代码

一般的计数器程序用的执行外部程序函数 exec(),但很多主机空间(包括收费的)拒绝这个危险操作. 我们只好用fread(),fwrite()等文件读写函数,关键在于采用哪种方式fopen()打开文件.试了N次后,证明以下程序是可行,在收费空间上获得验证. count目录 |---count.PHP |---counter.txt |---0~9的数字GIF图片(0.gif,...,9.gif) 以下为引用的内容: 1<? 2/* 本文件为count\conut.php */ 3 4$count

php goolge pr查询程序代码

//下面的函数用于查pr function zeroFill($a, $b) {  $z = hexdec(80000000);  if ($z & $a)  {   $a = ($a>>1);   $a &= (~$z);   $a |= 0x40000000;   $a = ($a>>($b-1));  }  else  {   $a = ($a>>$b);  }  return $a; } function mix($a,$b,$c) {  $a

asp google pr查询程序代码

<% response.expires = -1 response.addheader "cache-control","no-cache" Response.AddHeader "Pragma","no-cache" wd=Request("d") If Request("s")="googles" Then   GoogleUrl="http://

php txt文件记数器 程序代码

今天没事来用php+txt现实现一个网站计数器程序,代码我们主要用file_get_content 与fopen,fwrite读写就OK了. <?php  Class Sit_count{    public $FileName = 'count.txt';    function Count_add(){    if(file_exists($this->FileName) ){     $Temp = file_get_contents($this->FileName);     $