EasyUI实现前后端分离CURD

最新推荐文章于 2020-10-13 11:35:31 发布

qq_43059674

最新推荐文章于 2020-10-13 11:35:31 发布

阅读量1k

点赞数 1

文章标签： EasyUI

本文链接：https://blog.csdn.net/qq_43059674/article/details/91942483

版权

前后端分离简介

前后端分离，即是将前端后端都分离出来。使得前端和后端的两拨人能够在约定好数据传输格式的前提下实现各自的独立开发。

陈旧开发模式
以前后端工程师要等待前端工程师将一个页面写出来，然后由后端工程师将.html页面转为.jsp页面，还要后端工程师实现动态数据绑定，当客户的页面需求发送改变的时候，那么又要先由前端工程师从新出页面再由后端工程师从新将页面转成JSP再从新绑定数据。

前后端分离架构

前后端分离就非常方便啦，当需求发下来前端和后端约定 接口数据参数 前后端可以实现并行开发。前端后端无强依赖，如果需求变了，只要接口和参数都不变。就不用两边的去修改代码，开发效率很高

EasyUI实现前后端分离CURD的方式是
前端使用ajax请求JSON数据，后端使用自定义MVC，写好请求处理方法。前端直接发送请求到后端（可以带参数），后端根据请求的方法，和参数来决定返回的JSON格式数据数据。前后端解耦和式开发

CURD代码实现

操作表

在这里插入图片描述
SerialNo是主键，并且是自增列

前端代码

HTML部分

<%@ 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">
<!-- 注意：JS有引顺序 这是EasyUI需要引入的文件 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/js/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/jquery.easyui.min.js"></script>
<!--该页面的js-->
<script src="${pageContext.request.contextPath }/static/userMarage.js"></script>
<title>CURD</title>
</head>
<body>
	<!-- 用于后端获取数据 -->
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
	<!-- 这是DataGrid数据表格 用于数据展示 -->
	<table id="dg"></table> 

		
	<!-- 这是工具栏 -->
	<div id="tb">
		<input class="easyui-textbox" id="queryName" data-options="iconCls:'icon-search'" style="width:300px">
		 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="query()">查询</a>  
		<a href="#" class="easyui-linkbutton" onclick="add()" data-options="iconCls:'icon-add',plain:true"></a>
		<a href="#" class="easyui-linkbutton" onclick="edit()" data-options="iconCls:'icon-edit',plain:true"></a>
		<a href

最低0.47元/天解锁文章

qq_43059674

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
EasyUI实现前后端分离CURD

前后端分离简介前后端分离，即是将前端后端都分离出来。使得前端和后端的两拨人能够在约定好数据传输格式的前提下实现各自的独立开发。陈旧开发模式以前后端工程师要等待前端工程师将一个页面写出来，然后由后端工程师将.html页面转为.jsp页面，还要后端工程师实现动态数据绑定，当客户的页面需求发送改变的时候，那么又要先由前端工程师从新出页面再由后端工程师从新将页面转成JSP再从新绑定数据。前后端分离...
复制链接

扫一扫