首先我们来了解一下什么是前后端分离
陈旧的开发模式
美工(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>