前后端分离之前端增删改查

最新推荐文章于 2024-08-01 14:29:43 发布

还俗的凤凰

最新推荐文章于 2024-08-01 14:29:43 发布

阅读量1w

点赞数 2

分类专栏： easyui 文章标签： easyui 前后端分离 CRUD

本文链接：https://blog.csdn.net/qq_19363753/article/details/53689943

版权

easyui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初次接触前后端分离，现把前端一个例子放出来记录以下，不喜勿喷。

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="返回" οnclick="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"
						οnclick="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"
				οnclick="newUser()">添加</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-edit" plain="true" οnclick="editUser()">修改</a> <a
				href="#" class="easyui-linkbutton" iconCls="icon-remove"
				plain="true" οnclick="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"
				οnclick="saveUser()">保存</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-cancel" οnclick="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 : "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前端代码