EasyUi高级布局（三）

最新推荐文章于 2022-05-05 19:27:22 发布

一个被代码耽误的天才

最新推荐文章于 2022-05-05 19:27:22 发布

阅读量829

点赞数

CC 4.0 BY-SA版权

文章标签： easyUI 高级布局

本文链接：https://blog.youkuaiyun.com/what_where/article/details/91909206

本文详细介绍了使用EasyUI进行前端开发的过程，包括数据表格、弹出框和表单的创建。数据表格的数据来源于JSON，弹出框内包含表单。后台部分涉及到增删查改操作，讲解了DAO方法和JS核心代码。文章最后展示了成果并鼓励读者尝试。

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

今天我就说一说咋们的一个前后端分离，在很多的一些企业里面我们所做的项目都是前后端分离的，也就是说我们前面台展示的界面和我们的数据操控不是同一个人写的，而是两个部门。当然在一些小型的企业里一个人既要干前端的是也要干后台的事。今天我们就来学习一一些简单的前台和后台。

1.前台

我们的前台界面是用easyUI进行开发的，虽然界面是丑了点，但是并不影响我们的开发。蛤蟆虽小五脏俱全。哈哈哈 easyUI 的开发我们还是需要了解 easyUI的apl的这里我提供了apl，仅供参考
http://www.92ui.net/

1.1，数据表格

这里我们展示了前台界面的数据表单，里面所展示的数据是来自json的

<%@ 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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/userManage.js"></script>

</head>
<body>
    <!-- 表单 -->
    <form id="ff" method="post">  
    	<input type="hidden" id='ctx' value='${pageContext.request.contextPath }'>
    	<input type="hidden" name="SerialNo" id="SerialNo"> 
	    <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"  />   
	    </div>   
	    <div>   
	        <label for="upwd">upwd:</label>   
	        <input class="easyui-validatebox" type="text" name="upwd"  />   
	    </div> 
	</form>  
</div>
</body>
</html>

json 文件

{
   
   "total":28,"rows":[
	{
   
   "uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status"

最低0.47元/天解锁文章

200万优质内容无限畅学