從零開始實現放置遊戲（三）——實現掛機戰鬥(1)

阿新 • • 發佈：2019-06-18

　　上一章已經把整體的程式碼框架搭建完畢。然而整個遊戲的功能非常的多，這就要求我們必須思路清晰，把所有功能依次分解開，逐步實現。

需求分析

　　整個遊戲的核心玩法是放置掛機，打怪練級是核心功能，先實現一個最小可執行的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>

　　在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

　　下面將開始實現後臺資料的配置錄入功能。主要涉及到的模組，core, facade, rms。

1元催更

從零開始實現放置遊戲（三）——實現掛機戰鬥(1)

需求分析

RMS系統搭建

1.引入依賴

2.新增相關配置

3.最簡頁面搭建

4.專案啟動

結語

從零開始實現放置遊戲（三）——實現掛機戰鬥(1)

從零開始實現放置遊戲（四）——實現掛機戰鬥（2）實現後臺數值配置

從零開始實現放置遊戲（五）——實現掛機戰鬥（3）引入日誌功能並實現切面日誌

從零開始實現放置遊戲（六）——實現掛機戰鬥（4）匯入Excel數值配置

從零開始實現放置遊戲（七）——實現掛機戰鬥（5）RMS系統後臺引數校驗

從零開始實現放置遊戲（八）——實現掛機戰鬥（6）程式碼重構

從零開始實現放置遊戲（九）——實現後臺管理系統（7）地圖選擇控制元件

從零開始實現放置遊戲（十）——實現戰鬥掛機（1）hessian服務端搭建

從零開始實現放置遊戲（十三）——實現戰鬥掛機（4）新增websocket元件

從零開始Vue專案實戰（三）-專案結構

從零開始學習PYTHON3講義（三）寫第一個程序

從零開始學Socket：（三）服務端和客戶端簡單通訊

從零開始微信機器人（三）：表情機器人的製作

從零開始實現放置遊戲（二）——框架搭建

[Golang] 從零開始寫Socket Server（5）：Server的解耦—通過Router+Controller實現邏輯分發

從零開始學_JavaScript_系列（41）——物件的擴充套件（4）擴充套件運算子三個點...

[Golang] 從零開始寫Socket Server（3）：對長、短連接的處理策略（模擬心跳）

從零開始學習OpenCL開發（一）架構

從零開始學Linux系統（一）

💒 es6 + canvas 開源蓋樓小遊戲完整代碼註釋從零教你做遊戲（一）

從零開始實現放置遊戲（三）——實現掛機戰鬥(1)

需求分析

RMS系統搭建

1.引入依賴

2.新增相關配置

3.最簡頁面搭建

4.專案啟動

結語

相關推薦