从零开始实现放置游戏（三）——实现后台管理系统（1）后台管理系统搭建
上一章已经把整体的代码框架搭建完毕。然而整个游戏的功能非常的多，这就要求我们必须思路清晰，把所有功能依次分解开，逐步实现。
需求分析
整个游戏的核心玩法是放置挂机，打怪练级是核心功能，先实现一个最小可运行的DEMO，那么可以先实现玩家和怪物挂机战斗这部分。像装备、道具、掉落、随机词缀、组队等功能都可以放到后面做。想实现挂机战斗，那么要有一个战斗的逻辑模块，根据输入的战斗信息，计算出战斗结果，输出给客户端播放。整体逻辑大致如下图：
这里，我们需要对游戏战斗相关的属性有个规划。我们暂时规定一级属性有力量、敏捷、智力、耐力，二级属性有生命值、护甲、攻击强度、法术强度、命中率、躲避率、暴击率。一级属性对二级属性提供加成，二级属性参与战斗逻辑计算，装备加成既可以加一级属性也可以加二级属性。人物每个等级自身四围的属性数值是固定的。人物的战斗属性由自身属性+装备加成+得出。怪物的属性比较简单，只有等级、生命值、护甲、伤害值，直接参与计算。
以上，我们需要配置人物每个等级的属性，怪物的属性。另外，人物和怪物都是在地图上移动的，因此还需要配置地图信息。要配置这些信息，我们就需要先搭建后台管理系统，通过excel，把我们的数值配置导入系统。下面，我们就开始搭建我们的rms模块。
RMS系统搭建
1.引入依赖
首先，有一些常用的工具类，插件类，几乎每个模块都要用到的，我们在父级节点idlewow的pom中引入：
注意：lombok是个IDE的插件依赖，需要有一步在Idea中安装此插件的操作。插件的安装请查看此篇：Idea插件lombok的安装和使用
<dependencies> <!-- 工具类 begin --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.8.1</version> </dependency> <!-- 工具类 end --> <!-- json序列化 begin --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.57</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.8</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.8</version> </dependency> <!-- json序列化 end --> <!-- lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.6</version> <scope>provided</scope> </dependency> </dependencies>
idlewow-core模块需要访问数据库，添加相关依赖：
<dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.1</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.15</version> </dependency>
在idlewow-rms中，我们使用springmvc+mybatis，需要添加的引用较多：
<!-- spring相关 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>5.1.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>5.1.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>5.1.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>5.1.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.1.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>5.1.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.1.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>5.1.6.RELEASE</version> </dependency> <!-- servlet相关 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> <scope>provided</scope> </dependency> <!-- AOP相关 --> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.9.3</version> </dependency> <!-- 数据源相关 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-dbcp2</artifactId> <version>2.6.0</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.1</version> </dependency>
2.添加相关配置
已经引入了依赖，还有很多配置文件需要配。
首先，我们来配置一下最基本的配置，也就是web容器的配置： web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name>IdleWow RMS</display-name> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/applicationContext.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 字符转码过滤器 --> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- SpringMVC --> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet </servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/spring-mvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <session-config> <session-timeout>30</session-timeout> </session-config> </web-app>
在 web.xml 里主要配置了一个spring的上下文listener，用来在启动时，自动扫描注入；一个spring的servlet，用来实现mvc路由；还有一个字符编码的filter，用来把请求数据转换成utf-8编码，防止出现乱码。
现在我们针对web.xml中Spring的上下文listener和servlet添加单独的配置。在resources目录下新建spring文件夹，并新建applicationContext.xml文件，applicationContext.xml 主要配置spring需要扫描的包，并引入了数据源的配置文件。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd"> <!-- 自动扫描bean --> <context:component-scan base-package="com.idlewow"> <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <aop:aspectj-autoproxy proxy-target-class="true"></aop:aspectj-autoproxy> <!-- 扫描属性配置 --> <bean id="propertyConfig" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"> <property name="locations"> <list> <value>classpath:/properties/jdbc.properties</value> </list> </property> </bean> <!-- 异步线程调度 --> <bean id="taskExecutor" class="org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor"> <!-- 核心线程数 --> <property name="corePoolSize" value="5"/> <!-- 最大线程数 --> <property name="maxPoolSize" value="50"/> <!-- 队列最大长度 --> <property name="queueCapacity" value="1000"/> <!-- 线程池维护线程所允许的空闲时间，默认为60s --> <property name="keepAliveSeconds" value="60"/> </bean> <!-- 数据源配置 --> <import resource="classpath:spring/dataSource.xml"/> </beans>
在/resources/spring路径下，新建spring-mvc.xml文件，主要配置mvc的路由规则，并启动spring的mvc注解。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <context:component-scan base-package="com.idlewow.**.controller" /> <!-- 启动mvc注解支持 --> <mvc:annotation-driven /> <!-- 将无法mapping到Controller的path交给default servlet handler处理 --> <mvc:default-servlet-handler/> <!-- 视图解析 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="order" value="2"></property> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property> <property name="prefix" value="/WEB-INF/views/"></property> <property name="suffix" value=".jsp"></property> </bean> </beans>
在/resources/spring路径下，新建dataSource.xml文件，主要配置数据库连接，连接池，启动spring的事务注解。并指定mybatis需要扫描的包。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd"> <!-- 数据源基本配置 --> <bean id="basicDataSource" class="org.apache.commons.dbcp2.BasicDataSource" destroy-method="close" abstract="true"> <!-- 连接池启动时的连接数 --> <property name="initialSize" value="10" /> <!-- 连接池的最大值 --> <property name="maxTotal" value="256" /> <!--最大空闲值 --> <property name="maxIdle" value="20" /> <!--最小空闲值 --> <property name="minIdle" value="10" /> <property name="validationQuery" value="select 1"/> <property name="testOnBorrow" value="false"/> <property name="testWhileIdle" value="true"/> <!-- 运行判断连接超时任务的时间间隔 --> <property name="timeBetweenEvictionRunsMillis" value="1200000"/> <!-- 链接超时时间 --> <property name="minEvictableIdleTimeMillis" value="1800000"/> </bean> <!-- 写库连接 --> <bean id="writeConn" parent="basicDataSource"> <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" /> <property name="url" value="${writeConn.jdbcUrl}" /> <property name="username" value="${writeConn.user}" /> <property name="password" value="${writeConn.password}" /> </bean> <!-- 读库连接 --> <bean id="readConn" parent="basicDataSource"> <property name="driverClassName" value="com.mysql.jdbc.Driver" /> <property name="url" value="${readConn.jdbcUrl}" /> <property name="username" value="${readConn.user}" /> <property name="password" value="${readConn.password}" /> </bean> <!-- 配置spring的PlatformTransactionManager --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="writeConn" /> </bean> <!--创建一个sql会话工厂bean，指定数据源 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 指定数据源 --> <property name="dataSource" ref="writeConn" /> </bean> <!--自动扫描映射接口 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 指定sql会话工厂，在上面配置过的 --> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> <!-- 指定基础包，即自动扫描com.lyosaki.dao这个包以及它的子包下的所有映射接口类 --> <property name="basePackage" value="com.idlewow.**.mapper"></property> </bean> <!-- 开启事务控制的注解支持 --> <tx:annotation-driven /> </beans>
在resources目录下，新建properties文件夹，并新建文件jdbc.properties。具体定义了数据库连接的账号、密码等，供dataSource.xml使用。
writeConn.jdbcUrl=jdbc:mysql://localhost:3306/idlewow?useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&serverTimezone=UTC writeConn.user=admin writeConn.password=123456 readConn.jdbcUrl=jdbc:mysql://localhost:3306/idlewow?useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&flag=readonly&serverTimezone=UTC readConn.user=admin readConn.password=123456
3.最简页面搭建
配置完毕，我们先搭建一个最简的管理员登陆页面和登陆后的首页，让整个项目能够跑起来。
这里我们直接使用一套网上开源免费的基于layui实现的前端框架xadmin，下载地址：http://x.xuebingsi.com/。下载后，把css, js, fonts, images, lib目录都拷贝到webapp目录下即可。
然后，我们写一个简单的登陆验证。这里，我规定数据库建表时，所有表均需包含id, create_user, update_user, create_time, update_time, is_delete, version几个字段。在facade模块中，新建一个包com.idlewow.common.model, 并新建一个抽象类BaseModel，后面凡是数据库的实体类，均需继承此类。
package com.idlewow.common.model; import lombok.Data; import java.io.Serializable; import java.util.Date; @Data public abstract class BaseModel implements Serializable { /** * 主键ID */ private String id; /** * 创建人 */ private String createUser; /** * 修改人 */ private String updateUser; /** * 创建时间 */ private Date createTime; /** * 修改时间 */ private Date updateTime; /** * 是否删除 0-否 1-是 */ private Integer isDelete; /** * 版本号 */ private Integer version; }
另外，再facade模块中，新建一个包com.idlewow.admin.model，并添加管理员类SysAdmin，
package com.idlewow.admin.model; import com.idlewow.common.model.BaseModel; import lombok.Data; @Data public class SysAdmin extends BaseModel { private String username; private String password; }
在rms模块中，新建包com.idlewow.rms.controller, 并新建一个登陆认证的controller, 在这里，我们直接写死账号admin可登陆，并自动添加密码123456，方便开发，
1 package com.idlewow.rms.controller; 2 3 import com.alibaba.fastjson.JSONObject; 4 import com.idlewow.admin.model.SysAdmin; 5 import org.apache.commons.lang3.StringUtils; 6 import org.springframework.beans.factory.annotation.Autowired; 7 import org.springframework.stereotype.Controller; 8 import org.springframework.web.bind.annotation.RequestMapping; 9 import org.springframework.web.bind.annotation.ResponseBody; 10 11 import javax.servlet.http.HttpSession; 12 13 @Controller 14 @RequestMapping("/authorize") 15 public class AuthorizeController { 16 @Autowired 17 HttpSession httpSession; 18 19 @ResponseBody 20 @RequestMapping("/login") 21 public Object longin(SysAdmin sysAdmin) { 22 String userName = sysAdmin.getUsername(); 23 String password = sysAdmin.getPassword(); 24 if (userName.equalsIgnoreCase("admin")) { 25 userName = "admin"; 26 password = "123456"; 27 } 28 29 JSONObject jsonObject = new JSONObject(); 30 //验证用户名和密码不能为空 31 if (StringUtils.isBlank(userName) || StringUtils.isBlank(password)) { 32 jsonObject.put("status", false); 33 jsonObject.put("msg", "用户名和密码不能为空"); 34 return jsonObject.toJSONString(); 35 } 36 37 httpSession.setAttribute("loginuser", sysAdmin); 38 jsonObject.put("status", true); 39 jsonObject.put("msg", "登录成功"); 40 return jsonObject; 41 } 42 }
在webapp目录下，添加login.html登陆页面，这里直接使用xadmin提供的模板，对js稍作改动，
1 <!doctype html> 2 <html class="x-admin-sm"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>后台登录</title> 6 <meta name="renderer" content="webkit|ie-comp|ie-stand"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta name="viewport" 9 content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/> 10 <meta http-equiv="Cache-Control" content="no-siteapp"/> 11 <link rel="stylesheet" href="/css/font.css"> 12 <link rel="stylesheet" href="/css/login.css"> 13 <link rel="stylesheet" href="/css/xadmin.css"> 14 <script type="text/javascript" src="/lib/layui/layui.js"></script> 15 <script type="text/javascript" src="/js/jquery.min.js"></script> 16 </head> 17 <body class="login-bg"> 18 19 <div class="login layui-anim layui-anim-up"> 20 <div class="message">idlewow管理登录</div> 21 <div id="darkbannerwrap"></div> 22 23 <form id="login-form" method="post" class="layui-form"> 24 <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input" 25 value="admin"> 26 <hr class="hr15"> 27 <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input"> 28 <hr class="hr15"> 29 <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit" id="loginBtn"> 30 <hr class="hr20"> 31 </form> 32 </div> 33 34 <script> 35 $(function () { 36 layui.use(['form', 'jquery'], function () { 37 var form = layui.form; 38 form.on('submit(login)', function (data) { 39 $('#loginBtn').attr('disabled', "true"); 40 $.post('/authorize/login', $('#login-form').serialize(), function (rsp) { 41 if (rsp.status) { 42 window.location.href = "index.jsp"; 43 } else { 44 alert(rsp.msg); 45 $('#loginBtn').removeAttr("disabled"); 46 } 47 }, 'JSON').fail(function () { 48 alert('系统错误！'); 49 $('#loginBtn').removeAttr("disabled"); 50 }); 51 }); 52 }); 53 }) 54 </script> 55 </body> 56 </html>
在webapp目录下，添加authorize.jsp，用来验证身份，后面所有需要登陆的页面，均需引用此页面，
1 <%@ page import="com.idlewow.admin.model.SysAdmin" %> 2 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 3 <% 4 if (session.getAttribute("loginuser") == null) { 5 response.sendRedirect("login.html"); 6 return; 7 } 8 9 SysAdmin sysAdmin = (SysAdmin)session.getAttribute("loginuser"); 10 String path = request.getContextPath(); 11 String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; 12 %>
在webapp目录下，添加index.jsp，作为登陆成功后的跳转首页，这个页面也直接使用xadmin提供的模板，
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/authorize.jsp" %> <!DOCTYPE html> <html class="x-admin-sm"> <head> <meta charset="UTF-8"> <title>idlewow</title> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <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"/> <meta http-equiv="Cache-Control" content="no-siteapp"/> <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"></script> <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script> </head> <body class="index"> <!-- 顶部开始 --> <div class="container"> <div class="logo"> <a href="./index.jsp">Idle WOW</a></div> <div class="left_open"> <a><i title="展开左侧栏" class="iconfont"></i></a> </div> <ul class="layui-nav left fast-add" lay-filter=""> <li class="layui-nav-item"> <a href="javascript:;">+新增</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd> <a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)"> <i class="iconfont"></i>弹出最大化</a></dd> <dd> <a onclick="xadmin.open('弹出自动宽高','http://www.baidu.com')"> <i class="iconfont"></i>弹出自动宽高</a></dd> <dd> <a onclick="xadmin.open('弹出指定宽高','http://www.baidu.com',500,300)"> <i class="iconfont"></i>弹出指定宽高</a></dd> <dd> <a onclick="xadmin.add_tab('在tab打开','member-list.html')"> <i class="iconfont"></i>在tab打开</a></dd> <dd> <a onclick="xadmin.add_tab('在tab打开刷新','member-del.html',true)"> <i class="iconfont"></i>在tab打开刷新</a></dd> </dl> </li> </ul> <ul class="layui-nav right" lay-filter=""> <li class="layui-nav-item"> <a href="javascript:;">admin</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd> <a onclick="xadmin.open('个人信息','http://www.baidu.com')">个人信息</a></dd> <dd> <a onclick="xadmin.open('切换帐号','http://www.baidu.com')">切换帐号</a></dd> <dd> <a href="./login.html">退出</a></dd> </dl> </li> <li class="layui-nav-item to-index"> <a href="/">前台首页</a></li> </ul> </div> <!-- 顶部结束 --> <!-- 中部开始 --> <!-- 左侧菜单开始 --> <div class="left-nav"> <div id="side-nav"> <ul id="nav"> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="会员管理"></i> <cite>会员管理</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('统计页面','welcome1.html')"> <i class="iconfont"></i> <cite>统计页面</cite></a> </li> <li> <a onclick="xadmin.add_tab('会员列表(静态表格)','member-list.html')"> <i class="iconfont"></i> <cite>会员列表(静态表格)</cite></a> </li> <li> <a onclick="xadmin.add_tab('会员列表(动态表格)','member-list1.html',true)"> <i class="iconfont"></i> <cite>会员列表(动态表格)</cite></a> </li> <li> <a onclick="xadmin.add_tab('会员删除','member-del.html')"> <i class="iconfont"></i> <cite>会员删除</cite></a> </li> <li> <a href="javascript:;"> <i class="iconfont"></i> <cite>会员管理</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('会员删除','member-del.html')"> <i class="iconfont"></i> <cite>会员删除</cite></a> </li> <li> <a onclick="xadmin.add_tab('等级管理','member-list1.html')"> <i class="iconfont"></i> <cite>等级管理</cite></a> </li> </ul> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="订单管理"></i> <cite>订单管理</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('订单列表','order-list.html')"> <i class="iconfont"></i> <cite>订单列表</cite></a> </li> <li> <a onclick="xadmin.add_tab('订单列表1','order-list1.html')"> <i class="iconfont"></i> <cite>订单列表1</cite></a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="分类管理"></i> <cite>分类管理</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('多级分类','cate.html')"> <i class="iconfont"></i> <cite>多级分类</cite></a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="城市联动"></i> <cite>城市联动</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('三级地区联动','city.html')"> <i class="iconfont"></i> <cite>三级地区联动</cite></a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="管理员管理"></i> <cite>管理员管理</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('管理员列表','admin-list.html')"> <i class="iconfont"></i> <cite>管理员列表</cite></a> </li> <li> <a onclick="xadmin.add_tab('角色管理','admin-role.html')"> <i class="iconfont"></i> <cite>角色管理</cite></a> </li> <li> <a onclick="xadmin.add_tab('权限分类','admin-cate.html')"> <i class="iconfont"></i> <cite>权限分类</cite></a> </li> <li> <a onclick="xadmin.add_tab('权限管理','admin-rule.html')"> <i class="iconfont"></i> <cite>权限管理</cite></a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="系统统计"></i> <cite>系统统计</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('拆线图','echarts1.html')"> <i class="iconfont"></i> <cite>拆线图</cite></a> </li> <li> <a onclick="xadmin.add_tab('拆线图','echarts2.html')"> <i class="iconfont"></i> <cite>拆线图</cite></a> </li> <li> <a onclick="xadmin.add_tab('地图','echarts3.html')"> <i class="iconfont"></i> <cite>地图</cite></a> </li> <li> <a onclick="xadmin.add_tab('饼图','echarts4.html')"> <i class="iconfont"></i> <cite>饼图</cite></a> </li> <li> <a onclick="xadmin.add_tab('雷达图','echarts5.html')"> <i class="iconfont"></i> <cite>雷达图</cite></a> </li> <li> <a onclick="xadmin.add_tab('k线图','echarts6.html')"> <i class="iconfont"></i> <cite>k线图</cite></a> </li> <li> <a onclick="xadmin.add_tab('热力图','echarts7.html')"> <i class="iconfont"></i> <cite>热力图</cite></a> </li> <li> <a onclick="xadmin.add_tab('仪表图','echarts8.html')"> <i class="iconfont"></i> <cite>仪表图</cite></a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="图标字体"></i> <cite>图标字体</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('图标对应字体','unicode.html')"> <i class="iconfont"></i> <cite>图标对应字体</cite></a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="其它页面"></i> <cite>其它页面</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a href="login.html" target="_blank"> <i class="iconfont"></i> <cite>登录页面</cite></a> </li> <li> <a onclick="xadmin.add_tab('错误页面','error.html')"> <i class="iconfont"></i> <cite>错误页面</cite></a> </li> <li> <a onclick="xadmin.add_tab('示例页面','demo.html')"> <i class="iconfont"></i> <cite>示例页面</cite></a> </li> <li> <a onclick="xadmin.add_tab('更新日志','log.html')"> <i class="iconfont"></i> <cite>更新日志</cite></a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont left-nav-li" lay-tips="第三方组件"></i> <cite>layui第三方组件</cite> <i class="iconfont nav_right"></i></a> <ul class="sub-menu"> <li> <a onclick="xadmin.add_tab('滑块验证','https://fly.layui.com/extend/sliderVerify/')" target=""> <i class="iconfont"></i> <cite>滑块验证</cite></a> </li> <li> <a onclick="xadmin.add_tab('富文本编辑器','https://fly.layui.com/extend/layedit/')"> <i class="iconfont"></i> <cite>富文本编辑器</cite></a> </li> <li> <a onclick="xadmin.add_tab('eleTree 树组件','https://fly.layui.com/extend/eleTree/')"> <i class="iconfont"></i> <cite>eleTree 树组件</cite></a> </li> <li> <a onclick="xadmin.add_tab('图片截取','https://fly.layui.com/extend/croppers/')"> <i class="iconfont"></i> <cite>图片截取</cite></a> </li> <li> <a onclick="xadmin.add_tab('formSelects 4.x 多选框','https://fly.layui.com/extend/formSelects/')"> <i class="iconfont"></i> <cite>formSelects 4.x 多选框</cite></a> </li> <li> <a onclick="xadmin.add_tab('Magnifier 放大镜','https://fly.layui.com/extend/Magnifier/')"> <i class="iconfont"></i> <cite>Magnifier 放大镜</cite></a> </li> <li> <a onclick="xadmin.add_tab('notice 通知控件','https://fly.layui.com/extend/notice/')"> <i class="iconfont"></i> <cite>notice 通知控件</cite></a> </li> </ul> </li> </ul> </div> </div> <!-- <div class="x-slide_left"></div> --> <!-- 左侧菜单结束 --> <!-- 右侧主体开始 --> <div class="page-content"> <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false"> <ul class="layui-tab-title"> <li class="home"> <i class="layui-icon"></i>欢迎 </li> </ul> <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right"> <dl> <dd data-type="this">关闭当前</dd> <dd data-type="other">关闭其它</dd> <dd data-type="all">关闭全部</dd> </dl> </div> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <iframe src='/welcome.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe> </div> </div> <div id="tab_show"></div> </div> </div> <div class="page-content-bg"></div> </body> </html>
4.项目启动
这里，为了方便快捷，我们使用maven插件启动，在rms的pom中添加build节点如下，指定我们使用maven的tomcat7插件启动，好处是启动、热更新比较快，不用单独下载tocmat，缺点是内置的tomcat版本较低是7.0.47，并且不能调整。
<build> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> <configuration> <uriEncoding>UTF-8</uriEncoding> <port>20020</port> <path>/</path> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.6</version> </plugin> </plugins> </build>
和前面编辑打包命令类似，我们打开编译启动配置即 “Build -- > Edit Confiruations", 新建一个maven项，目录选择rms模块路径，命令输入：tomcat7:run，如下图：
点击OK后，使用此项配置，启动RMS项目即可。运行效果如图：
结语
本章对RMS模块进行了配置搭建，使整个网站能够运行起来。
本章源码下载地址：https://idlestudio.ctfile.com/fs/14960372-383401935
本文原文地址:https://www.cnblogs.com/lyosaki88/p/idlewow_3.html
下面将开始实现后台数据的配置录入功能。主要涉及到的模块，core, facade, rms。
