Flask的简介及基本模式

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask的基本模式为在程序里将一个视图函数分配给一个URL，每当用户访问这个URL时，系统就会执行给该URL分配好的视图函数，获取函数的返回值并将其显示到浏览器上。

Flask的特点

一、后续的基于机器学习的车辆检测与属性识别算法研究，主要开发语言也是应用Python，整个系统统一开发语言，便于开发和后期维护。
二、Flask因为灵活、轻便且高效的特点被业界认可，同时拥有基于Werkzeug、Jinja2等一些开源库，拥有内置服务器和单元测试，适配RESTful，支持安全的cookies，而且官方文档完整，便于学习掌握。
三、Flask中拥有灵活的Jinja2模板引擎，提高了前端代码的复用率。这样可以提高开发效率和有利于后期开发与维护。
以上，是Flask越来越受欢迎的原因。

ajax的简介

ajax是指一种创建交互式网页应用的网页开发技术，等同于 异步 JavaScript 和 XML 或者是 HTML，主要用于创建快速动态网页， 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。由于这一点，ajax逐渐成为主流。

ajax的开发模式

综合各种变化的技术和强耦合的客户服务端环境，Ajax 提出了一种新的开发方式。Ajax 开发人员必须理解传统的 MVC 架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑 B/S 环境的外部和使用 Ajax 技术来重定型 MVC 边界。最重要的是，Ajax 开发人员必须禁止以页面集合的方式来考虑 Web 应用而需要将其认为是单个页面。一旦 UI 设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

MVC介绍

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
MVC开始是存在于桌面程序中的，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。

实例介绍

1.做一个网页，可以进行数据的增删改查的为佳
2.用pycharm工具建flask框架
3.按照MVC标准进行ajax前后端分离的代码
4.运行实现

代码分析

因为是MVC模式，所以有个dao包，有个controller包，有个service包，然后因为有些类需要重复使用，所以有个封装类的文件，在entity包里，pycharm中Flask框架生成的app文件，动态前端页面存在templates包中，静态前端页面和css、js、img等在static包中，由于引入了其他人的页面格式，将其也放在了static包中。

代码实现(我的前端页面出了点问题，所以用的别人的，只做参考)

各文件的位置

init文件无实意，static中由于导入了他人的界面格式太多，就不展开了，主要是存放css、js、img、静态页面的，记得后面要引入的所在的具体位置就行。
app.py:(启动文件及配置的所在)

from flask import Flask, render_template,session
import config
from config_class import *
from datetime import timedelta
from controller.usercontroller import usercontrollerapp = Flask(__name__)
app.config['DEBUG'] = True
app.config['SECRET_KEY'] = 'AAAGGGGCCFDDDFFFDDDD'
app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(minutes=30)  #设置session的保存时间。# 是使用config py文件定义配置
app.config.from_object(config)
# 是使用class定义配置
app.config.from_object(DebugConfig)app.register_blueprint(usercontroller)   # 声明@app.route('/')  # URL路由
def index():print(session.get('user'))return render_template('index.html')if __name__ == '__main__':app.run(host=app.config['SERVER_ADDR'], port=app.config['SERVER_PORT'], debug=True)

config.py:(可以在app.py中做配置，就不需要这个文件了)

'''
自定义配置文件
'''
DEBUG = True
SECRET_KEY = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
PAGE_SIZE = 10SERVER_ADDR = '10.0.14.204'
SERVER_PORT = 80

usercontroller.py(创建.do事件，控制模型与页面视图一一对应)

from flask import Blueprint,render_template,request,session,Response
import hashlib
from service.userservice import UserService
from entity.user import User
import jsonusercontroller = Blueprint('usercontroller', __name__)
userService = UserService()@usercontroller.route("/gologin.do", methods=['POST', 'GET'])
def gologin():return render_template('login.html')@usercontroller.route("/login.do", methods=['POST', 'GET'])
def login():userName = request.form.get('username')  # 表单提交的数据使用request.form[]userPwd = request.form.get('userpwd')print("login.do:",userName)result = userService.findUserByUserName(userName)print("login.do:",result)if result and  result[0][2] == userPwd:session['user'] = userNameprint(hashlib.md5('123456'.encode(encoding='utf-8')).hexdigest())# 登录成功，则保存Cookies信息resp = Response(render_template('index.html', messasge='登录成功'))resp.set_cookie('userName', userName, max_age=7*24*3600)resp.set_cookie('userPwd', userPwd, max_age=7*24*3600)return resppasselif not result or  result[0][2] != userPwd:return render_template('login.html', message='用户名或密码错误')passreturn render_template('login.html')pass@usercontroller.route('/logout.do', methods=['POST', 'GET'])
def logout():session.clear()print('==========', session.get('user'))resp = Response(render_template('index.html'))resp.delete_cookie('userName')resp.delete_cookie('userPwd')return resppass@usercontroller.route('/goregist.do')
def goRegist():return render_template('regist.html')pass@usercontroller.route('/regist.do', methods=['POST', 'GET'])
def regist():userName = request.form.get('userName')  # 表单提交的数据使用request.form[]userPwd = request.form.get('userPwd')user = User()user.userName = userNameuser.userPwd = userPwdresult = userService.createUser(user)if result > 0:return render_template('login.html', message='注册成功')passelse:return render_template('regist.html', message='注册失败')passpass# 查询用户，并且显示
@usercontroller.route('/gouserinfo.do', methods=['POST', 'GET'])
def goUserInfo():userName = request.form.get('userName')userSex = request.form.get('userSex')user = User()user.userName = userNameuser.userSex = userSexuserList = userService.findUserList(user)return render_template('systeminfo/userinfo.html', userList = userList, user=user)pass# 删除用户，并且显示
@usercontroller.route('/removeruser.do', methods=['POST', 'GET'])
def goRemoveUser():userId = request.args.get('userId')userName = request.form.get('userName')userSex = request.form.get('userSex')user = User()user.userName = userNameuser.userSex = userSexresult = userService.removeUser(userId)userList = userService.findUserList(user)return render_template('systeminfo/userinfo.html', userList = userList, message='删除成功' if result >0 else '删除失败')pass@usercontroller.route('/gomodifyuser.do', methods=['POST', 'GET'])
def goModifyUser():userId = request.args.get('userId')user = userService.findUserByUserId(userId)return render_template('systeminfo/modifyuser.html', user=user)pass@usercontroller.route('/gomodifysubmit.do', methods=['POST', 'GET'])
def goSubmitModifyUser():userId = request.form.get('userId')userName = request.form.get('userName')userSex = request.form.get('userSex')user = User()user.userName = userNameuser.userSex = userSexuser.userId = userIdresult = userService.updateUser(user)userList = userService.findUserList(user)return render_template('systeminfo/userinfo.html', userList=userList, message='修改成功' if result > 0 else '修改失败')pass@usercontroller.route('/checkusername.do', methods=['POST', 'GET'])
def checkUserName():userData = request.get_data()userDict = json.loads(userData)user = userService.findUserByUserName(userDict.get('userName'))dicts = {}if user:dicts = {'code':1}passelse:dicts = {'code':0}passreturn json.dumps(dicts)pass@usercontroller.route('/goajaxuserinfo.do', methods=['POST', 'GET'])
def goAjaxUserInfo():return render_template("systeminfo/userinfoajax.html")pass@usercontroller.route('/ajaxuserinfo.do', methods=['POST', 'GET'])
def getUserInfo():userData = request.get_data()userDict = json.loads(userData)tData = {}user = User()user.userName = userDict.get('userName')user.userSex = userDict.get('userSex')currentPage = int(userDict.get('currentPage'))pageSize = int(userDict.get('pageSize'))opr = userDict.get('opr')userId = int(userDict.get('userId'))user.userId = userIddelResult = 0if opr == 'del':delResult = userService.removeUser(userId)passelif opr == 'update':tUser = userService.findUserByUserId(userId)tData['userId'] = tUser.userIdtData['userName'] = tUser.userNametData['userSex'] = tUser.userSexreturnData = {'code': 1, 'userData': tData, 'pageSize': pageSize, 'currentPage': currentPage, 'opr':'update'}return json.dumps(returnData)elif opr == 'submitUpdate':userService.updateUser(user)passresult = userService.findPageUserList(user, pageSize, currentPage)counts = userService.countUsers(user)totalPage = 0if(counts%pageSize == 0):totalPage = counts//pageSizeelse:totalPage = counts // pageSize + 1passreturnData = {'code':1, 'userData':result, 'pageSize':pageSize, 'currentPage':currentPage, 'totalPage':totalPage, 'delcode':delResult, 'opr':'search','counts':counts}return json.dumps(returnData)pass

userdao.py(,dao包其他文件可直接使用，主要是与数据库建立连接)

from .basedao import BaseDaoclass UserDao(BaseDao):def findUserByUserName(self, userName):try:sql = "select * from t_user where user_name=%s"self.getConnection()self.execute(sql, (userName,))result = self.fetch()finally:self.close()return resultpassdef createUser(self, user):try:sql = "insert into t_user (user_name, user_pwd) values(%s, %s)"self.getConnection()result = self.execute(sql, (user.userName, user.userPwd))self.commit() # 执行了sql语句之后要commitreturn resultfinally:self.close()passpassdef findUserList(self, user):try:params = []# sql语句和params就需要是动态sql = "select * from t_user where 1=1 " #  where 1=1是为了便于增加andif user.userName:sql += " and user_name like %s "  # 模糊查询params.append('%'+user.userName + '%')passif user.userSex:sql += " and user_sex=%s"params.append(user.userSex)passself.getConnection()self.execute(sql, params)result = self.fetch()finally:self.close()return resultpassdef removeUser(self, userId):try:sql = "delete from t_user where user_id=%s"self.getConnection()result = self.execute(sql, (userId, ))self.commit()  # 执行了sql语句之后要commitreturn resultfinally:self.close()passpassdef findUserByUserId(self, userId):try:sql = "select * from t_user where user_id=%s"self.getConnection()self.execute(sql, (userId,))result = self.fetch()finally:self.close()return resultpassdef updateUser(self, user):try:sql = "update t_user set user_sex=%s where user_id=%s"self.getConnection()result = self.execute(sql, (user.userSex, user.userId))self.commit()  # 执行了sql语句之后要commitreturn resultfinally:self.close()passpassdef findPageUserList(self, user, pageSize, currentPage):try:params = []# sql语句和params就需要是动态sql = "select * from t_user where 1=1 "  # where 1=1是为了便于增加andif user.userName:sql += " and user_name like %s "  # 模糊查询params.append('%' + user.userName + '%')passif user.userSex:sql += " and user_sex=%s"params.append(user.userSex)passstartRow = (currentPage - 1)*pageSizesql += "limit %s, %s"params.append(startRow)params.append(pageSize)self.getConnection()self.execute(sql, params)result = self.fetch()finally:self.close()return resultpassdef countUsers(self, user):params = []# sql语句和params就需要是动态sql = "select count(*) from t_user where 1=1 "  # where 1=1是为了便于增加andif user.userName:sql += " and user_name like %s "  # 模糊查询params.append('%' + user.userName + '%')passif user.userSex:sql += " and user_sex=%s"params.append(user.userSex)passself.getConnection()self.execute(sql, params)result = self.fetchOne()return resultpasspass

user.py(封装数据类)

# 封装数据类 VO：value object  entity 类
class User():def __init__(self):self.__userId = Noneself.__userName = Noneself.__userPwd = Noneself.__userSex = Nonepass@propertydef userId(self):return self.__userIdpass@userId.setterdef userId(self, userId):self.__userId = userIdpass@propertydef userName(self):return self.__userNamepass@userName.setterdef userName(self, userName):self.__userName = userNamepass@propertydef userPwd(self):return self.__userPwdpass@userPwd.setterdef userPwd(self, userPwd):self.__userPwd = userPwdpass@propertydef userSex(self):return self.__userSexpass@userSex.setterdef userSex(self, userSex):self.__userSex = userSexpasspass

userservise.py(无实意，主要与userdao.py一一对应)

from dao.userdao import UserDao
from entity.user import Userclass UserService:def findUserByUserName(self, userName):userDao = UserDao()return userDao.findUserByUserName(userName)passdef createUser(self, user):userDao = UserDao()return userDao.createUser(user)passdef findUserList(self, user):userDao = UserDao()userlist = []result = userDao.findUserList(user)for temp in result:tuser = User()tuser.userId = temp[0]tuser.userName = temp[1]tuser.userSex = temp[4]userlist.append(tuser)passreturn userlistpassdef removeUser(self, userId):userDao = UserDao()return userDao.removeUser(userId)passdef findUserByUserId(self, userId):userDao = UserDao()result = userDao.findUserByUserId(userId)user = Noneif result:user = User()user.userId = result[0][0]user.userName = result[0][1]user.userSex = result[0][4]passreturn userpass# 修改用户信息def updateUser(self, user):userDao = UserDao()return userDao.updateUser(user)passdef findPageUserList(self, user, pageSize, currentPage):userDao = UserDao()return userDao.findPageUserList(user, pageSize, currentPage)passdef countUsers(self, user):userDao = UserDao()return userDao.countUsers(user)[0]passpass

modifyuser.html(修改页面)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>修改用户</title></title><link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}" /><script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script><script type="text/javascript" src="{{ url_for('static',filename='js/formvalidator.js') }}"></script>
</head>
<body><form  name="userForm"><table align="center"><span color="red">{{ message }}</span><input type="hidden" name="userId" value="{{ user.userId }}" /><tr><td>用户名:</td><td><input type="text" name="userName" value="{{ user.userName }}"/><span id="userName"></span></td></tr><tr><td>用户性别:</td><td><input type="text" name="userSex" value="{{ user.userSex }}"/></td></tr><tr><td></td><td><input type="reset" value="重置" /><input type="button" value="修改" onclick="submitModifyUser()"/></td></tr></table></form>
</body>
</html>

userinfo.html(用户信息页面)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户管理</title><script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script><script type="text/javascript" src="{{ url_for('static',filename='js/formvalidator.js') }}"></script>
</head>
<body>
<form action="/gouserinfo.do" method="post">用户名：<input type="text" name="userName" />性别：<input type="text" name="userSex" /><input type="submit" value="查询">
</form><table align="center"><caption>{{ message }}</caption><thead><tr><th><input type="button" value="全选"/><input type="button" value="反选"/></th><th>用户ID</th><th>用户名</th><th>用户性别</th><th>操作</th></tr></thead><tbody>{% for user in  userList %}<tr><td align="center"><input type="checkbox" name="userId" value="{{ user.userId }}" /></td><td>{{ user.userId }}</td><td>{{ user.userName }}</td><td>{{ user.userSex }}</td><td><a href="javascript:submitRemoveUser('{{ user.userId }}')">删除</a>&nbsp;&nbsp;<a href="/gomodifyuser.do?userId={{ user.userId }}">修改</a></td></tr>{% endfor %}</tbody>
</table>
</body>
</html>

userinfoajax.html(ajax版用户信息页面)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户管理</title><link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/dist/css/bootstrap.min.css') }}"/><!-- Font Awesome --><link rel="stylesheet" href="{{ url_for('static',filename='font-awesome/css/font-awesome.min.css') }}"/><!-- Ionicons --><link rel="stylesheet" href="{{ url_for('static',filename='bower_components/Ionicons/css/ionicons.min.css') }}"/><!-- Theme style --><link rel="stylesheet"  href="{{ url_for('static',filename='css/AdminLTE.css') }}" /><link rel="stylesheet"  href="{{ url_for('static',filename='css/style.css') }}" /><script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script><script type="text/javascript" src="{{ url_for('static',filename='js/formvalidator.js') }}"></script><!-- Bootstrap 3.3.7 --><script src="{{ url_for('static', filename='bootstrap/dist/js/bootstrap.min.js') }}"></script><script type="text/javascript" src="{{ url_for('static',filename='js/userdata.js') }}"></script>
</head>
<body>
<div id="searchBox"><form method="post" name="searchForm">用户名：<input type="text" name="userName" />性别：  <input type="text" name="userSex" /><input type="hidden" name="currentPage" value="1"/><input type="hidden" name="pageSize" value="10"/><input type="button" value="查询" onclick="getUserData(1, 10, 'search', 0)"></form><table class="dataTable"><caption>{{ message }}</caption><thead><tr><th align="center"><input type="button" value="全选"/><input type="button" value="反选"/></th><th>用户ID</th><th>用户名</th><th>用户性别</th><th>操作</th></tr></thead><tbody id="dataBody"></tbody></table><div class="modal fade" id="modal-default"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">修改用户信息</h4></div><div class="modal-body"><form method="post" name="userForm">用户名：<input type="text" name="userName" />性别：  <input type="text" name="userSex" /><input type="hidden" name="userId"/><input type="hidden" name="currentPage" value="1"/><input type="hidden" name="pageSize" value="10"/></form></div><div class="modal-footer"><button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" onclick="getUserData(1, 10, 'submitUpdate', 0)">保存</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div>
</div>
</body>
</html>

index.html(主页面)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>职位分析系统主页</title><script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script><script type="text/javascript" src="{{ url_for('static',filename='js/formvalidator.js') }}"></script><script type="text/javascript"></script><style type="text/css">a{margin-right: 12px;}</style></head><body style="min-width:1200px;padding: 0px;margin: 0;background-color: lavenderblush;"><div id="header" style="width: 100%;margin: 0px;padding: 0px;height: 40px;border: solid 0px red;background-color: white; "><div style="width: 90%;border: solid 0px red;margin-left: 5%;padding: 6px;" align="left"><div  style="border: solid 0px red;padding: 0px;float: left"></div><div  style="border: solid 0px red;padding: 0px;float: right">{% if session.get('user') == None  %}<a href="/gologin.do">登录  </a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="/goregist.do">注册  </a>{% elif session.get('user') != None %}{{ session.get('user') }}<a href="/logout.do">注销</a>{% endif %}</div></div></div><div id='main' style="width: 90%;border: solid 0px red;margin-left: 5%;" align="center"><div id='left' style="min-height:800px;background-color: white;width: 14%;float:left;border: solid 0px red;margin: 4px;"><ul><li><a href="/goajaxuserinfo.do">用户信息管理</a></li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li><li>人工智能</li></ul></div><div id='middle' style="min-height:800px;background-color: white;width: 60%;float:left;border: solid 0px red;margin: 4px;"><div style="width: 100%;">a<!--<iframe border="0" scrolling="no" width="100%" height="800px" name="innerFrame" src="html_form.html"></iframe>--></div></div><div id='right' style="min-height:800px;background-color: white;width: 24%;float:right;border: solid 0px red;margin: 4px;"><div style="width: 100%;">aaaa</div></div></div><div style="background-color: #FF0000;position: fixed;left: 8px;top:200px;height: 400px;">左广告</div><div style="background-color: #FF0000;position: fixed;right: 8px;top:200px;height: 400px;">右广告</div></body>
</html>

login.html(登陆界面)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>登录</title><!-- Tell the browser to be responsive to screen width --><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><!-- Bootstrap 3.3.7 --><link rel="stylesheet" href="static/bootstrap/dist/css/bootstrap.min.css"><!-- Font Awesome --><link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"><!-- Ionicons --><link rel="stylesheet" href="static/bower_components/Ionicons/css/ionicons.min.css"><!-- Theme style --><link rel="stylesheet" href="static/css/AdminLTE.css"><!-- jQuery 3 -->
<script src="static/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="static/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/formvalidator.js') }}"></script></head>
<body class="hold-transition login-page">
<div class="login-box"><div class="login-logo"><a href="#">职位数据分析平台</a></div><!-- /.login-logo --><div class="login-box-body"><p class="login-box-msg">亲，请登录:{{ message }}</p><form action="/login.do" method="post"><div class="form-group has-feedback"><input type="text" class="form-control" name="username" placeholder="用户名"><span class="glyphicon glyphicon-envelope form-control-feedback"></span></div><div class="form-group has-feedback"><input type="password" class="form-control" name="userpwd" placeholder="密码"><span class="glyphicon glyphicon-lock form-control-feedback"></span></div><div class="row"><div class="col-xs-8"><div class="checkbox icheck"><label><input type="checkbox"> 记住密码</label></div></div><!-- /.col --><div class="col-xs-4"><button type="submit" class="btn btn-primary btn-block btn-flat" onblur="checkLoginForm()">登录</button></div><!-- /.col --></div></form><div class="social-auth-links text-center"><p></p><a href="#" class="btn btn-block btn-social btn-primary btn-flat"><i class="fa  fa-qq"></i> 使用QQ登录</a><a href="#" class="btn btn-block btn-social btn-success btn-flat"><i class="fa  fa-weixin"></i> 使用微信登录</a></div><!-- /.social-auth-links --><a href="#">忘记密码</a><br><a href="/goregist.do" class="text-center">注册新用户</a></div><!-- /.login-box-body -->
</div>
<!-- /.login-box --></body>
</html>

regist.html(注册界面)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册用户</title><link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}" /><script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script><script type="text/javascript" src="{{ url_for('static',filename='js/formvalidator.js') }}"></script>
</head>
<body><form action="/regist.do" name="regForm" method="post" onsubmit="return checkRegistForm()"><input type="hidden" name="result"  value="false"/><table align="center"><span color="red">{{ message }}</span><tr><td>用户名:</td><td><input type="text" name="userName" value=""  onblur="checkUserName()" /><span id="userName"></span></td></tr><tr><td>密码:</td><td><input type="password" name="userPwd" value=""/></td></tr><tr><td>重复密码:</td><td><input type="password" name="reUserPwd" value=""/><span id="reUserPwd"></span></td></tr><tr><td></td><td><input type="reset" value="重置" /><input type="submit" value="注册" /></td></tr></table></form>
</body>
</html>

总结

以上是Flask框架之ajax实现增删改查的实例，主要是前端界面以及ajax异步比较难。