EasyUI+Python-flask实现CRUD应用
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"> </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应用的更多相关文章
- AFNetworking+Python+Flask+pyOpenSSL构建iOS HTTPS客户端&服务器端
对于HTTPS我在网上找了一堆资料看了下, 各种协议和证书已经有点晕了 最后我现有的感觉是, 在HTTP服务器上放一个证书, 在原本的HTTP访问之前客户端先检查证书是否正确 如果客户端证书检查正确, ...
- 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 ...
- Error generating Swagger server (Python Flask) from Swagger editor
1down votefavorite http://stackoverflow.com/questions/36416679/error-generating-swagger-server-pyt ...
- windows下python+flask环境配置详细图文教程
本帖是本人在安装配置python和flask环境时所用到的资源下载及相关的教程进行了整理罗列,来方便后面的人员,省去搜索的时间.如果你在安装配置是存在问题可留言给我. 首先罗列一下python+fla ...
- [Python][flask][flask-login]关于flask-login中各种API使用实例
本篇博文跟上一篇[Python][flask][flask-wtf]关于flask-wtf中API使用实例教程有莫大的关系. 简介:Flask-Login 为 Flask 提供了用户会话管理.它处理了 ...
- python+flask+mongodb+whoosh实现自己的搜索引擎（一）：目录
python+flask+jieba+mongodb+whoosh实现自己的搜索引擎 一.目录 二.基于python的爬虫 三.网页去燥,URL去重 四.基于mongodb的数据存储 五.基于whoo ...
- 使用wfastcgi在IIS上部署Python Flask应用
本文介绍了如何在Windows上部署Python Flask应用,相关环境如下: 操作系统:windows 7 Python:3.4 WFastCGI: 2.2 应用所用到的包版本如下: Flask= ...
- 使用python+flask让你自己api（教程源代码）
1.背景 ok,这可能是很多朋友和我一样经常使用的各种api,例facebook的.github的.甚至微信api.因此,很多人都想使自己的api.在线教程在这方面它是非常小的,今天,我做了一个平稳, ...
- ubuntu下python flask环境搭建
ubuntu下python flask环境搭建 1. 安装pip sudo apt-get install python-dev pyhton-pip 2. 安装virtualenv sudo apt ...
- Taffy Web开发，Python Flask实践详解
1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能. 2. 实现细节 页面使用Python Flask +Bootstrap开发,还 ...
随机推荐
- 云计算与 OpenStack
“云计算” 算是近年来最热的词了.现在 IT 行业见面不说这三个字您都不好意思跟人家打招呼. 对于云计算,学术界有各种定义,大家有兴趣可以百度一下. CloudMan 这里主要想从技术的角度谈谈对云计 ...
- UVa10491 Cows and Cars
#include<iostream> #include<cstdio> #include<algorithm> int main(){ double a,b,c; ...
- 济南学习 Day 5 T2 pm
逆欧拉函数(arc)题目描述:已知phi(N),求N.输入说明:两个正整数,分别表示phi(N)和K.输出说明:按升序输出满足条件的最小的K个N.样例输入:8 4杨丽输出:15 16 20 24数据范 ...
- Codeforces Round #288 (Div. 2) E. Arthur and Brackets [dp 贪心]
E. Arthur and Brackets time limit per test 2 seconds memory limit per test 128 megabytes input stand ...
- Objective C语言中nil、Nil、NULL、NSNull的区别
以下内容是基于搜集整理的网上资料,供参考. nil:指向Objective C语言中对象的空指针,其定义值为(id)0. Nil:指向Objective C语言中类(Class)的空指针,其定义值为( ...
- 有向图tarjan算法求连通分量的粗浅讲解、证明， // hdu1269
打算开始重新复习一遍相关算法.对于有向图tarjan算法,通过学习过很多说法,结合自己的理解,下面给出算法自己的观点. 算法总模型是一个dfs,结合一个stack(存放当前尚未形成SCC的点集合),记 ...
- 单片机C51串口发送、接收寄存器
所以,发送和接收寄存器可使用同一地址,编写验证程序(发送和接收是独立空间):读取一个数(1)->发送一个数(2)->再读取得1则是独立空间 不知道STM32串口寄存器和C51串口寄存器是否 ...
- 使用Crypto对数据进行加密解密
注释都在代码里: 先撸客户端: from Crypto.Cipher import AES import base64,requests class Message(object): def __in ...
- LeetCode:926. 将字符串翻转到单调递增
暴力法超时:思想:动态规划 public int minFlipsMonoIncrb(String S) { int result = S.length(); for (int i = 0; i &l ...
- CodeWar---将字符串转换为驼峰命名
Convert string to camel case 将字符串转换为驼峰命名 自己的解法 将不是字母和数字的字符用.取代,再根据点划分数组.将下标不为0的数组首字符大写,剩下全部小写 static ...