从零开始实现放置游戏（四）后台数值配置的增删查改

小篱

上一章我们将RMS后台管理系统搭建完毕，本章我们就在这个系统上实现录入游戏配置的功能。目前我们需要配置四项，每个等级的人物属性，每个等级的升级经验，游戏地图，地图中的怪物。下面我们以游戏地图配置为例子，实现对它的增删查改功能。

一、数据访问层的实现

首先，我们需要定义地图类，这个类在各个模块通用，因此要定义在facade模块中。我们新建一个包com.idlewow.map.model，在其中新建WowMap类，代码如下：

1. package com.idlewow.map.model;
   
2. 
   
3. import com.idlewow.common.model.BaseModel;
   
4. import lombok.Data;
   
5. 
   
6. import java.io.Serializable;
   
7. 
   
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;
   
2. 
   
3. import com.idlewow.map.model.WowMap;
   
4. import com.idlewow.query.model.WowMapQueryParam;
   
5. 
   
6. import java.util.List;
   
7. 
   
8. public interface WowMapMapper {
   
9.     int insert(WowMap wowMap);
   
10. 
    
11.     int batchInsert(List<WowMap> list);
    
12. 
    
13.     int update(WowMap levelProp);
    
14. 
    
15.     int delete(String id);
    
16. 
    
17.     WowMap find(String id);
    
18. 
    
19.     List<WowMap> list(WowMapQueryParam queryParam);
    
20. 
    
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;
   
2. 
   
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;
   
9. 
   
10. import java.util.List;
    
11. 
    
12. @Component
    
13. public class WowMapManager {
    
14.     @Autowired
    
15.     WowMapMapper wowMapMapper;
    
16. 
    
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.     }
    
23. 
    
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.             }
    
33. 
    
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.             }
    
39. 
    
40.             index += splitSize;
    
41.         }
    
42.     }
    
43. 
    
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.     }
    
50. 
    
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.     }
    
57. 
    
58.     public WowMap find(String id) {
    
59.         WowMap wowMap = wowMapMapper.find(id);
    
60.         return wowMap;
    
61.     }
    
62. 
    
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;
   
2. 
   
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;
    
17. 
    
18. 
    
19. @Controller
    
20. @RequestMapping("/manage/map")
    
21. public class MapController extends BaseController {
    
22.     @Autowired
    
23.     WowMapManager wowMapManager;
    
24. 
    
25.     @RequestMapping("/list")
    
26.     public Object list() {
    
27.         return "/manage/map/list";
    
28.     }
    
29. 
    
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.     }
    
37. 
    
38.     @RequestMapping("/add")
    
39.     public Object add() {
    
40.         return "/manage/map/add";
    
41.     }
    
42. 
    
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.     }
    
54. 
    
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.     }
    
61. 
    
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.             }
    
69. 
    
70.             wowMap.setUpdateUser(this.currentUserName());
    
71.             wowMapManager.update(wowMap);
    
72.             return CommonResult.success();
    
73.         } catch (Exception ex) {
    
74.             return CommonResult.fail();
    
75.         }
    
76.     }
    
77. 
    
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;
   
2. 
   
3. import lombok.Data;
   
4. 
   
5. import java.io.Serializable;
   
6. import java.util.List;
   
7. 
   
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;
   
2. 
   
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;
   
7. 
   
8. import javax.servlet.http.HttpSession;
   
9. 
   
10. public abstract class BaseController {
    
11.     private static final String LoginUserKey = "loginuser";
    
12.     @Autowired
    
13.     protected HttpSession httpSession;
    
14. 
    
15.     protected SysAdmin currentUser() {
    
16.         return (SysAdmin) httpSession.getAttribute(LoginUserKey);
    
17.     }
    
18. 
    
19.     protected String currentUserName() {
    
20.         return this.currentUser().getUsername();
    
21.     }
    
22. 
    
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 file="/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 file="/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 file="/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. });
    
32. 
    
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. }
    
44. 
    
45. function reset(){
    
46.     $('#queryForm').reset();
    
47. }
    
48. 
    
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