Easyui(前后端分离)

最新推荐文章于 2021-09-12 18:18:18 发布

原创

最新推荐文章于 2021-09-12 18:18:18 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了前后端分离的开发模式，对比了传统开发模式的缺点，并详细讲解了如何使用 Easyui 进行CRUD操作，包括创建jsp页面、编写js界面以及实现后端的增删改查功能，最后展示了查询和修改回显的运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们来了解一下什么是前后端分离
陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。
Vs
前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json

我们今天主要讲的是
easyui的crud（dialog，datagrid、form演示）
首先我们需要建立一个jsp页面
以及实现后端的增删改查！！
我们这里是先做前端！！

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<title>人员信息维护管理界面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/userManage.js"></script>    

</head>
<body>
<!-- 展示数据 -->
<table id="dg"></table>

<!-- 弹窗 -->
<div id="dd" class="easyui-dialog" title="编辑窗体" style="width:400px;height:200px;"   
 data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">   
		
		<!-- 提交的form表单 -->
	<form id="ff" method="post">
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath }" >
	<input type="hidden" name="SerialNo">
	<input type="hidden" id="method">
	<!-- 
		easyui自带正则:
		但是如果你想要正则规则在easyui中不存在，easyui只是定义了一些常见的正则，
		那么可以在easyui中自定义validType:'xxx,这个xxx就代表一种正则'
			$.extends({validType:xxx
				
			})
	 -->
	    <div>   
	        <label for="uid">uid:</label>   
	        <input class="easyui-validatebox" type="text" name="uid" data-options="required:true" />   
	    </div>
	    <div>   
	        <label for="uname">uname:</label>   
	        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
	    </div>
	    <div>   
	        <label for="upwd">upwd:</label>   
	        <input class="easyui-validatebox" type=