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

作者：丶谦信 2019-11-05

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

一、数据访问层的实现

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

package com.idlewow.map.model;
import com.idlewow.common.model.BaseModel;
import lombok.Data;
import java.io.Serializable;
@Data
public class WowMap extends BaseModel implements Serializable {
private String name;
private Integer occupy;
private String description;
}

复制代码

然后，我们在core模块中实现数据访问层的逻辑。新建com.idlewow.map.mapper包，并新建一个接口类WowMapMapper，在接口中定义我们需要用到的一些增删查改方法，代码如下：

package com.idlewow.map.mapper;
import com.idlewow.map.model.WowMap;
import com.idlewow.query.model.WowMapQueryParam;
import java.util.List;
public interface WowMapMapper {
int insert(WowMap wowMap);
int batchInsert(List<WowMap> list);
int update(WowMap levelProp);
int delete(String id);
WowMap find(String id);
List<WowMap> list(WowMapQueryParam queryParam);
int count(WowMapQueryParam queryParam);
}

复制代码

Mapper接口类，只定义了方法，具体实现需要我们在该包下新建一个WowMapMapper.xml文件，在这个文件中，通过SQL语句实现接口中的方法：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.idlewow.map.mapper.WowMapMapper">
<resultMap id="BaseResultMap" type="com.idlewow.map.model.WowMap">
<result column="id" property="id"/>
<result column="name" property="name"/>
<result column="occupy" property="occupy"/>
<result column="description" property="description"/>
<result column="create_user" property="createUser"/>
<result column="update_user" property="updateUser"/>
<result column="create_time" property="createTime"/>
<result column="update_time" property="updateTime"/>
<result column="is_delete" property="isDelete"/>
<result column="version" property="version"/>
</resultMap>
<insert id="insert">
insert into map (name, occupy, description, create_user)
values (#{name}, #{occupy}, #{description}, #{createUser})
</insert>
<insert id="batchInsert">
insert into map (name, occupy, description, create_user)
values
<foreach collection="list" item="item" separator=",">
(#{item.name}, #{item.occupy}, #{item.description}, #{item.createUser})
</foreach>
</insert>
<update id="update">
update map
set name = #{name},
occupy = #{occupy},
description = #{description},
update_user = #{updateUser},
version = version + 1
where id = #{id} and is_delete = 0
</update>
<update id="delete" parameterType="String">
update map
set is_delete = 1
where id = #{id}
</update>
<select id="find" resultMap="BaseResultMap">
select *
from map
where id = #{id} and is_delete = 0
</select>
<select id="count" resultType="int">
select count(1)
from map
<where>
is_delete = 0
<if test="name != null and name != ''">
and name like concat('%', #{name}, '%')
</if>
</where>
</select>
<select id="list" resultMap="BaseResultMap">
select *
from map
<where>
is_delete = 0
<if test="name != null and name != ''">
and name like concat('%', #{name}, '%')
</if>
</where>
<if test="pageParam != null">
limit ${(pageParam.pageIndex - 1) * pageParam.pageSize}, ${pageParam.pageSize}
</if>
</select>
</mapper>

复制代码

最后，我们新建com.idlewow.map.manager包，新建一个类WowMapManager，此类通过调用mapper来实现具体业务：

package com.idlewow.map.manager;
import com.idlewow.common.model.PageList;
import com.idlewow.map.mapper.WowMapMapper;
import com.idlewow.map.model.WowMap;
import com.idlewow.query.model.WowMapQueryParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import java.util.List;
@Component
public class WowMapManager {
@Autowired
WowMapMapper wowMapMapper;
public void insert(WowMap wowMap) {
int effected = wowMapMapper.insert(wowMap);
if (effected == 0) {
throw new RuntimeException("sql effected 0 rows");
}
}
public void batchInsert(List<WowMap> list) {
int splitSize = 100;
int index = 0;
int total = list.size();
while (index <= total) {
int end = index + splitSize;
if (end > total) {
end = total;
}
List<WowMap> sublist = list.subList(index, end);
int effected = wowMapMapper.batchInsert(sublist);
if (effected == 0) {
throw new RuntimeException("sql effected 0 rows");
}
index += splitSize;
}
}
public void update(WowMap t) {
int effected = wowMapMapper.update(t);
if (effected == 0) {
throw new RuntimeException("sql effected 0 rows");
}
}
public void delete(String id) {
int effected = wowMapMapper.delete(id);
if (effected == 0) {
throw new RuntimeException("sql effected 0 rows");
}
}
public WowMap find(String id) {
WowMap wowMap = wowMapMapper.find(id);
return wowMap;
}
public PageList<WowMap> list(WowMapQueryParam queryParam) {
PageList<WowMap> pageList = new PageList<WowMap>();
int count = wowMapMapper.count(queryParam);
List<WowMap> list = wowMapMapper.list(queryParam);
pageList.setTotalCount(count);
pageList.setData(list);
pageList.setPageParam(queryParam.getPageParam());
return pageList;
}
}

复制代码

另外， Componet注解需要依赖spring-context包。还有我们写SQL的xml文件是资源文件，但为了方便查看编辑，我们直接把它放在了代码目录下，所以编译的时候不会被打包，需要在pom中添加配置如下：

</dependencies>
........
........
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.1.6.RELEASE</version>
</dependency>
</dependencies>
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
<include>**/*.properties</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</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串。代码如下：

package com.idlewow.rms.controller;
import com.idlewow.common.model.CommonResult;
import com.idlewow.common.model.PageList;
import com.idlewow.map.manager.WowMapManager;
import com.idlewow.map.model.WowMap;
import com.idlewow.query.model.WowMapQueryParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/manage/map")
public class MapController extends BaseController {
@Autowired
WowMapManager wowMapManager;
@RequestMapping("/list")
public Object list() {
return "/manage/map/list";
}
@ResponseBody
@RequestMapping(value = "/list", method = RequestMethod.POST)
public Object list(@RequestParam(value = "page", defaultValue = "1") int pageIndex, @RequestParam(value = "limit", defaultValue = "10") int pageSize, WowMapQueryParam queryParam) {
queryParam.setPage(pageIndex, pageSize);
PageList<WowMap> pageList = wowMapManager.list(queryParam);
return this.parseTable(pageList);
}
@RequestMapping("/add")
public Object add() {
return "/manage/map/add";
}
@ResponseBody
@RequestMapping(value = "/add", method = RequestMethod.POST)
public Object add(@RequestBody WowMap wowMap) {
try {
wowMap.setCreateUser(this.currentUserName());
wowMapManager.insert(wowMap);
return CommonResult.success();
} catch (Exception ex) {
return CommonResult.fail();
}
}
@RequestMapping(value = "/edit/{id}", method = RequestMethod.GET)
public Object edit(@PathVariable String id, Model model) {
WowMap wowMap = wowMapManager.find(id);
model.addAttribute(wowMap);
return "/manage/map/edit";
}
@ResponseBody
@RequestMapping(value = "/edit/{id}", method = RequestMethod.POST)
public Object edit(@PathVariable String id, @RequestBody WowMap wowMap) {
try {
if (!id.equals(wowMap.getId())) {
return CommonResult.fail("id不一致");
}
wowMap.setUpdateUser(this.currentUserName());
wowMapManager.update(wowMap);
return CommonResult.success();
} catch (Exception ex) {
return CommonResult.fail();
}
}
@ResponseBody
@RequestMapping(value = "/delete/{id}", method = RequestMethod.POST)
public Object delete(@PathVariable String id) {
try {
wowMapManager.delete(id);
return CommonResult.success();
} catch (Exception ex) {
return CommonResult.fail();
}
}
}

复制代码

其中,CommonResult类是我定义的一个通用的结果返回类，PageList和PageParam是分页相关的辅助类，WowMapQueryParam是列表查询的参数类。

另外，前端列表展示使用了layui的datatable，需要给他返回对应的数据结构。因此，我们定义一个抽象类BaseController，实现对列表数据结构的转换，同时提供查询当前登录用户的方法。其他的Controller如无特殊情况均继承BaseController，代码如下：

package com.idlewow.rms.vo;
import lombok.Data;
import java.io.Serializable;
import java.util.List;
@Data
public class LayuiDataTable<T> implements Serializable {
private Integer code;
private String message;
private Integer count;
private List<T> data;

复制代码

package com.idlewow.rms.controller;
import com.idlewow.admin.model.SysAdmin;
import com.idlewow.common.model.PageList;
import com.idlewow.rms.vo.LayuiDataTable;
import org.springframework.beans.factory.annotation.Autowired;
import javax.servlet.http.HttpSession;
public abstract class BaseController {
private static final String LoginUserKey = "loginuser";
@Autowired
protected HttpSession httpSession;
protected SysAdmin currentUser() {
return (SysAdmin) httpSession.getAttribute(LoginUserKey);
}
protected String currentUserName() {
return this.currentUser().getUsername();
}
protected LayuiDataTable parseTable(PageList pageList) {
LayuiDataTable dataTable = new LayuiDataTable();
dataTable.setMessage("读取成功");
dataTable.setCode(0);
dataTable.setCount(pageList.getTotalCount());
dataTable.setData(pageList.getData());
return dataTable;
}
}

复制代码

写完控制器，前端页面，我们直接套用x-admin的模板。在/WEB-INF/views/manage/map目录下，创建页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include data-original="/authorize.jsp" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<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,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<link rel="stylesheet" href="<%=path%>/css/font.css">
<link rel="stylesheet" href="<%=path%>/css/xadmin.css">
<script type="text/javascript" src="<%=path%>/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
</head>
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">后台管理</a>
<a>
<cite>地图</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
onclick="location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body ">
<form id="queryForm" class="layui-form layui-col-space5" method="post">
<div class="layui-inline layui-show-xs-block">
<input type="text" name="name" placeholder="请输入地图名称" autocomplete="off" class="layui-input">
</div>
<div class="layui-inline layui-show-xs-block">
<button class="layui-btn" lay-submit lay-filter="search" type="button" onclick="search();">
<i class="layui-icon"></i>查询
</button>
</div>
<div class="layui-inline layui-show-xs-block">
<button class="layui-btn" type="button" onclick="reset();"> 重置</button>
</div>
<div class="layui-inline layui-show-xs-block">
<button type="button" class="layui-btn" onclick="xadmin.open('添加地图','add',500,500)">
<i class="layui-icon"></i>添加地图
</button>
</div>
<div class="layui-upload layui-inline layui-show-xs-block">
<button type="button" class="layui-btn layui-btn-normal" id="btnSelectFile">选择Excel</button>
<button type="button" class="layui-btn" id="btnImport">开始导入</button>
</div>
</form>
</div>
<div class="layui-card-body ">
<table class="layui-table layui-form" id="datatable"></table>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="<%=path%>/js/helper.js?v=0530"></script>
<script type="text/javascript" src="<%=path%>/js/wow/manage/map/list.js?v=0530"></script>
</html>

复制代码

<%@ page import="com.idlewow.rms.util.DropDownUtil" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include data-original="/authorize.jsp" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<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,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<link rel="stylesheet" href="<%=path%>/css/font.css">
<link rel="stylesheet" href="<%=path%>/css/xadmin.css">
<script type="text/javascript" src="<%=path%>/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row">
<form:form class="layui-form" method="post" modelAttribute="wowMap">
<form:hidden path="id"/>
<div class="layui-form-item">
<form:label path="name" class="layui-form-label"> <span class="x-red">*</span>地图名称 </form:label>
<div class="layui-input-inline">
<form:input path="name" lay-verify="required" autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<form:label path="occupy" class="layui-form-label"> <span class="x-red">*</span>领土归属 </form:label>
<div class="layui-input-inline">
<form:select path="occupy" items="<%= DropDownUtil.OccupyMap %>"></form:select>
</div>
</div>
<div class="layui-form-item">
<form:label path="description" class="layui-form-label"> 地图描述 </form:label>
<div class="layui-input-inline">
<form:textarea path="description" class="layui-textarea"></form:textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<button class="layui-btn" lay-filter="edit" lay-submit type="button">修改</button>
</div>
</div>
</form:form>
</div>
</div>
<script type="text/javascript" src="<%=path%>/js/helper.js?v=0531"></script>
<script type="text/javascript" src="<%=path%>/js/wow/manage/map/edit.js?v=0510"></script>
</body>
</html>

复制代码

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.idlewow.rms.util.DropDownUtil" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include data-original="/authorize.jsp" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<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,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<link rel="stylesheet" href="<%=path%>/css/font.css">
<link rel="stylesheet" href="<%=path%>/css/xadmin.css">
<script type="text/javascript" src="<%=path%>/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row">
<form class="layui-form" method="post">
<div class="layui-form-item">
<label for="name" class="layui-form-label"> <span class="x-red">*</span>地图名称 </label>
<div class="layui-input-inline">
<input type="text" id="name" name="name" required lay-verify="required"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="occupy" class="layui-form-label"> <span class="x-red">*</span>领土归属 </label>
<div class="layui-input-inline">
<% request.setAttribute("occupyMap", DropDownUtil.OccupyMap); %>
<select name="occupy" id="occupy">
<option value="">请选择领土归属</option>
<c:forEach items="${occupyMap}" var="item">
<option value="${item.key}">${item.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item">
<label for="description" class="layui-form-label"> 地图描述 </label>
<div class="layui-input-inline">
<textarea name="description" id="description" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<button class="layui-btn" lay-filter="add" lay-submit type="button">添加</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="<%=path%>/js/helper.js?v=0531"></script>
<script type="text/javascript" src="<%=path%>/js/wow/manage/map/add.js?v=0531"></script>
</body>
</html>

复制代码

在/js/wow/manage/map目录下，创建相应的js脚本：

layui.use(['upload', 'table', 'form'], function () {
var table = layui.table;
table.render({
elem: '#datatable'
, url: '/manage/map/list'
, method: 'post'
, cellMinWidth: 80
, cols: [[
{field: 'id', width: 50, title: 'id'}
, {field: 'name', title: '地图名称'}
, {
field: 'occupy', title: '领土归属', templet: function (d) {
return enumUtil.occupyImage(d.occupy) + enumUtil.occupy(d.occupy);
}
}
, {
title: '操作', templet: function (d) {
return '<button class="layui-btn layui-btn-xs" onclick="xadmin.open(\'编辑地图\',\'edit/' + d.id + '\', 500, 500)" type="button"><i class="layui-icon"></i>编辑</button>' +
'<button class="layui-btn-danger layui-btn layui-btn-xs" onclick="remove(this, \'' + d.id + '\')" type="button"><i class="layui-icon"></i>删除</button>';
}
}
]]
, page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
, limits: [10, 20, 30, 40, 50]
, groups: 3 //只显示 1 个连续页码
, first: '首页'
, last: '尾页'
}
});
});
function search() {
var table = layui.table;
table.reload('datatable', {
where: {
name: $('input[name="name"]').val()
},
page: {
curr: 1
}
});
}
function reset(){
$('#queryForm').reset();
}
function remove(obj, id) {
layer.confirm('确认要删除吗？', function () {
$.ajax({
url: '/manage/map/delete/' + id,
type: 'post',
success: function (result) {
if (result.code === 1) {
$(obj).parents("tr").remove();
layer.msg('删除成功', {icon: 1, time: 1000});
} else {
layer.alert("删除失败", {icon: 5});
}
},
error: function () {
layer.alert("请求失败", {icon: 5});
}
});
});
}

复制代码

layui.use(['form', 'layer'],
function () {
var form = layui.form;
form.render();
form.verify({});
form.on('submit(edit)',
function (data) {
$.ajax({
url: '/manage/map/edit/' + data.field.id,
type: 'post',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data.field),
success: function (result) {
if (result.code === 1) {
layer.alert(result.message, {icon: 6},
function () {
xadmin.close();
xadmin.father_reload();
});
} else {
layer.alert(result.message, {icon: 5});
}
},
error: function () {
layer.alert("请求失败", {icon: 5});
}
});
});
});

复制代码

layui.use(['form', 'layer'],
function () {
var form = layui.form;
form.verify({});
form.on('submit(add)',
function (data) {
$.ajax({
url: '/manage/map/add',
type: 'post',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data.field),
success: function (result) {
if (result.code === 1) {
layer.alert(result.message, {icon: 6},
function () {
xadmin.close();
xadmin.father_reload();
});
} else {
layer.alert(result.message, {icon: 5});
}
},
error: function () {
layer.alert("请求失败", {icon: 5});
}
});
});
});

复制代码

三、项目启动

本次，我们修改了facade和core项目，这两个项目是作为jar包被rms模块引用的，因此必须先将其编译打包，这里我们用第（二）章定义的打包命令直接将整个项目重新打包。以后凡是jar包项目有改动，我们启动web项目前，都先重新打包一遍。

另外，maven的编译插件可能默认的jdk版本是1.5，我们在pom中配置一下，配成1.8，配置如下：

<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
…………
…………
</plugins>
</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

登录后参与讨论

暂无评论，来抢沙发