MyBatis+EasyUI+CRUD前台
目录
1.后台准备
1.准备query接收前台分页参数
BaseQuery
public abstract class BaseQuery {
private int page = 1; //默认是第一页
private int rows = 10; //默认每页10条数据
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
@Override
public String toString() {
return "BaseQuery{" +
"page=" + page +
", rows=" + rows +
'}';
}
}
DepartmentQuery
public class DepartmentQuery extends BaseQuery {
}
2.Service
IBaseService抽取
public interface IBaseService<T> {
void save(T t);
void update(T t);
void delete(Long id);
T findOne(Long id);
List<T> findAll();
PageResult<T> queryAll(BaseQuery query);
}
IDepartmentService
public interface IDepartmentService extends IBaseService<Department> {
}
BaseServiceImpl抽取
@Transactional
public class BaseServiceImpl<T> implements IBaseService<T> {
@Autowired
private BaseMapper<T> baseMapper;
@Override
public void save(T t) {
baseMapper.insert(t);
}
@Override
public void update(T t) {
baseMapper.updateByPrimaryKey(t);
}
@Override
public void delete(Long id) {
baseMapper.deleteByPrimaryKey(id);
}
@Override
@Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
public T findOne(Long id) {
return baseMapper.selectByPrimaryKey(id);
}
@Override
@Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
public List<T> findAll() {
return baseMapper.selectAll();
}
//完成分页功能性
@Override
public PageResult<T> queryAll(BaseQuery query) {
//配置分页的值
PageHelper.startPage(query.getPage(),query.getRows());
Page<T> page = baseMapper.queryAll(query);
return new PageResult<T>(page);
}
}
DepartmentServiceImpl
@Service
public class DepartmentServiceImpl extends BaseServiceImpl<Department> implements IDepartmentService {
}
3.准备响应格式
public class PageResult<T> {
private long total; //总条数
private List<T> rows; //这一行的数据
public PageResult(Page<T> page) {
this.total = page.getTotal();
this.rows = page.getResult();
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
}
4.Controller跳转
@Controller
@RequestMapping("/department")
public class DepartmentController {
@Autowired
private IDepartmentService departmentService;
@RequestMapping("/index")
public String index(){
return "department/index";
}
@RequestMapping("/page")
@ResponseBody
public PageResult<Department> page(DepartmentQuery query){
return departmentService.queryAll(query);
}
//返回的结果：{success:true,msg:xxxx}
@RequestMapping("/save")
@ResponseBody
public JsonResult save(Department department){
try {
if(department.getId()!=null){
//有id就是修改
departmentService.update(department);
}else {
departmentService.save(department);
}
return new JsonResult();
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(false,e.getMessage());
}
}
@RequestMapping("/delete")
@ResponseBody
public JsonResult delete(Long id){
try {
departmentService.delete(id);
return new JsonResult();
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(false,e.getMessage());
}
}
}
2.前台准备
1.映入相关的依赖包
2.准备JSP
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/4/8
Time: 9:51
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%@include file="/WEB-INF/views/common/common.jsp" %>
<%--引入当前这个模块对应的js文件--%>
<script type="text/javascript" src="static/js/model/department.js"></script>
</head>
<body>
<table id="departmentGrid"></table>
<div id="toolbar">
<a href="javascript:;" data-method="add" plain="true" class="easyui-linkbutton c1">添加</a>
<a href="javascript:;" data-method="update" plain="true" class="easyui-linkbutton c2">修改</a>
<a href="javascript:;" data-method="delete" plain="true" class="easyui-linkbutton c3">删除</a>
<a href="javascript:;" data-method="refresh" plain="true" class="easyui-linkbutton c4">刷新</a>
</div>
<div id="departmentDialog">
<form id="departmentForm" method="post">
<input type="hidden" name="id">
<table cellpadding="5">
<tr>
<td>编码:</td>
<td><input class="easyui-textbox" type="text" name="sn" data-options="required:true"></input></td>
</tr>
<tr>
<td>名称:</td>
<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>路径:</td>
<td><input class="easyui-textbox" type="text" name="dirpath" data-options="required:true"></input></td>
</tr>
<tr>
<td>状态:</td>
<td>
<select class="easyui-combobox" name="state" style="width:200px; " data-options="panelHeight:'auto'">
<option value="-1">作废</option>
<option value="0">正常</option>
<option value="1">异常</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div id="departmentDialogButtons">
<a href="javascript:;" data-method="save" plain="true" class="easyui-linkbutton c5">确定</a>
<a href="javascript:;" data-method="close" plain="true" class="easyui-linkbutton c6">取消</a>
</div>
</body>
</html>
3.准备Js
$(function () {
//wc公共的组件抽取
var departmentGrid = $('#departmentGrid');
var departmentDialog = $('#departmentDialog');
var departmentForm = $('#departmentForm');
//事情注册
$("*[data-method]").on("click",function () {
var methodName = $(this).data("method");
itsource[methodName]();
})
itsource = {
add(){
//居中并且打开
departmentDialog.dialog("center").dialog("open");
//保存每次打开，数据都是空的
departmentForm.form("clear");
},
update(){
//判断是否选中一行
var row = departmentGrid.datagrid("getSelected");
if(!row){
$.messager.alert('提示',"请选中后再进行操作!","info");
return ;
}
//居中并且打开
departmentDialog.dialog("center").dialog("open");
//保存每次打开，数据都是空的
departmentForm.form("clear");
//进行回显
departmentForm.form("load",row);
},
save(){
//提交表单
departmentForm.form('submit', {
url:"department/save",
onSubmit: function(){
return $(this).form('validate');
},
success:function(data){
//把它转成json
var result = JSON.parse(data);
if(result.success){
itsource.refresh();
itsource.close();
}else{
$.messager.alert('操作失败',result.msg,"error");
}
}
});
},
delete(){
//选中一行才可以删除
var row = departmentGrid.datagrid("getSelected");
if(!row){
$.messager.alert('提示',"请选中后再进行操作!","info");
return ;
}
//问:是否真的要删除？
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
$.get("department/delete",{id:row.id},function (result) {
if(result.success){
itsource.refresh();
}else{
$.messager.alert('操作失败',result.msg,"error");
}
})
}
});
},
refresh(){
//刷新一次
departmentGrid.datagrid("reload");
},
close(){
departmentDialog.dialog("close");
}
};
//通过js创建咱们的grid
departmentGrid.datagrid({
fit:true,
fitColumns:true,
singleSelect:true,
url:'department/page',
toolbar:"#toolbar",
pageList:[5,10,20,30,40,100],
pagination:true,
columns:[[
{field:'sn',title:'编码',width:100},
{field:'name',title:'名称',width:100},
{field:'dirpath',title:'路径',width:100,align:'right'},
{field:'state',title:'状态',width:100,align:'right'}
]]
});
//通过js创建咱们的弹出框
departmentDialog.dialog({
title: '编辑数据',
// width: 400,
// height: 200,
closed: true, //默认关闭
modal: true,
buttons:"#departmentDialogButtons"
});
})
4.准备参数common.jsp
<%--
公共的引入代码
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
//获到上下文路径
String path = request.getContextPath();
//拼接相应的路径前缀: http://localhost:80/crm2/
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/color.css">
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
5.公共的包
public class JsonResult {
//代表是否成功
private boolean success = true;
private String msg;
public JsonResult() {}
public JsonResult(boolean success, String msg) {
this.success = success;
this.msg = msg;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}