前后端分离之前端增删改查
2016-12-16 10:30
357 查看
初次接触前后端分离，现把前端一个例子放出来记录以下，不喜勿喷。
html静态页面代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<link href="css/neweasyui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
href="js/js_util/easyui-1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="js/js_util/easyui-1.5/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="js/js_util/easyui-1.5/demo/demo.css">
<script language="JavaScript" src="js/js_util/jquery.min.js"></script>
<script type="text/javascript"
src="js/js_util/easyui-1.5/jquery.easyui.min.js"></script>
<script language="JavaScript" src="js/js_util/jquery.cookie.js"></script>
<script language="JavaScript" src="js/js_core/menu.js"></script>
<script language="JavaScript" src="js/js_core/cookieIsNo.js"></script>
<script type="text/javascript" src="js/js_util/jqPaginator.js"></script>
<script type="text/javascript">
$(function() {
//顶部导航切换
$(".nav li a").click(function() {
$(".nav li a.selected").removeClass("selected")
$(this).addClass("selected");
})
})
</script>
<script type="text/javascript">
if (top != self) {
if (top.location != self.location) {
top.location = self.location;
}
}
</script>
<style>
.box {
background-color: lavender;
float: left;
position: fixed;
left: 35%;
top: 10%;
width: 30%;
padding: 0px;
height: 400px;
border: 1px #37a5e5 solid;
border-radius: 2px;;
display: none; /* 默认对话框隐藏 */
z-index: 100;
}
.box.show {
display: block;
}
.box .x {
font-size: 14px;
text-align: right;
display: block;
color: #ea2020;
}
.box input {
width: 50%;
font-size: 14px;
margin-top: 18px;
}
.box p input {
border: 1px solid #d0dee5;
font: '微软雅黑', '宋体';
}
.tianjiayh .currentttt {
cursor: pointer;
background-color: #5da8c5;
}
</style>
</head>
<body style="background:#e0ecfb; margin: auto;">
<div style="position:fixed;height:100%;width:100%;">
<div class="navtop">
<img src="images/nav/images/navtopimg.png"
style="width:100%;height:100%;" />
</div>
<div class="aaaaa"
style="width:100%;height:20%;margin-top:-10%;float: left;">
<!--新建Div写显示文字-->
<p class="xinwei">
<img class="xinweitu" src="images/nav/images/topp.png" />
<!--本页logo图片路径自己改-->
<i class="font">菜单管理平台数据...</i>
<!--大标题-->
<i class="fontmin">菜单管理查询条件列表</i>
<!--小标题-->
</p>
<a href="javascript:history.go(-1)"><input class="anniunavbg11"
type="button" value="返回" onclick="location.href=document.referrer;" /></a>
</div>
<div class="chaxuanyh">
<ul>
<form id="selectMenuDemo">
<li>菜单名称：<input type="text" id="menuName"
style="border:1px solid #bfcfe1;height: 25px;width: 198px;" /></li>
<li>菜单父级：<input type="text" id="parentname"
style="border:1px solid #bfcfe1;height: 25px;width: 198px;" /></li>
<li><input class="input" value="查询" type="button"
onclick="inittable()"
style="width: 60px;height: 25px;text-align: center;color: #fff;background-image: url('images/nav/images/anniu3.png');background-color: transparent;" />
</li>
</form>
</ul>
</div>
<hr
style="height: 2px;background: #1c7bae;width: 100%;margin-bottom:2px;" />
<!-- 表格 b -->
<table id="dg" title="My Users" class="easyui-datagrid"
style="width:100%;height:63%;">
</table>
<!-- 工具栏 g -->
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
onclick="newUser()">添加</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-edit" plain="true" onclick="editUser()">修改</a> <a
href="#" class="easyui-linkbutton" iconCls="icon-remove"
plain="true" onclick="removeUser()">删除</a>
</div>
<!-- 弹出框-添加修改 c -->
<div id="dlg" class="easyui-dialog"
style="width:420px;height:350px;padding:10px 20px" closed="true"
buttons="#dlg-buttons">
<form method="post"
style="text-align: center;margin: auto;margin-top:6%;font-size: 12px;"
id="fm">
<p style="text-align: center;margin: auto;margin-top:1%;">
菜单名称：<input name="menuName" class="newinput-style easyui-validatebox"
required="true" type="text" style="height: 25px;"
value="">
</p>
<p style="text-align: center;margin-top:1%;font-size: 12px;">
菜单级别：<input id="cc1" class="newinput-style" required="true"
style="width:148px;height: 25px;" class="easyui-combobox"
name="menuLevel"></input>
</p>
<p style="text-align: center;margin: auto;margin-top:1%;">
菜单父级：<input id="cc2" name="menuParent" class="newinput-style" type="text"
style="height: 25px;" value="">
</p>
<p style="text-align: center;margin-top:1%;">
图片地址：<input name="menuAddress" class="newinput-style" type="text"
style="height: 25px;"
</p>
<p style="text-align: center;margin-top:1%;">
链接地址：<input name="linkAddress" class="newinput-style" type="text"
style="height: 25px;" value="">
</p>
<p style="text-align: center;margin-top:1%;">
校验位 ：<input name="checkBit" class="newinput-style"
type="text" style="height: 25px;" value="">
</p>
<p style="text-align: center;margin-top:1%;">
菜单大图片 ：<input name="field1" class="newinput-style"
type="text" style="height: 25px;" value="">
</p>
</form>
</div>
<!-- 弹出框按钮 -->
<div id="dlg-buttons" style="text-align:center;">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveUser()">保存</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
<IFRAME id="iframe2" style="float: left;position: fixed;bottom: 0px;"
NAME="content_frame" width=100% height=8% scrolling="no"
frameborder="0" SRC="bnav.html"></IFRAME>
</div>
</body>
</html>js代码：
$(function() {
inittable();
});
// 初始化表格
function inittable() {
var urlg2 = $.cookie('urlg');
$('#dg').datagrid({
url : urlg2 + "/tbmenu/selectMenuForPage",
title : '信息列表',// 文字提示
toolbar : '#toolbar',
iconCls : 'icon-ok',
fitColumns : true,
pageSize : 20,// 默认每页多少行
pageList : [ 10, 20, 30, 40, 50 ],// 可以选择每页多少行
pageSize : 15,// 默认每页多少行
pageList : [ 15, 20, 30, 40, 50 ],// 可以选择每页多少行
collapsible : true,
nowrap : false,
striped : true,
queryParams : {
"menuName" : $("#menuName").val(),
"parentname" : $("#parentname").val()
},
collapsible : true,
loadMsg : '数据装载中......',// 等待页面的时候，显示的内容
frozenColumns : [ [ {
field : 'ck',
checkbox : true
} ] ],
columns : [ [ {
field : 'menuName',
title : '菜单名称',
width : 30,
align : 'center'
}, {
field : 'levelname',
title : '菜单级别',
width : 30,
align : 'center'
}, {
field : 'parentname',
title : '菜单父级',
width : 30,
align : 'center'
}, {
field : 'menuAddress',
title : '菜单图片地址',
width : 30,
align : 'center'
}, {
field : 'linkAddress',
title : '链接地址',
width : 30,
align : 'center'
} ] ],
pagination : true,// 启动分页效果
rownumbers : true, // 显示行数
singleSelect : true,
// 只选择一行
xhrFields : {
withCredentials : true
}
});
}
var url;
// 弹出新增窗口
function newUser() {
var urlg2 = $.cookie('urlg');
$('#dlg').dialog('open').dialog('setTitle', '新增菜单管理');
$('#fm').form('clear');
$('#cc1').combobox(
{
url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',
valueField : "dicValue",
textField : "dicName",
dataType : "json",
onLoadSuccess : function(data) {
$('#cc1').combobox('setValue', data[0].dicValue);
},
onChange : function(n, o) {
$('#cc2').combobox(
{
url : urlg2
+ '/tbmenu/selectAllMenu?menuLevel='
+ $('#cc1').combobox('getValue'),
valueField : "menuCode",
textField : "menuName",
dataType : "json"
// 是否多选
});
}
});
url = urlg2 + "/tbmenu/addMenu";
}
// 弹出修改窗口
function editUser() {
var urlg2 = $.cookie('urlg');
$('#fm').form("clear");
$('#cc1').combobox(
{
url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',
valueField : "
a060
dicValue",
textField : "dicName",
dataType : "json",
onLoadSuccess : function(data) {
},
onChange : function(n, o) {
$('#cc2').combobox(
{
url : urlg2
+ '/tbmenu/selectAllMenu?menuLevel='
+ $('#cc1').combobox('getValue'),
valueField : "menuCode",
textField : "menuName",
dataType : "json"
// 是否多选
});
}
});
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '修改菜单管理');
$('#fm').form('load', row);
url = urlg2 + "/tbmenu/updateMenu?menuCode=" + row.menuCode;
}
}
// 新增或修改方法
function saveUser() {
if ($("#fm").form('validate')) {
$.ajax({
url : url,
type : "POST",
dataType : "json",
data : $("#fm").serialize(),
async : false,
success : function(data) {
if (data.success == true) {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user
// data
$.messager.show({
title : 'success',
msg : data.msg
});
} else {
$.messager.show({
title : 'Error',
msg : data.msg
});
}
},
error : function(e) {
alert("服务器异常！");
}
});
} else {
$.messager.show({
title : 'Error',
msg : '请填写信息！'
});
}
}
// 删除
function removeUser() {
var urlg2 = $.cookie('urlg');
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('确认', '确定删除该条数据?', function(r) {
if (r) {
$.post(urlg2 + "/tbmenu/deleteMenu", {
menuCode : row.menuCode
}, function(result) {
if (result.success) {
$('#dg').datagrid('reload'); // reload
// the
// user data
$.messager.show({ // show error
// message
title : 'success',
msg : result.msg
});
} else {
$.messager.show({ // show error
// message
title : 'Error',
msg : result.msg
});
}
}, 'json');
}
});
}
}
以上是项目中一个菜单的CRUD前端代码
html静态页面代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<link href="css/neweasyui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
href="js/js_util/easyui-1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="js/js_util/easyui-1.5/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="js/js_util/easyui-1.5/demo/demo.css">
<script language="JavaScript" src="js/js_util/jquery.min.js"></script>
<script type="text/javascript"
src="js/js_util/easyui-1.5/jquery.easyui.min.js"></script>
<script language="JavaScript" src="js/js_util/jquery.cookie.js"></script>
<script language="JavaScript" src="js/js_core/menu.js"></script>
<script language="JavaScript" src="js/js_core/cookieIsNo.js"></script>
<script type="text/javascript" src="js/js_util/jqPaginator.js"></script>
<script type="text/javascript">
$(function() {
//顶部导航切换
$(".nav li a").click(function() {
$(".nav li a.selected").removeClass("selected")
$(this).addClass("selected");
})
})
</script>
<script type="text/javascript">
if (top != self) {
if (top.location != self.location) {
top.location = self.location;
}
}
</script>
<style>
.box {
background-color: lavender;
float: left;
position: fixed;
left: 35%;
top: 10%;
width: 30%;
padding: 0px;
height: 400px;
border: 1px #37a5e5 solid;
border-radius: 2px;;
display: none; /* 默认对话框隐藏 */
z-index: 100;
}
.box.show {
display: block;
}
.box .x {
font-size: 14px;
text-align: right;
display: block;
color: #ea2020;
}
.box input {
width: 50%;
font-size: 14px;
margin-top: 18px;
}
.box p input {
border: 1px solid #d0dee5;
font: '微软雅黑', '宋体';
}
.tianjiayh .currentttt {
cursor: pointer;
background-color: #5da8c5;
}
</style>
</head>
<body style="background:#e0ecfb; margin: auto;">
<div style="position:fixed;height:100%;width:100%;">
<div class="navtop">
<img src="images/nav/images/navtopimg.png"
style="width:100%;height:100%;" />
</div>
<div class="aaaaa"
style="width:100%;height:20%;margin-top:-10%;float: left;">
<!--新建Div写显示文字-->
<p class="xinwei">
<img class="xinweitu" src="images/nav/images/topp.png" />
<!--本页logo图片路径自己改-->
<i class="font">菜单管理平台数据...</i>
<!--大标题-->
<i class="fontmin">菜单管理查询条件列表</i>
<!--小标题-->
</p>
<a href="javascript:history.go(-1)"><input class="anniunavbg11"
type="button" value="返回" onclick="location.href=document.referrer;" /></a>
</div>
<div class="chaxuanyh">
<ul>
<form id="selectMenuDemo">
<li>菜单名称：<input type="text" id="menuName"
style="border:1px solid #bfcfe1;height: 25px;width: 198px;" /></li>
<li>菜单父级：<input type="text" id="parentname"
style="border:1px solid #bfcfe1;height: 25px;width: 198px;" /></li>
<li><input class="input" value="查询" type="button"
onclick="inittable()"
style="width: 60px;height: 25px;text-align: center;color: #fff;background-image: url('images/nav/images/anniu3.png');background-color: transparent;" />
</li>
</form>
</ul>
</div>
<hr
style="height: 2px;background: #1c7bae;width: 100%;margin-bottom:2px;" />
<!-- 表格 b -->
<table id="dg" title="My Users" class="easyui-datagrid"
style="width:100%;height:63%;">
</table>
<!-- 工具栏 g -->
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
onclick="newUser()">添加</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-edit" plain="true" onclick="editUser()">修改</a> <a
href="#" class="easyui-linkbutton" iconCls="icon-remove"
plain="true" onclick="removeUser()">删除</a>
</div>
<!-- 弹出框-添加修改 c -->
<div id="dlg" class="easyui-dialog"
style="width:420px;height:350px;padding:10px 20px" closed="true"
buttons="#dlg-buttons">
<form method="post"
style="text-align: center;margin: auto;margin-top:6%;font-size: 12px;"
id="fm">
<p style="text-align: center;margin: auto;margin-top:1%;">
菜单名称：<input name="menuName" class="newinput-style easyui-validatebox"
required="true" type="text" style="height: 25px;"
value="">
</p>
<p style="text-align: center;margin-top:1%;font-size: 12px;">
菜单级别：<input id="cc1" class="newinput-style" required="true"
style="width:148px;height: 25px;" class="easyui-combobox"
name="menuLevel"></input>
</p>
<p style="text-align: center;margin: auto;margin-top:1%;">
菜单父级：<input id="cc2" name="menuParent" class="newinput-style" type="text"
style="height: 25px;" value="">
</p>
<p style="text-align: center;margin-top:1%;">
图片地址：<input name="menuAddress" class="newinput-style" type="text"
style="height: 25px;"
</p>
<p style="text-align: center;margin-top:1%;">
链接地址：<input name="linkAddress" class="newinput-style" type="text"
style="height: 25px;" value="">
</p>
<p style="text-align: center;margin-top:1%;">
校验位 ：<input name="checkBit" class="newinput-style"
type="text" style="height: 25px;" value="">
</p>
<p style="text-align: center;margin-top:1%;">
菜单大图片 ：<input name="field1" class="newinput-style"
type="text" style="height: 25px;" value="">
</p>
</form>
</div>
<!-- 弹出框按钮 -->
<div id="dlg-buttons" style="text-align:center;">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveUser()">保存</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
<IFRAME id="iframe2" style="float: left;position: fixed;bottom: 0px;"
NAME="content_frame" width=100% height=8% scrolling="no"
frameborder="0" SRC="bnav.html"></IFRAME>
</div>
</body>
</html>js代码：
$(function() {
inittable();
});
// 初始化表格
function inittable() {
var urlg2 = $.cookie('urlg');
$('#dg').datagrid({
url : urlg2 + "/tbmenu/selectMenuForPage",
title : '信息列表',// 文字提示
toolbar : '#toolbar',
iconCls : 'icon-ok',
fitColumns : true,
pageSize : 20,// 默认每页多少行
pageList : [ 10, 20, 30, 40, 50 ],// 可以选择每页多少行
pageSize : 15,// 默认每页多少行
pageList : [ 15, 20, 30, 40, 50 ],// 可以选择每页多少行
collapsible : true,
nowrap : false,
striped : true,
queryParams : {
"menuName" : $("#menuName").val(),
"parentname" : $("#parentname").val()
},
collapsible : true,
loadMsg : '数据装载中......',// 等待页面的时候，显示的内容
frozenColumns : [ [ {
field : 'ck',
checkbox : true
} ] ],
columns : [ [ {
field : 'menuName',
title : '菜单名称',
width : 30,
align : 'center'
}, {
field : 'levelname',
title : '菜单级别',
width : 30,
align : 'center'
}, {
field : 'parentname',
title : '菜单父级',
width : 30,
align : 'center'
}, {
field : 'menuAddress',
title : '菜单图片地址',
width : 30,
align : 'center'
}, {
field : 'linkAddress',
title : '链接地址',
width : 30,
align : 'center'
} ] ],
pagination : true,// 启动分页效果
rownumbers : true, // 显示行数
singleSelect : true,
// 只选择一行
xhrFields : {
withCredentials : true
}
});
}
var url;
// 弹出新增窗口
function newUser() {
var urlg2 = $.cookie('urlg');
$('#dlg').dialog('open').dialog('setTitle', '新增菜单管理');
$('#fm').form('clear');
$('#cc1').combobox(
{
url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',
valueField : "dicValue",
textField : "dicName",
dataType : "json",
onLoadSuccess : function(data) {
$('#cc1').combobox('setValue', data[0].dicValue);
},
onChange : function(n, o) {
$('#cc2').combobox(
{
url : urlg2
+ '/tbmenu/selectAllMenu?menuLevel='
+ $('#cc1').combobox('getValue'),
valueField : "menuCode",
textField : "menuName",
dataType : "json"
// 是否多选
});
}
});
url = urlg2 + "/tbmenu/addMenu";
}
// 弹出修改窗口
function editUser() {
var urlg2 = $.cookie('urlg');
$('#fm').form("clear");
$('#cc1').combobox(
{
url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',
valueField : "
a060
dicValue",
textField : "dicName",
dataType : "json",
onLoadSuccess : function(data) {
},
onChange : function(n, o) {
$('#cc2').combobox(
{
url : urlg2
+ '/tbmenu/selectAllMenu?menuLevel='
+ $('#cc1').combobox('getValue'),
valueField : "menuCode",
textField : "menuName",
dataType : "json"
// 是否多选
});
}
});
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '修改菜单管理');
$('#fm').form('load', row);
url = urlg2 + "/tbmenu/updateMenu?menuCode=" + row.menuCode;
}
}
// 新增或修改方法
function saveUser() {
if ($("#fm").form('validate')) {
$.ajax({
url : url,
type : "POST",
dataType : "json",
data : $("#fm").serialize(),
async : false,
success : function(data) {
if (data.success == true) {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user
// data
$.messager.show({
title : 'success',
msg : data.msg
});
} else {
$.messager.show({
title : 'Error',
msg : data.msg
});
}
},
error : function(e) {
alert("服务器异常！");
}
});
} else {
$.messager.show({
title : 'Error',
msg : '请填写信息！'
});
}
}
// 删除
function removeUser() {
var urlg2 = $.cookie('urlg');
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('确认', '确定删除该条数据?', function(r) {
if (r) {
$.post(urlg2 + "/tbmenu/deleteMenu", {
menuCode : row.menuCode
}, function(result) {
if (result.success) {
$('#dg').datagrid('reload'); // reload
// the
// user data
$.messager.show({ // show error
// message
title : 'success',
msg : result.msg
});
} else {
$.messager.show({ // show error
// message
title : 'Error',
msg : result.msg
});
}
}, 'json');
}
});
}
}
以上是项目中一个菜单的CRUD前端代码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 解决 前后端分离 跨域 sessionid每次都变化
- MVC 前后端分离（REST-个人也认为是目前比较流行和比较好的方式） 2017-07-24 19:23 77人阅读 评论(0) 收藏 举报 分类： Spring（4） 目录(?)[+] 摘要
- 前后端分离开发
- 前后端分离架构中的接口设计
- nginx配置反向代理解决前后端分离跨域问题
- Spring Boot 菜鸟教程 9 swagger-前后端分离后的标准
- vue踩坑系列——前后端分离的接口跨域问题
- 从MVC到前后端分离（REST-个人也认为是目前比较流行和比较好的方式）
- 前后端分离的思考与实践（五）
- 图解基于 Node.js 实现前后端分离
- java 浅析跨域问题以及如何使用Cors解决前后端分离部署项目所遇到的跨域问题
- Swagger - 前后端分离后的契约
- nodeJS（express4.x）+vue（vue-cli）构建前后端分离详细教程(带跨域)
- 【二】React.JS & BackBone.JS 前后端分离初体验---BackBone.JS
- 浅谈WEB前后端分离
- CI框架实现框架前后端分离的方法详解
- 搭建express+reactjs前后端分离开发环境
- 一个前端与后端分离的架构实例
- 前后端分离之让前端开发脱离接口束缚（mock）
- 前端视角漫谈百度ueditor编辑器前后端分离配置