MyBatis+EasyUI+CRUD前台

目录

 

1.后台准备

       1.准备query接收前台分页参数

         BaseQuery

         DepartmentQuery

       2.Service

       3.准备响应格式

       4.Controller跳转

2.前台准备

       1.映入相关的依赖包

       2.准备JSP

       3.准备Js

       4.准备参数common.jsp

       5.公共的包

---

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;
    }
}