从零开始实现放置游戏(三)——实现后台管理系统(1)后台管理系统搭建

时间:2024-01-24 20:08:06

  上一章已经把整体的代码框架搭建完毕。然而整个游戏的功能非常的多,这就要求我们必须思路清晰,把所有功能依次分解开,逐步实现。

需求分析

  整个游戏的核心玩法是放置挂机,打怪练级是核心功能,先实现一个最小可运行的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的pom.xml

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

在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>
pom.xml

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

  在 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>
applicationContext.xml

  在/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>
spring-mvc.xml

  在/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>
dataSource.xml

  在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
jdbc.properties

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;
}
BaseModel.java

  另外,再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;
}
SysAdmin.java

  在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 }
AuthorizeController

  在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>
login.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 %>
authorize.jsp

  在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">&#xe699;</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">&#xe6a2;</i>弹出最大化</a></dd>
                <dd>
                    <a onclick="xadmin.open(\'弹出自动宽高\',\'http://www.baidu.com\')">
                        <i class="iconfont">&#xe6a8;</i>弹出自动宽高</a></dd>
                <dd>
                    <a onclick="xadmin.open(\'弹出指定宽高\',\'http://www.baidu.com\',500,300)">
                        <i class="iconfont">&#xe6a8;</i>弹出指定宽高</a></dd>
                <dd>
                    <a onclick="xadmin.add_tab(\'在tab打开\',\'member-list.html\')">
                        <i class="iconfont">&#xe6b8;</i>在tab打开</a></dd>
                <dd>
                    <a onclick="xadmin.add_tab(\'在tab打开刷新\',\'member-del.html\',true)">
                        <i class="iconfont">&#xe6b8;</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="会员管理">&#xe6b8;</i>
                    <cite>会员管理</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'统计页面\',\'welcome1.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>统计页面</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'会员列表(静态表格)\',\'member-list.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>会员列表(静态表格)</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'会员列表(动态表格)\',\'member-list1.html\',true)">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>会员列表(动态表格)</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'会员删除\',\'member-del.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>会员删除</cite></a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont">&#xe70b;</i>
                            <cite>会员管理</cite>
                            <i class="iconfont nav_right">&#xe697;</i></a>
                        <ul class="sub-menu">
                            <li>
                                <a onclick="xadmin.add_tab(\'会员删除\',\'member-del.html\')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>会员删除</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab(\'等级管理\',\'member-list1.html\')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>等级管理</cite></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="订单管理">&#xe723;</i>
                    <cite>订单管理</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'订单列表\',\'order-list.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>订单列表</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'订单列表1\',\'order-list1.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>订单列表1</cite></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="分类管理">&#xe723;</i>
                    <cite>分类管理</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'多级分类\',\'cate.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>多级分类</cite></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="城市联动">&#xe723;</i>
                    <cite>城市联动</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'三级地区联动\',\'city.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>三级地区联动</cite></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="管理员管理">&#xe726;</i>
                    <cite>管理员管理</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'管理员列表\',\'admin-list.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>管理员列表</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'角色管理\',\'admin-role.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>角色管理</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'权限分类\',\'admin-cate.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>权限分类</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'权限管理\',\'admin-rule.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>权限管理</cite></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="系统统计">&#xe6ce;</i>
                    <cite>系统统计</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'拆线图\',\'echarts1.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>拆线图</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'拆线图\',\'echarts2.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>拆线图</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'地图\',\'echarts3.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>地图</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'饼图\',\'echarts4.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>饼图</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'雷达图\',\'echarts5.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>雷达图</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'k线图\',\'echarts6.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>k线图</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'热力图\',\'echarts7.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>热力图</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'仪表图\',\'echarts8.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>仪表图</cite></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="图标字体">&#xe6b4;</i>
                    <cite>图标字体</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'图标对应字体\',\'unicode.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>图标对应字体</cite></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="其它页面">&#xe6b4;</i>
                    <cite>其它页面</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a href="login.html" target="_blank">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>登录页面</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'错误页面\',\'error.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>错误页面</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'示例页面\',\'demo.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>示例页面</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'更新日志\',\'log.html\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>更新日志</cite></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont left-nav-li" lay-tips="第三方组件">&#xe6b4;</i>
                    <cite>layui第三方组件</cite>
                    <i class="iconfont nav_right">&#xe697;</i></a>
                <ul class="sub-menu">
                    <li>
                        <a onclick="xadmin.add_tab(\'滑块验证\',\'https://fly.layui.com/extend/sliderVerify/\')" target="">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>滑块验证</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'富文本编辑器\',\'https://fly.layui.com/extend/layedit/\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>富文本编辑器</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'eleTree 树组件\',\'https://fly.layui.com/extend/eleTree/\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>eleTree 树组件</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'图片截取\',\'https://fly.layui.com/extend/croppers/\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>图片截取</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'formSelects 4.x 多选框\',\'https://fly.layui.com/extend/formSelects/\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>formSelects 4.x 多选框</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'Magnifier 放大镜\',\'https://fly.layui.com/extend/Magnifier/\')">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>Magnifier 放大镜</cite></a>
                    </li>
                    <li>
                        <a onclick="xadmin.add_tab(\'notice 通知控件\',\'https://fly.layui.com/extend/notice/\')">
                            <i class="iconfont">&#xe6a7;</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">&#xe68e;</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>
index.jsp

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>
View Code

  和前面编辑打包命令类似,我们打开编译启动配置即 “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。