springboot+layui實現增刪查改

本文描述springboot和layui的結合，采用了springboot內置的jdbc，根據不同需要可以進行修改；分頁采用了layui中自帶分頁格式！
-------------------------------------------------數據管理dao層
package main.springboot.dao;

import main.springboot.bean.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

import java.util.List;
import java.util.Map;

    /**
     * 教師DAO
     * @author 周帥
     */
    @Repository
    public class TeaDao extends PageDao{

        @Autowired
        private JdbcTemplate jdbcTemplate;


        /**
         * 查詢所有學生
         * @return
         */
        public List queryTea(String newname){
            String sql = "select * from t_tea where flag=1";
            System.out.println(newname+"   aaaaa");
            if(newname!=null){
                sql +=" and name like '%"+newname+"%'";
            }
            System.out.println(sql);
            return jdbcTemplate.queryForList(sql);
        }

        /**
         * 獲取用戶信息
         * @param id
         * @return
         */
        public Map getTea(int id){
            String sql = "select * from t_tea where id="+id;
            return jdbcTemplate.queryForMap(sql);
        }

        /**
         * 更新教師信息
         * @param TeaMap
         */
        public void updateTea(Map<String,Object> TeaMap){
            String name = TeaMap.get("name").toString();
            String sex = (String) TeaMap.get("sex");
            String age = (String) TeaMap.get("age");
            System.out.println(sex);
            System.out.println(age);
            String updatesql = "";
            if(name!=null){
                updatesql +="name='"+name+"',";
            }
            if(sex!=null){
                updatesql +="sex="+sex+",";
            }
            if(age!=null){
                updatesql +="age="+age;
            }
            System.out.println(TeaMap.get("id")+"aaaaaaawww");
            if(updatesql.length()>2){
                String sql = "update t_tea set "+updatesql+" where id="+TeaMap.get("id");
                jdbcTemplate.execute(sql);
            }
        }

        /**
         * 添加教師
         * @param TeaMap
         */
        public void addTea(Map<String,Object> TeaMap){
            String sql="insert into t_tea(name,sex,age,flag) values('"+TeaMap.get("name")+"',"+TeaMap.get("sex")+","+TeaMap.get("age")+",'1')";
            jdbcTemplate.execute(sql);
        }

        /**
         * 刪除教師
         * @param id
         */
        public void deleteTea(String  id){
            String sql="update t_tea set flag='0' where id in("+id+")";
            jdbcTemplate.execute(sql);
        }

        /**
         * 模糊查詢
         * @param pageBean
         * @param where
         * @param orderby
         * @return
         */
        public PageBean mohuquery(PageBean pageBean, String where, String orderby){
            String sql="select * from t_tea where flag=1 " ;
            return this.queryPageByMysql(pageBean, sql, where, orderby);
        }
}

-----------------------------------------------------------pageDao分頁查詢

package main.springboot.dao;

import java.util.List;
import java.util.Map;

import main.springboot.bean.PageBean;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

@Repository
public class PageDao {
   
   @Autowired
   private JdbcTemplate jdbcTemplate;
   
   /**
    * 分頁查詢
    * @param sql
    * @param where
    * @param orderby
    * @return
    */
   public PageBean queryPageByMysql(PageBean pageBean,String sql,String where,String orderby){
      int page = pageBean.getPage();
      int rows = pageBean.getRows();
      int startIndex = (page-1) * rows;
      String pageSql = sql+where+orderby+" limit "+startIndex+","+rows;
      System.out.println(pageSql);
      System.out.println("PageBean Sql語句："+pageSql);

      List list = jdbcTemplate.queryForList(pageSql);
      System.out.println("PageBean 查詢數據："+list);
      pageBean.setPageData(list);
      int total = this.queryTotal(sql, where);
      pageBean.setTotal(total);
      return pageBean;
   }
   
   /**
    * 分頁查詢
    * @param sql
    * @param where
    * @param orderby
    * @return
    */
   public PageBean queryPageByOracle(PageBean pageBean,String sql,String where,String orderby){
      int page = pageBean.getPage();
      int rows = pageBean.getRows();
      int startIndex = (page-1) * rows;
      int endIndex = page * rows;
      String pageSql = "SELECT * FROM (SELECT A.*, ROWNUM RN FROM ("+sql+where+orderby+") A WHERE ROWNUM <= "+endIndex+" ) WHERE RN > "+startIndex;
      List list = jdbcTemplate.queryForList(pageSql);
      pageBean.setPageData(list);
      int total = this.queryTotal(sql, where);
      pageBean.setTotal(total);
      return pageBean;
   }
   
   
   /**
    * 查詢總數量
    * @param sql
    * @param where
    * @return
    */
   public int queryTotal(String sql,String where){
      String totalSql = " select count(1) as total from ("+sql+where+") a ";
      List list = jdbcTemplate.queryForList(totalSql);
      Map map = (Map)list.get(0);
      return Integer.parseInt(map.get("total").toString());
   }

}

-----------------------------------------------------------業務service層

package main.springboot.action;



import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import main.springboot.bean.PageBean;
import main.springboot.service.TeaService;
import main.springboot.service.UserService;
import main.springboot.utils.RedisUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 教師控制層
 * @author 周帥
 */
@Controller
public class TeaAction {


    @Autowired
    private RedisUtils redisUtils;
    @Autowired
    private TeaService teaService;
    @Autowired
    private UserService userService;

    private String newname ="";
    /**
     * 查詢所有教師
     * @param request
     * @return
     */
    @RequestMapping("/view/system/queryTeaList")
    @ResponseBody
    public String queryRoleList(HttpServletRequest request){
        try {
            List list = teaService.queryTea(newname);
            JSONObject josn = new JSONObject();
            josn.put("code",0);
            josn.put("msg","");
            josn.put("data",JSONArray.toJSON(list));
            return josn.toJSONString();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 根據ID查詢教師信息
     * @param request
     * @param id
     * @return
     */
    @RequestMapping("/view/system/queryById")
    @ResponseBody
    public Map queryById(HttpServletRequest request,@RequestParam int id){
        Map map = null;
        try {
            map = teaService.getTea(id);
        }catch (Exception e){
            e.printStackTrace();
        }
        return map;
    }


    /**
     * 添加教師
     * @param request
     * @param teaMap
     * @return
     */
    @RequestMapping("/view/system/addTea")
    @ResponseBody
    public int addTea(HttpServletRequest request,@RequestParam Map teaMap){
        try {
            teaService.addTea(teaMap);
            return 0;
        }catch (Exception e){
            e.printStackTrace();
        }
        return -1;
    }

    /**
     * 修改教師
     * @param request
     * @param teaMap
     * @return
     */
    @RequestMapping("/view/system/updateTea")
    @ResponseBody
    public int updateTea(HttpServletRequest request,@RequestParam Map teaMap){
        try {
            teaService.updateTea(teaMap);
            return 0;
        }catch (Exception e){
            e.printStackTrace();
        }
        return -1;
    }

    /**
     * 刪除教師
     * @param request
     * @param id
     * @return
     */
    @RequestMapping("/view/system/deleteTea")
    @ResponseBody
    public int deleteTea(HttpServletRequest request,@RequestParam String id){
        try {
            teaService.deleteTea(id);
            return 0;
        }catch (Exception e){
            e.printStackTrace();
        }
        return -1;
    }


    /**
     * 圖表數據查詢
     * @return
     */
    @RequestMapping("/view/system/queryTea2")
    @ResponseBody
    public ResponseEntity<?> queryTea2(){
        System.out.println(newname);
        List list = teaService.queryTea(newname);
        return  new ResponseEntity<List>(list, HttpStatus.OK);
    }


    /**
     * 分頁查詢
     * @param request
     * @param queryParams
     * @return
     */
    @RequestMapping("/view/system/queryTea")
    @ResponseBody
    public Map queryTea(HttpServletRequest request,@RequestParam Map queryParams){
        Map result = new HashMap();
        try {
            PageBean pageBean = new PageBean();
            pageBean.setPage(Integer.parseInt(queryParams.get("page").toString()));
            pageBean.setRows(Integer.parseInt(queryParams.get("limit").toString()));
            newname = (String) queryParams.get("keyword");
            pageBean.setQueryParams(queryParams);
            pageBean = teaService.mohuquery(pageBean);
            result.put("count", pageBean.getTotal());
            result.put("data", pageBean.getPageData());
            result.put("msg", "");
            result.put("code", 0);
        } catch (Exception e) {
            e.printStackTrace();
            result.put("count", 0);
            result.put("data", new ArrayList());
            result.put("msg", "");
            result.put("code", 500);
        }
        return result;
    }
}

----------------------------------------------------------------------控制action層

package main.springboot.action;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import main.springboot.bean.PageBean;
import main.springboot.service.TeaService;
import main.springboot.service.UserService;
import main.springboot.utils.RedisUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 教師控制層
 * @author 周帥
 */
@Controller
public class TeaAction {


    @Autowired
    private RedisUtils redisUtils;
    @Autowired
    private TeaService teaService;
    @Autowired
    private UserService userService;

    private String newname ="";
    /**
     * 查詢所有教師
     * @param request
     * @return
     */
    @RequestMapping("/view/system/queryTeaList")
    @ResponseBody
    public String queryRoleList(HttpServletRequest request){
        try {
            List list = teaService.queryTea(newname);
            JSONObject josn = new JSONObject();
            josn.put("code",0);
            josn.put("msg","");
            josn.put("data",JSONArray.toJSON(list));
            return josn.toJSONString();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 根據ID查詢教師信息
     * @param request
     * @param id
     * @return
     */
    @RequestMapping("/view/system/queryById")
    @ResponseBody
    public Map queryById(HttpServletRequest request,@RequestParam int id){
        Map map = null;
        try {
            map = teaService.getTea(id);
        }catch (Exception e){
            e.printStackTrace();
        }
        return map;
    }


    /**
     * 添加教師
     * @param request
     * @param teaMap
     * @return
     */
    @RequestMapping("/view/system/addTea")
    @ResponseBody
    public int addTea(HttpServletRequest request,@RequestParam Map teaMap){
        try {
            teaService.addTea(teaMap);
            return 0;
        }catch (Exception e){
            e.printStackTrace();
        }
        return -1;
    }

    /**
     * 修改教師
     * @param request
     * @param teaMap
     * @return
     */
    @RequestMapping("/view/system/updateTea")
    @ResponseBody
    public int updateTea(HttpServletRequest request,@RequestParam Map teaMap){
        try {
            teaService.updateTea(teaMap);
            return 0;
        }catch (Exception e){
            e.printStackTrace();
        }
        return -1;
    }

    /**
     * 刪除教師
     * @param request
     * @param id
     * @return
     */
    @RequestMapping("/view/system/deleteTea")
    @ResponseBody
    public int deleteTea(HttpServletRequest request,@RequestParam String id){
        try {
            teaService.deleteTea(id);
            return 0;
        }catch (Exception e){
            e.printStackTrace();
        }
        return -1;
    }


    /**
     * 圖表數據查詢
     * @return
     */
    @RequestMapping("/view/system/queryTea2")
    @ResponseBody
    public ResponseEntity<?> queryTea2(){
        System.out.println(newname);
        List list = teaService.queryTea(newname);
        return  new ResponseEntity<List>(list, HttpStatus.OK);
    }


    /**
     * 分頁查詢
     * @param request
     * @param queryParams
     * @return
     */
    @RequestMapping("/view/system/queryTea")
    @ResponseBody
    public Map queryTea(HttpServletRequest request,@RequestParam Map queryParams){
        Map result = new HashMap();
        try {
            PageBean pageBean = new PageBean();
            pageBean.setPage(Integer.parseInt(queryParams.get("page").toString()));
            pageBean.setRows(Integer.parseInt(queryParams.get("limit").toString()));
            newname = (String) queryParams.get("keyword");
            pageBean.setQueryParams(queryParams);
            pageBean = teaService.mohuquery(pageBean);
            result.put("count", pageBean.getTotal());
            result.put("data", pageBean.getPageData());
            result.put("msg", "");
            result.put("code", 0);
        } catch (Exception e) {
            e.printStackTrace();
            result.put("count", 0);
            result.put("data", new ArrayList());
            result.put("msg", "");
            result.put("code", 500);
        }
        return result;
    }

}

------------------------------------------------------------數據頁面 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta http-equiv="pragma" content="no-cache"></meta>
    <meta http-equiv="cache-control" content="no-cache"></meta>
    <meta http-equiv="expires" content="0"></meta>
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
    <link rel="stylesheet" href="../../css/role.css" media="all" />
    <style>
        .c1{
            float: left;
        }
    </style>
</head>

<body class="childrenBody">
<blockquote class="layui-elem-quote role_search">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input id="keyword" type="text" value="" placeholder="請輸入關鍵字" class="layui-input search_input">
        </div>
        <a class="layui-btn search_btn" onclick="queryTea()">查詢</a>
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal newsAdd_btn" onclick="addTea('')">添加用戶</a>
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-danger batchDel" onclick="getDatas();">批量刪除</a>
    </div>
</blockquote>
<div class="c1">
<table class="layui-hide" id="user" lay-filter="tools"></table>
</div>
<script type="text/html" id="tools">
    <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<script type="text/javascript" src="../../js/echarts.js"></script>
<div class="c1" id="main"  style="width: 500px;height:500px;"></div>

<script type="text/javascript" src="../../js/layui/layui.js"></script>
<script type="text/javascript" src="../../js/jquery2.1.4.js"></script>
<script type="text/javascript" src="../../js/DateFormat.js"></script>
<script type="text/javascript" src="../../js/view/system/tea.js"></script>
</body>
</html>

--------------------------------------------------------主要的tea.js

var table;
var layer;
layui.use([ 'layer', 'table', 'element' ], function() {
    table = layui.table;
    layer = layui.layer;
    // 執行一個 table 實例
    table.render({
        elem : '#user',
        height:472,
        url : '/view/system/queryTea',
        page :true, // 開啟分頁
        cols : [ [ // 表頭
            {
                fixed : 'left',
                type : 'checkbox'
            }, {
                field : 'id',
                title : 'ID',
                width : 80,

                fixed : 'left'
            }, {
                field : 'name',
                title : '教師名稱',
                width : 160
            }, {
                field : 'sex',
                title : '性別',
                width : 80,
                templet : function(d) {
                    if (d.sex == 1) {
                        return '男';
                    } else if (d.sex == 0) {
                        return '女';
                    }
                }
            }, {
                field : 'age',
                title : '年齡',
                width : 220,
            },{
                title : '操作',
                width : 300,
                align : 'center',
                toolbar : '#tools'
            } ] ]

    });

// 監聽工具條
    table.on('tool(tools)', function(obj) { // 注：tool是工具條事件名，test是table原始容器的屬性
        var data = obj.data // 獲得當前行數據
            , layEvent = obj.event; // 獲得 lay-event 對應的值
        if ('edit' == layEvent) {
            addTea(data.id)
        } else if ('del' == layEvent) {
            del(data.id);
        }
    });

    showBar();
});


function showBar() {
//生成圖表
// 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));
    var m=0;
    var n=0;
    $.ajax({
        url:"/view/system/queryTea2",
        success:function(data){
            $.each(data,function (i,obj) {
                if(obj.sex==1){
                    m+=1;
                }else{
                    n+=1;
                }
            });
            // 指定圖表的配置項和數據
            var option = {
                title: {
                    text: '男女比例'
                },
                tooltip: {},
                legend: {
                    data:['數量']
                },
                xAxis: {
                    data: ["男","女"]
                },
                yAxis: {},
                series: [{
                    name: '數量',
                    type: 'bar',
                    data: [m,n]
                }]
            };
// 使用剛指定的配置項和數據顯示圖表。
            myChart.setOption(option);
        }
    });
}





function queryTea(){
    var keyword = $("#keyword").val();
    table.reload('user', {
        where : {
            keyword : keyword
        },
        page : {
            curr : 1
        }
    });
    showBar()
    }


var index;
function addTea(id) {
    index = layer.open({
        type : 2,
        title : "角色信息",
        content : '/view/system/editTea?id=' + id
    });
    layer.full(index);
    queryTea();
}

function close() {
    layer.close(index);
}

function del(id) {
        layer.open({
            type : 1,
            content : '<div style="padding: 20px 80px;">確定刪除記錄?</div>',
            btn : [ '確定', '取消' ],
            yes : function(index, layero) {
                $.ajax({
                    url : "/view/system/deleteTea",
                    data : {
                        "id" : id
                    },
                    dataType : "text",
                    success : function(data) {
                        if(data==0){
                            layer.msg("刪除成功！");
                            layer.close(index);
                            queryTea();
                        }else{
                            layer.msg("刪除失敗！");
                        }
                    },
                    error : function() {
                    }
                });
            }
        });

}

/**
 * 獲取選中數據
 */
function getDatas(){
    var checkStatus = table.checkStatus('user');
    var data = checkStatus.data;
    var id = "";
    for(var i=0;i<data.length;i++){
        id += data[i].id;
        if(i<data.length-1){
            id += ",";
        }
    }
    if(data.length != 0){
        del(id);
    }
}

-----------------------------------------------------------------添加、修改頁面

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/user.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form changePwd">
    <input type="hidden" name="id"  id="id" th:value="${id}">
    <div class="layui-form-item">
        <label class="layui-form-label">教師名稱</label>
        <div class="layui-input-block">
            <input type="text" name="name" value="" placeholder="教師名稱" id="name"  lay-verify="required|name" class="layui-input pwd">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">教師性別</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="女" checked="">
            <input type="radio" name="sex" value="1" title="男" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年齡</label>
        <div class="layui-input-block">
            <input type="text" name="age" value="" placeholder="年齡"  id="age" class="layui-input pwd">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="parent.close();">關閉</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="../../js/layui/layui.js"></script>
<script type="text/javascript" src="../../js/jquery2.1.4.js"></script>
<script>
    $(function(){
        var id = $("#id").val();
        if(id != ""){
            $.ajax({
                url: "/view/system/queryById",
                data:{"id":id},
                dataType:"json",
                success: function(data){
                    $("#name").val(data.name);
                    $("#age").val(data.age);
                    $("input[name='sex']").eq(data.sex).attr("checked",'checked');

                },error:function(){
                }
            });
        }
    })

    layui.use(['form','layer' ], function() {
        var form = layui.form;
        var layer = layui.layer;
        // 添加驗證規則
        form.verify({
            name : function(value, item) {
                value = value.trim();
                if (value.length < 0) {
                    return "請輸入教師名稱";
                }
            }
        });

        form.on('submit(*)', function(data) {
            var index = layer.msg('提交中，請稍候',{icon: 16,time:false,shade:0.8});
            var d = data.field;
            var url = "/view/system/addTea";
            if(d.id != ""){
                url = "/view/system/updateTea";
            }
            $.ajax({
                url: url,
                data:d,
                dataType:"text",
                success: function(data){
                    layer.close(index);
                    if(data == 0){
                        layer.msg("保存成功！");
                        parent.queryTea();
                        parent.close();
                    }else{
                        layer.msg("保存失敗！");
                    }
                },error:function(){
                    layer.close(index);
                    layer.msg("保存失敗！");
                }
            });
            return false;
        });
    });

</script>
</body>
</html>