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 Demotitle>
<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;
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 Applicationh2>
<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="http://192.168.41.129:5000/mysql/query"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Nameth>
<th field="lastname" width="50">Last Nameth>
<th field="phone" width="50">Phoneth>
<th field="email" width="50">Emailth>
tr>
thead>
table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Usera>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Usera>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove Usera>
div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Informationdiv>
<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()">Savea>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancela>
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/', methods=['GET', 'POST']) #mysql功能路由,带参数的方便,查询,修改,更新,删除功能的实现,这里未连接mysql,采用模拟数据实现 def mysql(arg1): data = {'total':2, 'rows':[{'firstname':1, 'lastname':2, 'phone': '3', 'email':'[email protected]'},{'firstname':4, 'lastname':5, 'phone': '6', 'email':'[email protected]'}]} 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':'[email protected]'}]}
6.效果图