從零開始實現放置遊戲（四）後臺數值配置的增刪查改

遊資網發表於2019-11-05
遊戲
上一章我們將RMS後臺管理系統搭建完畢，本章我們就在這個系統上實現錄入遊戲配置的功能。目前我們需要配置四項，每個等級的人物屬性，每個等級的升級經驗，遊戲地圖，地圖中的怪物。下面我們以遊戲地圖配置為例子，實現對它的增刪查改功能。

一、資料訪問層的實現

首先，我們需要定義地圖類，這個類在各個模組通用，因此要定義在facade模組中。我們新建一個包com.idlewow.map.model，在其中新建WowMap類，程式碼如下：

  1. package com.idlewow.map.model;

  3. import com.idlewow.common.model.BaseModel;
  4. import lombok.Data;

  6. import java.io.Serializable;

  8. @Data
  9. public class WowMap extends BaseModel implements Serializable {
  10.     private String name;
  11.     private Integer occupy;
  12.     private String description;
  13. }
複製程式碼

然後，我們在core模組中實現資料訪問層的邏輯。新建com.idlewow.map.mapper包，並新建一個介面類WowMapMapper，在介面中定義我們需要用到的一些增刪查改方法，程式碼如下：

  1. package com.idlewow.map.mapper;

  3. import com.idlewow.map.model.WowMap;
  4. import com.idlewow.query.model.WowMapQueryParam;

  6. import java.util.List;

  8. public interface WowMapMapper {
  9.     int insert(WowMap wowMap);

  11.     int batchInsert(List<WowMap> list);

  13.     int update(WowMap levelProp);

  15.     int delete(String id);

  17.     WowMap find(String id);

  19.     List<WowMap> list(WowMapQueryParam queryParam);

  21.     int count(WowMapQueryParam queryParam);
  22. }
複製程式碼

Mapper介面類，只定義了方法，具體實現需要我們在該包下新建一個WowMapMapper.xml檔案，在這個檔案中，通過SQL語句實現介面中的方法：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  3. <mapper namespace="com.idlewow.map.mapper.WowMapMapper">
  4.     <resultMap id="BaseResultMap" type="com.idlewow.map.model.WowMap">
  5.         <result column="id" property="id"/>
  6.         <result column="name" property="name"/>
  7.         <result column="occupy" property="occupy"/>
  8.         <result column="description" property="description"/>
  9.         <result column="create_user" property="createUser"/>
  10.         <result column="update_user" property="updateUser"/>
  11.         <result column="create_time" property="createTime"/>
  12.         <result column="update_time" property="updateTime"/>
  13.         <result column="is_delete" property="isDelete"/>
  14.         <result column="version" property="version"/>
  15.     </resultMap>
  16.     <!-- 新增 -->
  17.     <insert id="insert">
  18.         insert into map (name, occupy, description, create_user)
  19.         values (#{name}, #{occupy}, #{description}, #{createUser})
  20.     </insert>
  21.     <!-- 批量新增 -->
  22.     <insert id="batchInsert">
  23.         insert into map (name, occupy, description, create_user)
  24.         values
  25.         <foreach collection="list" item="item" separator=",">
  26.             (#{item.name}, #{item.occupy}, #{item.description}, #{item.createUser})
  27.         </foreach>
  28.     </insert>
  29.     <!-- 修改 -->
  30.     <update id="update">
  31.         update map
  32.         set name = #{name},
  33.             occupy = #{occupy},
  34.             description = #{description},
  35.             update_user = #{updateUser},
  36.             version = version + 1
  37.         where id = #{id} and is_delete = 0
  38.     </update>
  39.     <!-- 刪除 -->
  40.     <update id="delete" parameterType="String">
  41.         update map
  42.         set is_delete = 1
  43.         where id = #{id}
  44.     </update>
  45.     <!-- id查詢 -->
  46.     <select id="find" resultMap="BaseResultMap">
  47.         select *
  48.         from map
  49.         where id = #{id} and is_delete = 0
  50.     </select>
  51.     <!-- 列表查詢總數 -->
  52.     <select id="count" resultType="int">
  53.         select count(1)
  54.         from map
  55.         <where>
  56.             is_delete = 0
  57.             <if test="name != null and name != ''">
  58.                 and name like concat('%', #{name}, '%')
  59.             </if>
  60.         </where>
  61.     </select>
  62.     <!-- 列表查詢 -->
  63.     <select id="list" resultMap="BaseResultMap">
  64.         select *
  65.         from map
  66.         <where>
  67.             is_delete = 0
  68.             <if test="name != null and name != ''">
  69.                 and name like concat('%', #{name}, '%')
  70.             </if>
  71.         </where>
  72.         <if test="pageParam != null">
  73.             limit ${(pageParam.pageIndex - 1) * pageParam.pageSize}, ${pageParam.pageSize}
  74.         </if>
  75.     </select>
  76. </mapper>
複製程式碼

最後，我們新建com.idlewow.map.manager包，新建一個類WowMapManager，此類通過呼叫mapper來實現具體業務：

  1. package com.idlewow.map.manager;

  3. import com.idlewow.common.model.PageList;
  4. import com.idlewow.map.mapper.WowMapMapper;
  5. import com.idlewow.map.model.WowMap;
  6. import com.idlewow.query.model.WowMapQueryParam;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Component;

  10. import java.util.List;

  12. @Component
  13. public class WowMapManager {
  14.     @Autowired
  15.     WowMapMapper wowMapMapper;

  17.     public void insert(WowMap wowMap) {
  18.         int effected = wowMapMapper.insert(wowMap);
  19.         if (effected == 0) {
  20.             throw new RuntimeException("sql effected 0 rows");
  21.         }
  22.     }

  24.     public void batchInsert(List<WowMap> list) {
  25.         int splitSize = 100;
  26.         int index = 0;
  27.         int total = list.size();
  28.         while (index <= total) {
  29.             int end = index + splitSize;
  30.             if (end > total) {
  31.                 end = total;
  32.             }

  34.             List<WowMap> sublist = list.subList(index, end);
  35.             int effected = wowMapMapper.batchInsert(sublist);
  36.             if (effected == 0) {
  37.                 throw new RuntimeException("sql effected 0 rows");
  38.             }

  40.             index += splitSize;
  41.         }
  42.     }

  44.     public void update(WowMap t) {
  45.         int effected = wowMapMapper.update(t);
  46.         if (effected == 0) {
  47.             throw new RuntimeException("sql effected 0 rows");
  48.         }
  49.     }

  51.     public void delete(String id) {
  52.         int effected = wowMapMapper.delete(id);
  53.         if (effected == 0) {
  54.             throw new RuntimeException("sql effected 0 rows");
  55.         }
  56.     }

  58.     public WowMap find(String id) {
  59.         WowMap wowMap = wowMapMapper.find(id);
  60.         return wowMap;
  61.     }

  63.     public PageList<WowMap> list(WowMapQueryParam queryParam) {
  64.         PageList<WowMap> pageList = new PageList<WowMap>();
  65.         int count = wowMapMapper.count(queryParam);
  66.         List<WowMap> list = wowMapMapper.list(queryParam);
  67.         pageList.setTotalCount(count);
  68.         pageList.setData(list);
  69.         pageList.setPageParam(queryParam.getPageParam());
  70.         return pageList;
  71.     }
  72. }
複製程式碼

另外， Componet註解需要依賴spring-context包。還有我們寫SQL的xml檔案是資原始檔，但為了方便檢視編輯，我們直接把它放在了程式碼目錄下，所以編譯的時候不會被打包，需要在pom中新增配置如下：

  1. </dependencies>
  2.         ........
  3.         ........
  4.         <dependency>
  5.             <groupId>org.springframework</groupId>
  6.             <artifactId>spring-context</artifactId>
  7.             <version>5.1.6.RELEASE</version>
  8.         </dependency>
  9.     </dependencies>
  10.     <build>
  11.         <resources>
  12.             <resource>
  13.                 <directory>src/main/java</directory>
  14.                 <includes>
  15.                     <include>**/*.xml</include>
  16.                     <include>**/*.properties</include>
  17.                 </includes>
  18.                 <filtering>false</filtering>
  19.             </resource>
  20.         </resources>
  21.     </build>
複製程式碼

這樣，我們的資料訪問層邏輯就全部實現了。通過在RMS模組的controller中注入manager，即可實現對底層資料的訪問。

二、controller層的實現

在com.idlewow.rms.controller包中，新建類MapController，在Contoller中，我們初步實現了對資料的增刪查改。注意，這裡list()方法，返回的字串“/manage/map/list"，代表檢視所在路徑，根據spring-mvc.xml中配置的檢視路由解析規則，即返回/WEB-INF/views/manage/map/list.jsp頁面。但如果在該方法上加上註解 ResponseBody，則代表直接返回該字串，不會去尋找檢視。在post方法中，我們就是直接返回資料的json串。程式碼如下：

  1. package com.idlewow.rms.controller;

  3. import com.idlewow.common.model.CommonResult;
  4. import com.idlewow.common.model.PageList;
  5. import com.idlewow.map.manager.WowMapManager;
  6. import com.idlewow.map.model.WowMap;
  7. import com.idlewow.query.model.WowMapQueryParam;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Controller;
  10. import org.springframework.ui.Model;
  11. import org.springframework.web.bind.annotation.PathVariable;
  12. import org.springframework.web.bind.annotation.RequestBody;
  13. import org.springframework.web.bind.annotation.RequestMapping;
  14. import org.springframework.web.bind.annotation.RequestMethod;
  15. import org.springframework.web.bind.annotation.RequestParam;
  16. import org.springframework.web.bind.annotation.ResponseBody;


  19. @Controller
  20. @RequestMapping("/manage/map")
  21. public class MapController extends BaseController {
  22.     @Autowired
  23.     WowMapManager wowMapManager;

  25.     @RequestMapping("/list")
  26.     public Object list() {
  27.         return "/manage/map/list";
  28.     }

  30.     @ResponseBody
  31.     @RequestMapping(value = "/list", method = RequestMethod.POST)
  32.     public Object list(@RequestParam(value = "page", defaultValue = "1") int pageIndex, @RequestParam(value = "limit", defaultValue = "10") int pageSize, WowMapQueryParam queryParam) {
  33.         queryParam.setPage(pageIndex, pageSize);
  34.         PageList<WowMap> pageList = wowMapManager.list(queryParam);
  35.         return this.parseTable(pageList);
  36.     }

  38.     @RequestMapping("/add")
  39.     public Object add() {
  40.         return "/manage/map/add";
  41.     }

  43.     @ResponseBody
  44.     @RequestMapping(value = "/add", method = RequestMethod.POST)
  45.     public Object add(@RequestBody WowMap wowMap) {
  46.         try {
  47.             wowMap.setCreateUser(this.currentUserName());
  48.             wowMapManager.insert(wowMap);
  49.             return CommonResult.success();
  50.         } catch (Exception ex) {
  51.             return CommonResult.fail();
  52.         }
  53.     }

  55.     @RequestMapping(value = "/edit/{id}", method = RequestMethod.GET)
  56.     public Object edit(@PathVariable String id, Model model) {
  57.         WowMap wowMap = wowMapManager.find(id);
  58.         model.addAttribute(wowMap);
  59.         return "/manage/map/edit";
  60.     }

  62.     @ResponseBody
  63.     @RequestMapping(value = "/edit/{id}", method = RequestMethod.POST)
  64.     public Object edit(@PathVariable String id, @RequestBody WowMap wowMap) {
  65.         try {
  66.             if (!id.equals(wowMap.getId())) {
  67.                 return CommonResult.fail("id不一致");
  68.             }

  70.             wowMap.setUpdateUser(this.currentUserName());
  71.             wowMapManager.update(wowMap);
  72.             return CommonResult.success();
  73.         } catch (Exception ex) {
  74.             return CommonResult.fail();
  75.         }
  76.     }

  78.     @ResponseBody
  79.     @RequestMapping(value = "/delete/{id}", method = RequestMethod.POST)
  80.     public Object delete(@PathVariable String id) {
  81.         try {
  82.             wowMapManager.delete(id);
  83.             return CommonResult.success();
  84.         } catch (Exception ex) {
  85.             return CommonResult.fail();
  86.         }
  87.     }
  88. }
複製程式碼


其中,CommonResult類是我定義的一個通用的結果返回類，PageList和PageParam是分頁相關的輔助類，WowMapQueryParam是列表查詢的引數類。

另外，前端列表展示使用了layui的datatable，需要給他返回對應的資料結構。因此，我們定義一個抽象類BaseController，實現對列表資料結構的轉換，同時提供查詢當前登入使用者的方法。其他的Controller如無特殊情況均繼承BaseController，程式碼如下：

  1. package com.idlewow.rms.vo;

  3. import lombok.Data;

  5. import java.io.Serializable;
  6. import java.util.List;

  8. @Data
  9. public class LayuiDataTable<T> implements Serializable {
  10.     private Integer code;
  11.     private String message;
  12.     private Integer count;
  13.     private List<T> data;
複製程式碼
  1. package com.idlewow.rms.controller;

  3. import com.idlewow.admin.model.SysAdmin;
  4. import com.idlewow.common.model.PageList;
  5. import com.idlewow.rms.vo.LayuiDataTable;
  6. import org.springframework.beans.factory.annotation.Autowired;

  8. import javax.servlet.http.HttpSession;

  10. public abstract class BaseController {
  11.     private static final String LoginUserKey = "loginuser";
  12.     @Autowired
  13.     protected HttpSession httpSession;

  15.     protected SysAdmin currentUser() {
  16.         return (SysAdmin) httpSession.getAttribute(LoginUserKey);
  17.     }

  19.     protected String currentUserName() {
  20.         return this.currentUser().getUsername();
  21.     }

  23.     protected LayuiDataTable parseTable(PageList pageList) {
  24.         LayuiDataTable dataTable = new LayuiDataTable();
  25.         dataTable.setMessage("讀取成功");
  26.         dataTable.setCode(0);
  27.         dataTable.setCount(pageList.getTotalCount());
  28.         dataTable.setData(pageList.getData());
  29.         return dataTable;
  30.     }
  31. }
複製程式碼

寫完控制器，前端頁面，我們直接套用x-admin的模板。在/WEB-INF/views/manage/map目錄下，建立頁面：

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@ include data-original="/authorize.jsp" %>
  3. <!DOCTYPE html>
  4. <html class="x-admin-sm">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>地圖管理</title>
  8.     <meta name="renderer" content="webkit">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10.     <meta name="viewport"
  11.           content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  12.     <link rel="stylesheet" href="<%=path%>/css/font.css">
  13.     <link rel="stylesheet" href="<%=path%>/css/xadmin.css">
  14.     <script type="text/javascript" src="<%=path%>/lib/layui/layui.js" charset="utf-8"></script>
  15.     <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
  16. </head>
  17. <body>
  18. <div class="x-nav">
  19.           <span class="layui-breadcrumb">
  20.             <a href="">首頁</a>
  21.             <a href="">後臺管理</a>
  22.             <a>
  23.               <cite>地圖</cite></a>
  24.           </span>
  25.     <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
  26.        onclick="location.reload()" title="重新整理">
  27.         <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  28. </div>
  29. <div class="layui-fluid">
  30.     <div class="layui-row layui-col-space15">
  31.         <div class="layui-col-md12">
  32.             <div class="layui-card">
  33.                 <div class="layui-card-body ">
  34.                     <form id="queryForm" class="layui-form layui-col-space5" method="post">
  35.                         <div class="layui-inline layui-show-xs-block">
  36.                             <input type="text" name="name" placeholder="請輸入地圖名稱" autocomplete="off" class="layui-input">
  37.                         </div>
  38.                         <div class="layui-inline layui-show-xs-block">
  39.                             <button class="layui-btn" lay-submit lay-filter="search" type="button" onclick="search();">
  40.                                 <i class="layui-icon"></i>查詢
  41.                             </button>
  42.                         </div>
  43.                         <div class="layui-inline layui-show-xs-block">
  44.                             <button class="layui-btn" type="button" onclick="reset();"> 重置</button>
  45.                         </div>
  46.                         <div class="layui-inline layui-show-xs-block">
  47.                             <button type="button" class="layui-btn" onclick="xadmin.open('新增地圖','add',500,500)">
  48.                                 <i class="layui-icon"></i>新增地圖
  49.                             </button>
  50.                         </div>
  51.                         <div class="layui-upload layui-inline layui-show-xs-block">
  52.                             <button type="button" class="layui-btn layui-btn-normal" id="btnSelectFile">選擇Excel</button>
  53.                             <button type="button" class="layui-btn" id="btnImport">開始匯入</button>
  54.                         </div>
  55.                     </form>
  56.                 </div>
  57.                 <div class="layui-card-body ">
  58.                     <table class="layui-table layui-form" id="datatable"></table>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </div>
  63. </div>
  64. </body>
  65. <script type="text/javascript" src="<%=path%>/js/helper.js?v=0530"></script>
  66. <script type="text/javascript" src="<%=path%>/js/wow/manage/map/list.js?v=0530"></script>
  67. </html>
複製程式碼
  1. <%@ page import="com.idlewow.rms.util.DropDownUtil" %>
  2. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
  3. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4. <%@ include data-original="/authorize.jsp" %>
  5. <!DOCTYPE html>
  6. <html class="x-admin-sm">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <title>編輯地圖</title>
  10.     <meta name="renderer" content="webkit">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12.     <meta name="viewport"
  13.           content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  14.     <link rel="stylesheet" href="<%=path%>/css/font.css">
  15.     <link rel="stylesheet" href="<%=path%>/css/xadmin.css">
  16.     <script type="text/javascript" src="<%=path%>/lib/layui/layui.js" charset="utf-8"></script>
  17.     <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
  18. </head>
  19. <body>
  20. <div class="layui-fluid">
  21.     <div class="layui-row">
  22.         <form:form class="layui-form" method="post" modelAttribute="wowMap">
  23.             <form:hidden path="id"/>
  24.             <div class="layui-form-item">
  25.                 <form:label path="name" class="layui-form-label"> <span class="x-red">*</span>地圖名稱 </form:label>
  26.                 <div class="layui-input-inline">
  27.                     <form:input path="name" lay-verify="required" autocomplete="off" class="layui-input"/>
  28.                 </div>
  29.             </div>
  30.             <div class="layui-form-item">
  31.                 <form:label path="occupy" class="layui-form-label"> <span class="x-red">*</span>領土歸屬 </form:label>
  32.                 <div class="layui-input-inline">
  33.                     <form:select path="occupy" items="<%= DropDownUtil.OccupyMap %>"></form:select>
  34.                 </div>
  35.             </div>
  36.             <div class="layui-form-item">
  37.                 <form:label path="description" class="layui-form-label"> 地圖描述 </form:label>
  38.                 <div class="layui-input-inline">
  39.                     <form:textarea path="description" class="layui-textarea"></form:textarea>
  40.                 </div>
  41.             </div>
  42.             <div class="layui-form-item">
  43.                 <label class="layui-form-label"></label>
  44.                 <div class="layui-input-inline">
  45.                     <button class="layui-btn" lay-filter="edit" lay-submit type="button">修改</button>
  46.                 </div>
  47.             </div>
  48.         </form:form>
  49.     </div>
  50. </div>
  51. <script type="text/javascript" src="<%=path%>/js/helper.js?v=0531"></script>
  52. <script type="text/javascript" src="<%=path%>/js/wow/manage/map/edit.js?v=0510"></script>
  53. </body>
  54. </html>
複製程式碼
  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page import="com.idlewow.rms.util.DropDownUtil" %>
  3. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4. <%@ include data-original="/authorize.jsp" %>
  5. <!DOCTYPE html>
  6. <html class="x-admin-sm">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <title>新增地圖</title>
  10.     <meta name="renderer" content="webkit">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12.     <meta name="viewport"
  13.           content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  14.     <link rel="stylesheet" href="<%=path%>/css/font.css">
  15.     <link rel="stylesheet" href="<%=path%>/css/xadmin.css">
  16.     <script type="text/javascript" src="<%=path%>/lib/layui/layui.js" charset="utf-8"></script>
  17.     <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
  18. </head>
  19. <body>
  20. <div class="layui-fluid">
  21.     <div class="layui-row">
  22.         <form class="layui-form" method="post">
  23.             <div class="layui-form-item">
  24.                 <label for="name" class="layui-form-label"> <span class="x-red">*</span>地圖名稱 </label>
  25.                 <div class="layui-input-inline">
  26.                     <input type="text" id="name" name="name" required lay-verify="required"
  27.                            autocomplete="off" class="layui-input">
  28.                 </div>
  29.             </div>
  30.             <div class="layui-form-item">
  31.                 <label for="occupy" class="layui-form-label"> <span class="x-red">*</span>領土歸屬 </label>
  32.                 <div class="layui-input-inline">
  33.                     <% request.setAttribute("occupyMap", DropDownUtil.OccupyMap); %>
  34.                     <select name="occupy" id="occupy">
  35.                         <option value="">請選擇領土歸屬</option>
  36.                         <c:forEach items="${occupyMap}" var="item">
  37.                             <option value="${item.key}">${item.value}</option>
  38.                         </c:forEach>
  39.                     </select>
  40.                 </div>
  41.             </div>
  42.             <div class="layui-form-item">
  43.                 <label for="description" class="layui-form-label"> 地圖描述 </label>
  44.                 <div class="layui-input-inline">
  45.                     <textarea name="description" id="description" class="layui-textarea"></textarea>
  46.                 </div>
  47.             </div>
  48.             <div class="layui-form-item">
  49.                 <label class="layui-form-label"></label>
  50.                 <div class="layui-input-inline">
  51.                     <button class="layui-btn" lay-filter="add" lay-submit type="button">新增</button>
  52.                 </div>
  53.             </div>
  54.         </form>
  55.     </div>
  56. </div>
  57. <script type="text/javascript" src="<%=path%>/js/helper.js?v=0531"></script>
  58. <script type="text/javascript" src="<%=path%>/js/wow/manage/map/add.js?v=0531"></script>
  59. </body>
  60. </html>
複製程式碼

在/js/wow/manage/map目錄下，建立相應的js指令碼：

  1. layui.use(['upload', 'table', 'form'], function () {
  2.     var table = layui.table;
  3.     table.render({
  4.         elem: '#datatable'
  5.         , url: '/manage/map/list'
  6.         , method: 'post'
  7.         , cellMinWidth: 80
  8.         , cols: [[
  9.             {field: 'id', width: 50, title: 'id'}
  10.             , {field: 'name', title: '地圖名稱'}
  11.             , {
  12.                 field: 'occupy', title: '領土歸屬', templet: function (d) {
  13.                     return enumUtil.occupyImage(d.occupy) + enumUtil.occupy(d.occupy);
  14.                 }
  15.             }
  16.             , {
  17.                 title: '操作', templet: function (d) {
  18.                     return '<button class="layui-btn layui-btn-xs"  onclick="xadmin.open(\'編輯地圖\',\'edit/' + d.id + '\', 500, 500)" type="button"><i class="layui-icon"></i>編輯</button>' +
  19.                         '<button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="remove(this, \'' + d.id + '\')" type="button"><i class="layui-icon"></i>刪除</button>';
  20.                 }
  21.             }
  22.         ]]
  23.         , page: {
  24.             layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁佈局
  25.             , limits: [10, 20, 30, 40, 50]
  26.             , groups: 3 //只顯示 1 個連續頁碼
  27.             , first: '首頁'
  28.             , last: '尾頁'
  29.         }
  30.     });
  31. });

  33. function search() {
  34.     var table = layui.table;
  35.     table.reload('datatable', {
  36.         where: {
  37.             name: $('input[name="name"]').val()
  38.         },
  39.         page: {
  40.             curr: 1
  41.         }
  42.     });
  43. }

  45. function reset(){
  46.     $('#queryForm').reset();
  47. }

  49. function remove(obj, id) {
  50.     layer.confirm('確認要刪除嗎？', function () {
  51.         $.ajax({
  52.             url: '/manage/map/delete/' + id,
  53.             type: 'post',
  54.             success: function (result) {
  55.                 if (result.code === 1) {
  56.                     $(obj).parents("tr").remove();
  57.                     layer.msg('刪除成功', {icon: 1, time: 1000});
  58.                 } else {
  59.                     layer.alert("刪除失敗", {icon: 5});
  60.                 }
  61.             },
  62.             error: function () {
  63.                 layer.alert("請求失敗", {icon: 5});
  64.             }
  65.         });
  66.     });
  67. }
複製程式碼
  1. layui.use(['form', 'layer'],
  2.     function () {
  3.         var form = layui.form;
  4.         form.render();
  5.         form.verify({});
  6.         form.on('submit(edit)',
  7.             function (data) {
  8.                 $.ajax({
  9.                     url: '/manage/map/edit/' + data.field.id,
  10.                     type: 'post',
  11.                     contentType: "application/json; charset=utf-8",
  12.                     data: JSON.stringify(data.field),
  13.                     success: function (result) {
  14.                         if (result.code === 1) {
  15.                             layer.alert(result.message, {icon: 6},
  16.                                 function () {
  17.                                     xadmin.close();
  18.                                     xadmin.father_reload();
  19.                                 });
  20.                         } else {
  21.                             layer.alert(result.message, {icon: 5});
  22.                         }
  23.                     },
  24.                     error: function () {
  25.                         layer.alert("請求失敗", {icon: 5});
  26.                     }
  27.                 });
  28.             });
  29.     });
複製程式碼
  1. layui.use(['form', 'layer'],
  2.     function () {
  3.         var form = layui.form;
  4.         form.verify({});
  5.         form.on('submit(add)',
  6.             function (data) {
  7.                 $.ajax({
  8.                     url: '/manage/map/add',
  9.                     type: 'post',
  10.                     contentType: "application/json; charset=utf-8",
  11.                     data: JSON.stringify(data.field),
  12.                     success: function (result) {
  13.                         if (result.code === 1) {
  14.                             layer.alert(result.message, {icon: 6},
  15.                                 function () {
  16.                                     xadmin.close();
  17.                                     xadmin.father_reload();
  18.                                 });
  19.                         } else {
  20.                             layer.alert(result.message, {icon: 5});
  21.                         }
  22.                     },
  23.                     error: function () {
  24.                         layer.alert("請求失敗", {icon: 5});
  25.                     }
  26.                 });
  27.             });
  28.     });
複製程式碼

三、專案啟動

本次，我們修改了facade和core專案，這兩個專案是作為jar包被rms模組引用的，因此必須先將其編譯打包，這裡我們用第（二）章定義的打包命令直接將整個專案重新打包。以後凡是jar包專案有改動，我們啟動web專案前，都先重新打包一遍。

另外，maven的編譯外掛可能預設的jdk版本是1.5，我們在pom中配置一下，配成1.8，配置如下：

  1.   <build>
  2.         <plugins>
  3.             <plugin>
  4.                 <groupId>org.apache.maven.plugins</groupId>
  5.                 <artifactId>maven-compiler-plugin</artifactId>
  6.                 <configuration>
  7.                     <source>1.8</source>
  8.                     <target>1.8</target>
  9.                 </configuration>
  10.             </plugin>
  11.             
  12.             …………
  13.             …………
  14.         </plugins>
  15.     </build>
複製程式碼

OK，全部搞定之後，我們執行一下，看下效果：

從零開始實現放置遊戲（四）後臺數值配置的增刪查改

小結

本章，我們初步實現了後臺管理系統資料配置的增刪查改，但還有很多功能不完善。

比如，新增、編輯時的資料沒有進行校驗；單個錄入資料太麻煩，想要通過excel批量錄入；出現異常時缺乏相應的日誌記錄，等等。

這些內容，我們都將在後面的章節中持續完善。

本章原始碼下載地址：https://idlestudio.ctfile.com/fs/14960372-383560985

本文原文地址：https://www.cnblogs.com/lyosaki88/p/idlewow_4.html

相關閱讀：
從零開始實現放置遊戲（一）：準備工作
從零開始實現放置遊戲（二）：整體框架搭建
從零開始實現放置遊戲（三）：後臺管理系統搭建

作者：丶謙信
部落格地址：https://www.cnblogs.com/lyosaki88/p/idlewow_4.html

相關文章