如何新建一個管理欄目 · KitAdmin二次開發手冊

# 注意：本文檔后期不在跟新，新文檔遷移到：[http://www.openkit.cc/docs/kitadmin/#/](http://www.openkit.cc/docs/kitadmin/#/) #### 首先感謝使用KitAdmin后臺開發框架 #### 反饋交流QQ群：696279396 --- ### 說明 > 在開發的時候，我們后臺管理頁面，經常需要添加一些管理的按鈕，我們添加一個管理的欄目，和一些對應的頁面，那么為什么說 KitAdmin 的效率非常的高，就體現在這里，我們只需要按照下面的方法就可以添加一些單獨的功能模塊 ### 步驟 - 第一步：我們打開后臺管理頁面，依次點擊 --> 菜單管理 --> 添加 ![](https://box.kancloud.cn/e9c4770c7a477cebca54e5dbba390900_3210x1620.png) - 這時候會有一個彈窗，在彈窗頁面添加你需要給他的內容即可鏈接地址就是我們的對應的舔磚地址 ![](https://box.kancloud.cn/64dbe0b543e75ff8387ddef4243def35_1772x1340.png) > 上面的鏈接地址是我們需要在`Controller` 里邊實現的方法，上面的標題就是左側對應的欄目，你也可以自己去分組 - 第二步：你需要將你添加的功能模塊給對應的分組權限，按照下圖一次點擊 --> 分組管理 --> 修改，當然如果你想添加一個分組，也是可以的，主要添加的時候直接賦予其權限即可 ![](https://box.kancloud.cn/cc427550a47d0e08e05acce76acd7333_3248x1702.png) - 接下來在彈框中勾選對應職位即可，對了，最后別忘了保存哦 ![](https://box.kancloud.cn/4899c6113ab1a2a2dde61546e22695b5_1730x1304.png) - 接下來你要做的就非常簡單了，你只要將對應賦予權限的用戶賬號，重新登錄一下就可以看到左側增加了一個我們剛剛添加的模塊，當然這個時候我們點擊會發現啥都沒有。不要著急，請接著往下看： - 第三步：我們需要到對應的`controller`中實現上面添加的方法，比如： > 在這之前，我們先在菜單管理列表頁面找到新增加的菜單的ID，如下圖 ![](https://box.kancloud.cn/98fbe7a31f529cbe33a261a88e40b854_2786x1080.png) > 然后利用代碼生成工具生成`model`,`dao`,`mapper`，然后根據需求處理，不會的可以參考文檔中的 --> 公告方法 --> 代碼自動生成 - 編寫方法 ```java /** * 添加的方法 * @return */ @RequestMapping(value = "/getAll", method = RequestMethod.GET) public ModelAndView getAll(HttpServletRequest request){ // 權限驗證。這里的最后的 5 就是上面我們找到菜單的ID，需要在這里查找 GGroupLimit gGroupLimit = gGroupLimitService.testGroup(request, 5); ModelAndView mv = new ModelAndView(); // 沒有權限，返回錯誤頁面 if(gGroupLimit==null){ mv.setViewName("/admin/err/no_group_err"); mv.addObject("msg", StaticFinalVar.NO_GROUP_MSG+StaticFinalVar.CALL_GROUP); return mv; } // 取值 mv.setViewName("/admin/XXXX/list"); // 需要跳轉的頁面 mv.addObject("kitG",gGroupLimit); return mv; } ``` > 為了代碼的重復利用，比如可能獲取列表數據接口在其他地方也會用到，所以我們在這個`Controller`里邊只做權限驗證和跳轉，其他的數據，我們再下面的接口中取得 ?????????????? - 第四步：我們上面的`Controller`里邊有一個跳轉頁面`mv.setViewName("/admin/XXXX/list"); `下面我們就要去實現這些文件 > 為了方便，我們直接將`src/main/webapp/templates/admin`文件夾下面的`admin`文件夾復制一份，將文件夾的名字改成上面的`XXXX`即可，這個時候我們去從其下服務，重新登錄，再次點擊左側的新增的欄目現在就已經可以看到跳轉頁面了。當然，我們還需要修改一下獲取數據的方式 - `List`頁面源碼解析 ```html <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用戶管理</title> <link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all"> <link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all"> <script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script> <script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script> </head> <body> <div class="kit-doc">  <blockquote class="layui-elem-quote">這里的用戶是后臺登錄的用戶，不是前臺注冊的用戶</blockquote> <div class="kit-doc-title"> <fieldset> <legend><a name="blockquote">用戶列表</a></legend> </fieldset> </div> <div>  <c:if test="${kitG.groupC==1}"><button class="layui-btn" id="add">添加</button></c:if>   <div class="layui-inline" style="float: right"> <div class="layui-input-inline"> <input name="search" id="search" lay-verify="required" autocomplete="off" class="layui-input" type="text"> </div> <button class="layui-btn layui-btn-primary" onclick="search()">搜索</button> </div>  <div style="clear:both;"></div>  <table class="layui-hide" id="test" lay-filter="demo"></table>  <script type="text/html" id="indexTpl"> {{d.LAY_TABLE_INDEX+1}} </script>  <script type="text/html" id="barDemo"> <c:if test="${kitG.groupU==1}"><button class="layui-btn layui-btn-xs" lay-event="edit">編輯</button></c:if> {{# if(d.kitAdminId != 1){ }} <c:if test="${kitG.groupR==1}"><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</button></c:if> {{# } }} </script>  </div> </div> <script> // 添加方法 layui.use(['jquery', 'layer', 'table'], function () { var table = layui.table; //讓層自適應iframe $('#add').on('click', function(){ var index = layer.open({ type: 2, content: '<%=basePath%>admin/goAdd', // 這里是彈窗請求方法，下面我們需要實現的 area: ['400px', '570px'], // 這里是彈窗大小，可以根據需求自己設置 maxmin: true, end: function () { location.reload(); } }); parent.layer.iframeAuto(index); }); }); // 默認渲染數據 layui.use('table', function(){ var table = layui.table; var search = $('#search').val(); table.render({ elem: '#test' ,url:'<%=basePath%>admin/getAllJson' ,where: {search: search} ,method: 'post' ,page: {layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']} ,cols: [[ // 這里就是對于的列第一行顯示序號，最后一行顯示操作不需要修改，中間的filed就是對應返回值列表對象中的名稱。 {field:'',align:'center', width:70, title: '序號', toolbar: '#indexTpl'} ,{field:'kitAdminName', title: '管理員名字'} ,{field:'kitAdminUsername', title: '登錄名'} ,{field:'groupName', title: '所屬分組'} ,{field:'right',align:'center', width:150, toolbar: '#barDemo', title: '操作'} ]] }); //監聽工具條 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ // 編輯按鈕方法實現 var index = layer.open({ type: 2, // 這里是編輯實現方法，下面我們需要實現，參數是id ，data.kitAdminID，就是列表對象中傳來的唯一id的屬性名 content: '<%=basePath%>admin/goUpdate?id='+data.kitAdminId, area: ['400px', '570px'], maxmin: true, end: function () { location.reload(); } }); parent.layer.iframeAuto(index); } else if(obj.event === 'del'){ layer.confirm('真的要刪除么？', function(index){ // 寫刪除方法 // 這里是編輯實現方法，下面我們需要實現，參數是id ，data.kitAdminID，就是列表對象中傳來的唯一id的屬性名 $.post("<%=basePath%>admin/del", {"id": data.kitAdminId}, function (data) { if (data.code == "200") { layer.msg(data.msg, {icon: 1, time: 1000}); // 前端修改 layer.close(index); window.location.reload(); } else { layer.msg(data.msg, {icon: 0, time: 1000}); layer.close(index); } }); }); } }); }); // 點擊搜索按鈕之后渲染數據方法 function search(){ var table = layui.table; var search = $('#search').val(); table.render({ elem: '#test' ,url:'<%=basePath%>admin/getAllJson' ,where: {search: search} ,method: 'post' ,page: {layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']} ,cols: [[ // 這里就是對于的列第一行顯示序號，最后一行顯示操作不需要修改，中間的filed就是對應返回值列表對象中的名稱。 {field:'left',align:'center', width:140, title: '序號', toolbar: '#indexTpl'} ,{field:'kitAdminName', title: '管理員名字'} ,{field:'kitAdminUsername', title: '登錄名'} ,{field:'groupName', title: '所屬分組'} ,{field:'right',align:'center', width:150, toolbar: '#barDemo', title: '操作'} ]] }); } </script> </body> </html> ``` - 第五步：添加獲取數據接口 ```java /** * 獲取列表數據 * @return */ @RequestMapping(value = "/getAllJson", method = RequestMethod.POST) @ResponseBody public Object getAllJson(HttpServletRequest request){ log.info("獲取APP廣告列表的數據"); Map<String,Object> map = new HashMap<String,Object>(); // 分頁需要的參數 String page = request.getParameter("page");// 獲得頁數 String limit = request.getParameter("limit");// 獲得每頁顯示條數 String search = request.getParameter("search");// 獲取搜索條件 // 封裝數據 AdvHello advHello = new AdvHello(); if(KitUtil.feikong(search)){ advHello.setAhTitle(search); } // 分頁查詢 List<AdvHello> advHelloList = advHelloService.queryPageListByWhere(advHello, Integer.valueOf(page), Integer.valueOf(limit)); // 獲取查詢到的總數 int size = advHelloService.queryCount(advHello); // 返回數據 map.put("code",0); map.put("msg",""); map.put("count",size); map.put("data",advHelloList); return JSONObject.toJSON(map); } ``` > 這里是單表的查詢，不涉及到自己寫SQL，如果需要自己實現service和mapper，這個跟SSM框架一毛一樣自己編寫即可。????????????下面我們繼續 - 第六步：實現添加彈窗跳轉方法 ``` /** * 去添加頁面 * @param request * @return */ @RequestMapping(value = "/goAdd", method = RequestMethod.GET) public Object goAdd(HttpServletRequest request){ log.info("APP首次登錄幻燈片》添加》跳轉"); ModelAndView mv = new ModelAndView(); mv.setViewName("/admin/xxx/add"); return mv; } ``` 這里我沒有帶參數出去，如果有額外參數，自己帶出去，然后用` jsp` 的 `EL`表達式渲染即可 - `add.jsp`頁面解讀 ``` <%-- Created by IntelliJ IDEA. User: benhailong Date: 2018/2/7 Time: 下午3:48 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>添加管理員</title> <link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all"> <link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all"> <script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script> <script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script> </head> <body> <div class="kit-doc">  <form class="layui-form layui-form-pane" action=""> <div class="layui-form-item"> <label class="layui-form-label">用戶名</label> <div class="layui-input-block"> <input name="kitAdminName" lay-verify="required" placeholder="請輸入用戶名" autocomplete="off" class="layui-input" type="text"> </div> </div> <div class="layui-form-item" > <label class="layui-form-label" style="height: 137px; line-height: 117px">上傳頭像</label> <input name="imgurl" id="imgurl" lay-verify="required" value="" autocomplete="off" class="layui-input" type="hidden"> <div class=" layui-upload-drag" id="img" style="border-left: 0px;"> <i class="layui-icon"></i> <p>點擊上傳頭像</p> <img id="demo1" style="position: absolute;height: 137px;width: 137px;margin: -106px auto auto -30px;display: none" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">登錄賬號</label> <div class="layui-input-block"> <input name="kitAdminUsername" lay-verify="required" placeholder="請輸入用戶名" autocomplete="off" class="layui-input" type="text"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密碼</label> <div class="layui-input-block"> <input name="kitAdminPassword" lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input" type="password"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">確認密碼</label> <div class="layui-input-block"> <input name="kitAdminPasswordAgen" lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input" type="password"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">所屬管理組</label> <div class="layui-input-block"> <select name="groupId" lay-verify="required" lay-search=""> <c:forEach items="${kitList}" var="kitList" > <option value="${kitList.groupId}">${kitList.groupName}</option> </c:forEach> </select> </div> </div> <div class="layui-form-item"> <button class="layui-btn" lay-submit="" lay-filter="add">提交</button> </div> </form>  </div> <script> layui.use(['form', 'layedit', 'laydate', 'element', 'layer', 'upload'], function(){ var form = layui.form, layer = layui.layer, element = layui.element, upload = layui.upload; //普通圖片上傳 var uploadInst = upload.render({ elem: '#img' , url: '/apiCommon/setImage' , field: 'layuiFile' , before: function (obj) { //預讀本地文件示例，不支持ie8 obj.preview(function (index, file, result, data) { $('#demo1').css('display','block').attr('src', result); //鏈接（base64） }); } , done: function (res) { //如果上傳失敗 if (res.code > 0) { return layer.msg('上傳失敗'); } //上傳成功 if(res.code == 0){ $('#imgurl').val(res.data.src); } } , error: function () { //演示失敗狀態，并實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); //監聽提交，發送請求，這里就是提交了 // 這個方法提交之前會自己根據 Layui 的驗證規則先對表單驗證 form.on('submit(add)', function(data){ if(data.field.kitAdminPassword!=data.field.kitAdminPasswordAgen){ layer.alert('兩次密碼輸入不一致'); return false; } // 這里是提交事項方法，方法需要實現 $.post("<%=basePath%>XXXX/add",data.field,function(data){ // 獲取 session if(data.code!=200){ layer.alert(data.msg, {offset: 't',icon: 5}); } if(data.code==200){ layer.alert(data.msg, {offset: 't',icon: 6}); } }); return false; }); }); </script> </body> </html> ``` - 第七步：添加提交方法實現，這里我用APP首次登錄幻燈為例 ``` /** * 添加 * * @param request * @return */ @RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public Object add(HttpServletRequest request) throws Exception{ log.info("APP首次登錄幻燈片》添加》保存"); // 取值 String ahTitle = request.getParameter("ahTitle"); String ahSummary = request.getParameter("ahSummary"); String ahSequence = request.getParameter("ahSequence"); String imgurl = request.getParameter("imgurl"); String ahUrl = request.getParameter("ahUrl"); String ahStartAndEndTime = request.getParameter("ahStartAndEndTime"); String ahType = request.getParameter("ahType"); // 封裝對象 AdvHello advHello = new AdvHello(); advHello.setAhId(KitUtil.uuid()); advHello.setAhTitle(ahTitle); if(KitUtil.feikong(ahSummary)){ advHello.setAhSummary(ahSummary); } if(KitUtil.feikong(ahSequence)){ advHello.setAhSequence(Integer.valueOf(ahSequence)); } advHello.setAhImg(imgurl); if(KitUtil.feikong(ahUrl)){ advHello.setAhUrl(ahUrl); } advHello.setAhType("on".equals(ahType)?1:2); // 分割字符串 String[] time = ahStartAndEndTime.split(" - "); advHello.setAhStartTime(KitUtil.stringToData(time[0],"yyyy-MM-dd HH:mm:ss")); advHello.setAhEndTime(KitUtil.stringToData(time[1],"yyyy-MM-dd HH:mm:ss")); advHello.setAhTime(new Date()); // 保存并返回 return JSONObject.toJSON(advHelloService.save(advHello)==1 ? KitUtil.returnMap("200",StaticFinalVar.ADD_OK) : KitUtil.returnMap("101",StaticFinalVar.ADD_ERR)); } ``` - 第八步：實現刪除方法 ``` /** * 刪除 * @param request * @return * @throws Exception */ @RequestMapping(value = "/del", method = RequestMethod.POST) @ResponseBody public Object del(HttpServletRequest request) throws Exception{ log.info("APP首次登錄幻燈片》添加》刪除"); String id = request.getParameter("id"); int i = advHelloService.deleteByUUId(id); return i==1?KitUtil.returnMap("200",StaticFinalVar.DEL_OK):KitUtil.returnMap("101",StaticFinalVar.DEL_ERR); } ``` - 第九步：實現修改彈窗跳轉方法 ``` /** * 修改前的查詢 * @param request * @return * @throws Exception */ @RequestMapping(value = "/goUpdate", method = RequestMethod.GET) public ModelAndView goUpdate(HttpServletRequest request) throws Exception{ String id = request.getParameter("id"); AdvHello advHello = advHelloService.queryByUUID(id); ModelAndView mv = new ModelAndView(); mv.setViewName("/admin/adv_hello/update"); mv.addObject("kitModel",advHello); return mv; } ``` > `update.jsp`頁面跟之前的`add.jsp`是一樣的，對一個`input` 隱藏域存放數據的唯一 `id` 即可，當然我們需要返回將放回的數據用`EL`表達式渲染 - 第十步：實現修改提交方法，這里其實更添加的方法也是差不多的 ``` /** * 修改 * @param request * @return * @throws Exception */ @RequestMapping(value = "/update", method = RequestMethod.POST) @ResponseBody public Object update(HttpServletRequest request) throws Exception{ // 取值 String ahId = request.getParameter("ahId"); ... // 封裝對象 AdvHello advHello = new AdvHello(); advHello.setAhId(ahId);// 這里要傳剛剛獲取的唯一id ... // 修改保存并返回參數 return JSONObject.toJSON(advHelloService.updateSelective(advHello)==1 ? KitUtil.returnMap("200",StaticFinalVar.UPDATE_OK) : KitUtil.returnMap("101",StaticFinalVar.UPDATE_ERR)); } ``` --- #### 反饋交流QQ群：696279396 #### 贊助 ![](https://box.kancloud.cn/e49c441e59a5c0981c0de2e9bb0871fd_600x500.png)