经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » 游戏设计 » 查看文章
从零开始实现放置游戏(四)——实现后台管理系统(2)数值配置的增删查改
来源:cnblogs  作者:丶谦信  时间:2019/7/10 9:23:56  对本文有异议

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

一、数据访问层的实现

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

  1. package com.idlewow.map.model;
  2. import com.idlewow.common.model.BaseModel;
  3. import lombok.Data;
  4. import java.io.Serializable;
  5. @Data
  6. public class WowMap extends BaseModel implements Serializable {
  7. private String name;
  8. private Integer occupy;
  9. private String description;
  10. }

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

  1. package com.idlewow.map.mapper;
  2. import com.idlewow.map.model.WowMap;
  3. import com.idlewow.query.model.WowMapQueryParam;
  4. import java.util.List;
  5. public interface WowMapMapper {
  6. int insert(WowMap wowMap);
  7. int batchInsert(List<WowMap> list);
  8. int update(WowMap levelProp);
  9. int delete(String id);
  10. WowMap find(String id);
  11. List<WowMap> list(WowMapQueryParam queryParam);
  12. int count(WowMapQueryParam queryParam);
  13. }

  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>
WowMapMapper.xml

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

  1. package com.idlewow.map.manager;
  2. import com.idlewow.common.model.PageList;
  3. import com.idlewow.map.mapper.WowMapMapper;
  4. import com.idlewow.map.model.WowMap;
  5. import com.idlewow.query.model.WowMapQueryParam;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.stereotype.Component;
  8. import java.util.List;
  9. @Component
  10. public class WowMapManager {
  11. @Autowired
  12. WowMapMapper wowMapMapper;
  13. public void insert(WowMap wowMap) {
  14. int effected = wowMapMapper.insert(wowMap);
  15. if (effected == 0) {
  16. throw new RuntimeException("sql effected 0 rows");
  17. }
  18. }
  19. public void batchInsert(List<WowMap> list) {
  20. int splitSize = 100;
  21. int index = 0;
  22. int total = list.size();
  23. while (index <= total) {
  24. int end = index + splitSize;
  25. if (end > total) {
  26. end = total;
  27. }
  28. List<WowMap> sublist = list.subList(index, end);
  29. int effected = wowMapMapper.batchInsert(sublist);
  30. if (effected == 0) {
  31. throw new RuntimeException("sql effected 0 rows");
  32. }
  33. index += splitSize;
  34. }
  35. }
  36. public void update(WowMap t) {
  37. int effected = wowMapMapper.update(t);
  38. if (effected == 0) {
  39. throw new RuntimeException("sql effected 0 rows");
  40. }
  41. }
  42. public void delete(String id) {
  43. int effected = wowMapMapper.delete(id);
  44. if (effected == 0) {
  45. throw new RuntimeException("sql effected 0 rows");
  46. }
  47. }
  48. public WowMap find(String id) {
  49. WowMap wowMap = wowMapMapper.find(id);
  50. return wowMap;
  51. }
  52. public PageList<WowMap> list(WowMapQueryParam queryParam) {
  53. PageList<WowMap> pageList = new PageList<WowMap>();
  54. int count = wowMapMapper.count(queryParam);
  55. List<WowMap> list = wowMapMapper.list(queryParam);
  56. pageList.setTotalCount(count);
  57. pageList.setData(list);
  58. pageList.setPageParam(queryParam.getPageParam());
  59. return pageList;
  60. }
  61. }

  另外,@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. import com.idlewow.common.model.CommonResult;
  3. import com.idlewow.common.model.PageList;
  4. import com.idlewow.map.manager.WowMapManager;
  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.Controller;
  9. import org.springframework.ui.Model;
  10. import org.springframework.web.bind.annotation.PathVariable;
  11. import org.springframework.web.bind.annotation.RequestBody;
  12. import org.springframework.web.bind.annotation.RequestMapping;
  13. import org.springframework.web.bind.annotation.RequestMethod;
  14. import org.springframework.web.bind.annotation.RequestParam;
  15. import org.springframework.web.bind.annotation.ResponseBody;
  16. @Controller
  17. @RequestMapping("/manage/map")
  18. public class MapController extends BaseController {
  19. @Autowired
  20. WowMapManager wowMapManager;
  21. @RequestMapping("/list")
  22. public Object list() {
  23. return "/manage/map/list";
  24. }
  25. @ResponseBody
  26. @RequestMapping(value = "/list", method = RequestMethod.POST)
  27. public Object list(@RequestParam(value = "page", defaultValue = "1") int pageIndex, @RequestParam(value = "limit", defaultValue = "10") int pageSize, WowMapQueryParam queryParam) {
  28. queryParam.setPage(pageIndex, pageSize);
  29. PageList<WowMap> pageList = wowMapManager.list(queryParam);
  30. return this.parseTable(pageList);
  31. }
  32. @RequestMapping("/add")
  33. public Object add() {
  34. return "/manage/map/add";
  35. }
  36. @ResponseBody
  37. @RequestMapping(value = "/add", method = RequestMethod.POST)
  38. public Object add(@RequestBody WowMap wowMap) {
  39. try {
  40. wowMap.setCreateUser(this.currentUserName());
  41. wowMapManager.insert(wowMap);
  42. return CommonResult.success();
  43. } catch (Exception ex) {
  44. return CommonResult.fail();
  45. }
  46. }
  47. @RequestMapping(value = "/edit/{id}", method = RequestMethod.GET)
  48. public Object edit(@PathVariable String id, Model model) {
  49. WowMap wowMap = wowMapManager.find(id);
  50. model.addAttribute(wowMap);
  51. return "/manage/map/edit";
  52. }
  53. @ResponseBody
  54. @RequestMapping(value = "/edit/{id}", method = RequestMethod.POST)
  55. public Object edit(@PathVariable String id, @RequestBody WowMap wowMap) {
  56. try {
  57. if (!id.equals(wowMap.getId())) {
  58. return CommonResult.fail("id不一致");
  59. }
  60. wowMap.setUpdateUser(this.currentUserName());
  61. wowMapManager.update(wowMap);
  62. return CommonResult.success();
  63. } catch (Exception ex) {
  64. return CommonResult.fail();
  65. }
  66. }
  67. @ResponseBody
  68. @RequestMapping(value = "/delete/{id}", method = RequestMethod.POST)
  69. public Object delete(@PathVariable String id) {
  70. try {
  71. wowMapManager.delete(id);
  72. return CommonResult.success();
  73. } catch (Exception ex) {
  74. return CommonResult.fail();
  75. }
  76. }
  77. }
MapController.java

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

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

  1. package com.idlewow.rms.vo;
  2. import lombok.Data;
  3. import java.io.Serializable;
  4. import java.util.List;
  5. @Data
  6. public class LayuiDataTable<T> implements Serializable {
  7. private Integer code;
  8. private String message;
  9. private Integer count;
  10. private List<T> data;
  11. }
LayuiDataTable.java
  1. package com.idlewow.rms.controller;
  2. import com.idlewow.admin.model.SysAdmin;
  3. import com.idlewow.common.model.PageList;
  4. import com.idlewow.rms.vo.LayuiDataTable;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import javax.servlet.http.HttpSession;
  7. public abstract class BaseController {
  8. private static final String LoginUserKey = "loginuser";
  9. @Autowired
  10. protected HttpSession httpSession;
  11. protected SysAdmin currentUser() {
  12. return (SysAdmin) httpSession.getAttribute(LoginUserKey);
  13. }
  14. protected String currentUserName() {
  15. return this.currentUser().getUsername();
  16. }
  17. protected LayuiDataTable parseTable(PageList pageList) {
  18. LayuiDataTable dataTable = new LayuiDataTable();
  19. dataTable.setMessage("读取成功");
  20. dataTable.setCode(0);
  21. dataTable.setCount(pageList.getTotalCount());
  22. dataTable.setData(pageList.getData());
  23. return dataTable;
  24. }
  25. }
BaseController.java

  写完控制器,前端页面,我们直接套用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">&#xe615;</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>
list.jsp
  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>
edit.jsp
  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>
add.jsp

  在/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">&#xe642;</i>编辑</button>' +
  19. '<button class="layui-btn-danger layui-btn layui-btn-xs" onclick="remove(this, \'' + d.id + '\')" type="button"><i class="layui-icon">&#xe640;</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. function search() {
  33. var table = layui.table;
  34. table.reload('datatable', {
  35. where: {
  36. name: $('input[name="name"]').val()
  37. },
  38. page: {
  39. curr: 1
  40. }
  41. });
  42. }
  43. function reset(){
  44. $('#queryForm').reset();
  45. }
  46. function remove(obj, id) {
  47. layer.confirm('确认要删除吗?', function () {
  48. $.ajax({
  49. url: '/manage/map/delete/' + id,
  50. type: 'post',
  51. success: function (result) {
  52. if (result.code === 1) {
  53. $(obj).parents("tr").remove();
  54. layer.msg('删除成功', {icon: 1, time: 1000});
  55. } else {
  56. layer.alert("删除失败", {icon: 5});
  57. }
  58. },
  59. error: function () {
  60. layer.alert("请求失败", {icon: 5});
  61. }
  62. });
  63. });
  64. }
list.js
  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. });
edit.js
  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. });
add.js

三、项目启动

  本次,我们修改了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. </plugins>
  14. </build>

  OK,全部搞定之后,我们运行一下,看下效果:

  

 

小结

  本章,我们初步实现了后台管理系统数据配置的增删查改,但还有很多功能不完善。

  比如,添加、编辑时的数据没有进行校验;单个录入数据太麻烦,想要通过excel批量录入;出现异常时缺乏相应的日志记录,等等。

  这些内容,我们都将在后面的章节中持续完善。

  本章源码下载地址:https://idlestudio.ctfile.com/fs/14960372-383560985

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

 

原文链接:http://www.cnblogs.com/lyosaki88/p/idlewow_4.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号