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

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

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前端代码