1.需求分析

  需求:应用easyui制作前端表格数据显示,flask制作后端路由

  环境搭建略

2.easyui前端实现

  2.1 easyui是前端实用的一个框架,这里我们要实现的是easyui的CRUD数据网格,参考资料:http://www.runoob.com/jeasyui/jeasyui-app-crud1.html

  一下代码为runoob下载修改后的

  test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI CRUD Demo</title>
  <!-- easyui 加载采用的是href加载,未下载到本地,所以在显示时图片会加载不上-->
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/demo/demo.css">
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
color:#666;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
var url;
     <!-- 添加功能函数,newUser()添加;editUser()编辑;saveUser()保存;removeUser()删除。-->
     <!-- url为支持post请求的后端地址,在本例中并没做这4个功能的操作,所以没修改源代码-->
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.success){
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
function removeUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
if (r){
$.post('remove_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.msg
});
}
},'json');
}
});
}
}
</script>
</head>
<body>
<h2>Basic CRUD Application</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip">&nbsp;</div>
<div>Click the buttons on datagrid toolbar to do crud actions.</div>
</div> <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
       <!-- url为后端可get的地址,json数据通过该地址返回-->
url="http://192.168.41.129:5000/mysql/query"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
         <!-- field的值需要与后端json数据一一对应,需注意-->
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
</div> <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
</body>
</html>

3.python后端实现

  3.1python后端采用flask实现路由功能

  

#!/usr/bin/env python
#-*- coding:utf-8 -*- from flask import Flask, render_template
import json app = Flask(__name__) @app.route('/') #路由主页,返回test.html页面
def index():
return render_template('test.html') @app.route('/mysql/<arg1>', methods=['GET', 'POST']) #mysql功能路由,带参数的方便,查询,修改,更新,删除功能的实现,这里未连接mysql,采用模拟数据实现
def mysql(arg1):
data = {'total':2, 'rows':[{'firstname':1, 'lastname':2, 'phone': '', 'email':'12345@qq.com'},{'firstname':4, 'lastname':5, 'phone': '', 'email':'12345@qq.com'}]}
j_reslist = json.dumps(data) #data数据为模拟数据,total为显示的页数,rows为行数,rows中firstname,lastname,phone,email对应为test.html中的参数
print j_reslist
return j_reslist if __name__ == '__main__':
app.run('0.0.0.0')

4.flask mvc

  test.py

  templates

    |___test.html

5.注意事项

  前后端对接无外乎与就是json的传递,保证了json的数据格式正确也就保证了页面的正常显示

  这里的json格式为 data = {'total':2, 'rows':[{'firstname':1, 'lastname':2, 'phone': '3', 'email':'12345@qq.com'}]}

6.效果图

EasyUI+Python-flask实现CRUD应用的更多相关文章

  1. AFNetworking+Python+Flask+pyOpenSSL构建iOS HTTPS客户端&服务器端

    对于HTTPS我在网上找了一堆资料看了下, 各种协议和证书已经有点晕了 最后我现有的感觉是, 在HTTP服务器上放一个证书, 在原本的HTTP访问之前客户端先检查证书是否正确 如果客户端证书检查正确, ...

  2. python flask detect browser language

    python flask detect browser language   No problem. We won't show you that ad again. Why didn't you l ...

  3. Error generating Swagger server (Python Flask) from Swagger editor

    1down votefavorite   http://stackoverflow.com/questions/36416679/error-generating-swagger-server-pyt ...

  4. windows下python+flask环境配置详细图文教程

    本帖是本人在安装配置python和flask环境时所用到的资源下载及相关的教程进行了整理罗列,来方便后面的人员,省去搜索的时间.如果你在安装配置是存在问题可留言给我. 首先罗列一下python+fla ...

  5. [Python][flask][flask-login]关于flask-login中各种API使用实例

    本篇博文跟上一篇[Python][flask][flask-wtf]关于flask-wtf中API使用实例教程有莫大的关系. 简介:Flask-Login 为 Flask 提供了用户会话管理.它处理了 ...

  6. python+flask+mongodb+whoosh实现自己的搜索引擎(一):目录

    python+flask+jieba+mongodb+whoosh实现自己的搜索引擎 一.目录 二.基于python的爬虫 三.网页去燥,URL去重 四.基于mongodb的数据存储 五.基于whoo ...

  7. 使用wfastcgi在IIS上部署Python Flask应用

    本文介绍了如何在Windows上部署Python Flask应用,相关环境如下: 操作系统:windows 7 Python:3.4 WFastCGI: 2.2 应用所用到的包版本如下: Flask= ...

  8. 使用python+flask让你自己api(教程源代码)

    1.背景 ok,这可能是很多朋友和我一样经常使用的各种api,例facebook的.github的.甚至微信api.因此,很多人都想使自己的api.在线教程在这方面它是非常小的,今天,我做了一个平稳, ...

  9. ubuntu下python flask环境搭建

    ubuntu下python flask环境搭建 1. 安装pip sudo apt-get install python-dev pyhton-pip 2. 安装virtualenv sudo apt ...

  10. Taffy Web开发,Python Flask实践详解

    1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能. 2. 实现细节 页面使用Python Flask +Bootstrap开发,还 ...

随机推荐

  1. 转载 :sql server 2005 无法删除数据库 "#Test",因为该数据库当前正在使用

    无法删除数据库 "#Test",因为该数据库当前正在使用 --查询分析器中执行下面的语句就行了. use master go declare @dbname sysname set ...

  2. 将list分成等数量

    import java.util.ArrayList; import java.util.List; public class CollectionGroupUtil { public static ...

  3. 16.1116 NOIP 考前模拟(信心题)

    分火腿 (hdogs.pas/.c/.cpp) 时间限制:1s:内存限制 64MB 题目描述: 小月言要过四岁生日了,她的妈妈为她准备了n根火腿,她想将这些火腿均分给m位小朋友,所以她可能需要切火腿. ...

  4. 济南学习 Day 5 T1 am

    炮(cannon)[题目描述]众所周知,双炮叠叠将是中国象棋中很厉害的一招必杀技.炮吃子时必须隔一个棋子跳吃,即俗称“炮打隔子”. 炮跟炮显然不能在一起打起来,于是rly一天借来了许多许多的炮在棋盘上 ...

  5. 【Tomcat】解决Tomcat catalina.out 不断成长导致档案过大的问题

    Tomcat的网站上的说法http://wiki.apache.org/tomcat/FAQ/Logging#Q6: System.out 和 System.err 都被打印到 catalina.ou ...

  6. 清除svn检出导致的所有文件的问号

    问题:将svn项目检出到桌面后,桌面的图标都有问号了,怎么消除这一大堆问号? 解决方案:(1)新建一个a.txt文件,把这行代码复制进去for /r . %%a in (.) do @if exist ...

  7. 搭建Redis环境以及所遇问题(CentOS7+Redis 3.2.8)

    一.安装步骤 1. 首先需要安装gcc,把下载好的redis-3.2.8-rc2.tar.gz 放到/usr/local文件夹下 2. 进行解压 tar -zxvf redis-3.2.8-rc2.t ...

  8. chmod u g x o 777

    chmod [ugoa] [+-= ] [rwx] 文件或者是目录u:表示文件的属主,g:表文件的属组内的成员,o:则表示其它用户,a:是所有用户的(ugo的总和)+—=:是对权限的操作,+表示增加相 ...

  9. 解决maven无法下载依赖的jar包的问题

    背景: 公司内部有搭建maven私服,自己做了个核心jar包,一开始是xxx-core.1.0.0.SNAPSHOT版本,是本地和项目环境都可以正常使用的.为支持上线,发布稳定版本,xxx-core. ...

  10. Linux下的搜索命令grep(转)

    一.简介 grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具, ...