從零開始實現放置遊戲（三）：後臺管理系統搭建

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

需求分析

整個遊戲的核心玩法是放置掛機，打怪練級是核心功能，先實現一個最小可執行的DEMO，那麼可以先實現玩家和怪物掛機戰鬥這部分。像裝備、道具、掉落、隨機詞綴、組隊等功能都可以放到後面做。想實現掛機戰鬥，那麼要有一個戰鬥的邏輯模組，根據輸入的戰鬥資訊，計算出戰鬥結果，輸出給客戶端播放。整體邏輯大致如下圖：

從零開始實現放置遊戲（三）：後臺管理系統搭建

這裡，我們需要對遊戲戰鬥相關的屬性有個規劃。我們暫時規定一級屬性有力量、敏捷、智力、耐力，二級屬性有生命值、護甲、攻擊強度、法術強度、命中率、躲避率、暴擊率。一級屬性對二級屬性提供加成，二級屬性參與戰鬥邏輯計算，裝備加成既可以加一級屬性也可以加二級屬性。人物每個等級自身四圍的屬性數值是固定的。人物的戰鬥屬性由自身屬性+裝備加成+得出。怪物的屬性比較簡單，只有等級、生命值、護甲、傷害值，直接參與計算。

以上，我們需要配置人物每個等級的屬性，怪物的屬性。另外，人物和怪物都是在地圖上移動的，因此還需要配置地圖資訊。要配置這些資訊，我們就需要先搭建後臺管理系統，通過excel，把我們的數值配置匯入系統。下面，我們就開始搭建我們的rms模組。

RMS系統搭建

1.引入依賴

首先，有一些常用的工具類，外掛類，幾乎每個模組都要用到的，我們在父級節點idlewow的pom中引入：

注意：lombok是個IDE的外掛依賴，需要有一步在Idea中安裝此外掛的操作。外掛的安裝請檢視此篇：Idea外掛lombok的安裝和使用

  1. <dependencies>
  2.     <!-- 工具類 begin -->
  3.     <dependency>
  4.         <groupId>org.apache.commons</groupId>
  5.         <artifactId>commons-lang3</artifactId>
  6.         <version>3.8.1</version>
  7.     </dependency>
  8.     <!-- 工具類 end   -->
  9.     <!-- json序列化 begin -->
  10.     <dependency>
  11.         <groupId>com.alibaba</groupId>
  12.         <artifactId>fastjson</artifactId>
  13.         <version>1.2.57</version>
  14.     </dependency>
  15.     <dependency>
  16.         <groupId>com.fasterxml.jackson.core</groupId>
  17.         <artifactId>jackson-databind</artifactId>
  18.         <version>2.9.8</version>
  19.     </dependency>
  20.     <dependency>
  21.         <groupId>com.fasterxml.jackson.core</groupId>
  22.         <artifactId>jackson-core</artifactId>
  23.         <version>2.9.8</version>
  24.     </dependency>
  25.     <!-- json序列化 end -->
  26.     <!-- lombok -->
  27.     <dependency>
  28.         <groupId>org.projectlombok</groupId>
  29.         <artifactId>lombok</artifactId>
  30.         <version>1.18.6</version>
  31.         <scope>provided</scope>
  32.     </dependency>
  33. </dependencies>
複製程式碼

idlewow-core模組需要訪問資料庫，新增相關依賴：

  1. <dependency>
  2.     <groupId>org.mybatis</groupId>
  3.     <artifactId>mybatis</artifactId>
  4.     <version>3.5.1</version>
  5. </dependency>
  6. <dependency>
  7.     <groupId>mysql</groupId>
  8.     <artifactId>mysql-connector-java</artifactId>
  9.     <version>8.0.15</version>
  10. </dependency>
複製程式碼

在idlewow-rms中，我們使用springmvc+mybatis，需要新增的引用較多：

  1. <!-- spring相關 -->
  2. <dependency>
  3.     <groupId>org.springframework</groupId>
  4.     <artifactId>spring-context</artifactId>
  5.     <version>5.1.6.RELEASE</version>
  6. </dependency>
  7. <dependency>
  8.     <groupId>org.springframework</groupId>
  9.     <artifactId>spring-context-support</artifactId>
  10.     <version>5.1.6.RELEASE</version>
  11. </dependency>
  12. <dependency>
  13.     <groupId>org.springframework</groupId>
  14.     <artifactId>spring-core</artifactId>
  15.     <version>5.1.6.RELEASE</version>
  16. </dependency>
  17. <dependency>
  18.     <groupId>org.springframework</groupId>
  19.     <artifactId>spring-web</artifactId>
  20.     <version>5.1.6.RELEASE</version>
  21. </dependency>
  22. <dependency>
  23.     <groupId>org.springframework</groupId>
  24.     <artifactId>spring-webmvc</artifactId>
  25.     <version>5.1.6.RELEASE</version>
  26. </dependency>
  27. <dependency>
  28.     <groupId>org.springframework</groupId>
  29.     <artifactId>spring-aop</artifactId>
  30.     <version>5.1.6.RELEASE</version>
  31. </dependency>
  32. <dependency>
  33.     <groupId>org.springframework</groupId>
  34.     <artifactId>spring-jdbc</artifactId>
  35.     <version>5.1.6.RELEASE</version>
  36. </dependency>
  37. <dependency>
  38.     <groupId>org.springframework</groupId>
  39.     <artifactId>spring-tx</artifactId>
  40.     <version>5.1.6.RELEASE</version>
  41. </dependency>
  42. <!-- servlet相關 -->
  43. <dependency>
  44.     <groupId>javax.servlet</groupId>
  45.     <artifactId>javax.servlet-api</artifactId>
  46.     <version>4.0.1</version>
  47.     <scope>provided</scope>
  48. </dependency>
  49. <dependency>
  50.     <groupId>javax.servlet</groupId>
  51.     <artifactId>jstl</artifactId>
  52.     <version>1.2</version>
  53.     <scope>provided</scope>
  54. </dependency>
  55. <!-- AOP相關 -->
  56. <dependency>
  57.     <groupId>org.aspectj</groupId>
  58.     <artifactId>aspectjweaver</artifactId>
  59.     <version>1.9.3</version>
  60. </dependency>
  61. <!-- 資料來源相關 -->
  62. <dependency>
  63.     <groupId>org.apache.commons</groupId>
  64.     <artifactId>commons-dbcp2</artifactId>
  65.     <version>2.6.0</version>
  66. </dependency>
  67. <dependency>
  68.     <groupId>org.mybatis</groupId>
  69.     <artifactId>mybatis-spring</artifactId>
  70.     <version>2.0.1</version>
  71. </dependency>
複製程式碼

2.新增相關配置

已經引入了依賴，還有很多配置檔案需要配。

首先，我們來配置一下最基本的配置，也就是web容器的配置：web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5"
  3.          xmlns="http://java.sun.com/xml/ns/javaee"
  4.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5.          xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  7.     <display-name>IdleWow RMS</display-name>

  9.     <context-param>
  10.         <param-name>contextConfigLocation</param-name>
  11.         <param-value>classpath:spring/applicationContext.xml</param-value>
  12.     </context-param>
  13.     <listener>
  14.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  15.     </listener>
  16.     <!-- 字元轉碼過濾器 -->
  17.     <filter>
  18.         <filter-name>encodingFilter</filter-name>
  19.         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  20.         <init-param>
  21.             <param-name>encoding</param-name>
  22.             <param-value>UTF-8</param-value>
  23.         </init-param>
  24.         <init-param>
  25.             <param-name>forceEncoding</param-name>
  26.             <param-value>true</param-value>
  27.         </init-param>
  28.     </filter>
  29.     <filter-mapping>
  30.         <filter-name>encodingFilter</filter-name>
  31.         <url-pattern>/*</url-pattern>
  32.     </filter-mapping>
  33.     <!-- SpringMVC -->
  34.     <servlet>
  35.         <servlet-name>springmvc</servlet-name>
  36.         <servlet-class>org.springframework.web.servlet.DispatcherServlet
  37.         </servlet-class>
  38.         <init-param>
  39.             <param-name>contextConfigLocation</param-name>
  40.             <param-value>classpath:spring/spring-mvc.xml</param-value>
  41.         </init-param>
  42.         <load-on-startup>1</load-on-startup>
  43.     </servlet>
  44.     <servlet-mapping>
  45.         <servlet-name>springmvc</servlet-name>
  46.         <url-pattern>/</url-pattern>
  47.     </servlet-mapping>
  48.     <session-config>
  49.         <session-timeout>30</session-timeout>
  50.     </session-config>
  51. </web-app>
複製程式碼

在web.xml裡主要配置了一個spring的上下文listener，用來在啟動時，自動掃描注入；一個spring的servlet，用來實現mvc路由；還有一個字元編碼的filter，用來把請求資料轉換成utf-8編碼，防止出現亂碼。

現在我們針對web.xml中Spring的上下文listener和servlet新增單獨的配置。在resources目錄下新建spring資料夾，並新建applicationContext.xml檔案，applicationContext.xml主要配置spring需要掃描的包，並引入了資料來源的配置檔案。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.        xmlns:context="http://www.springframework.org/schema/context"
  5.        xmlns:aop="http://www.springframework.org/schema/aop"
  6.        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
  7.         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
  8.         http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">
  9.     <!-- 自動掃描bean -->
  10.     <context:component-scan base-package="com.idlewow">
  11.         <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
  12.     </context:component-scan>
  13.     <aop:aspectj-autoproxy proxy-target-class="true"></aop:aspectj-autoproxy>
  14.     <!-- 掃描屬性配置 -->
  15.     <bean id="propertyConfig" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
  16.         <property name="locations">
  17.             <list>
  18.                 <value>classpath:/properties/jdbc.properties</value>
  19.             </list>
  20.         </property>
  21.     </bean>
  22.     <!-- 非同步執行緒排程 -->
  23.     <bean id="taskExecutor" class="org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor">
  24.         <!-- 核心執行緒數 -->
  25.         <property name="corePoolSize" value="5"/>
  26.         <!-- 最大執行緒數 -->
  27.         <property name="maxPoolSize" value="50"/>
  28.         <!-- 佇列最大長度 -->
  29.         <property name="queueCapacity" value="1000"/>
  30.         <!-- 執行緒池維護執行緒所允許的空閒時間，預設為60s -->
  31.         <property name="keepAliveSeconds" value="60"/>
  32.     </bean>
  33.     <!-- 資料來源配置 -->
  34.     <import resource="classpath:spring/dataSource.xml"/>
  35. </beans>
複製程式碼

在/resources/spring路徑下，新建spring-mvc.xml檔案，主要配置mvc的路由規則，並啟動spring的mvc註解。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
  4.        xmlns:context="http://www.springframework.org/schema/context"
  5.        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
  6.             http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
  7.             http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
  8.     <context:component-scan base-package="com.idlewow.**.controller" />
  9.     <!-- 啟動mvc註解支援 -->
  10.     <mvc:annotation-driven />
  11.     <!-- 將無法mapping到Controller的path交給default servlet handler處理 -->
  12.     <mvc:default-servlet-handler/>
  13.     <!-- 檢視解析 -->
  14.     <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  15.         <property name="order" value="2"></property>
  16.         <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property>
  17.         <property name="prefix" value="/WEB-INF/views/"></property>
  18.         <property name="suffix" value=".jsp"></property>
  19.     </bean>
  20. </beans>
複製程式碼

在/resources/spring路徑下，新建dataSource.xml檔案，主要配置資料庫連線，連線池，啟動spring的事務註解。並指定mybatis需要掃描的包。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.        xmlns:tx="http://www.springframework.org/schema/tx"
  5.        xsi:schemaLocation="
  6.      http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
  7.      http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
  8.     <!-- 資料來源基本配置 -->
  9.     <bean id="basicDataSource"  class="org.apache.commons.dbcp2.BasicDataSource"  destroy-method="close" abstract="true">
  10.         <!-- 連線池啟動時的連線數 -->
  11.         <property name="initialSize" value="10" />
  12.         <!-- 連線池的最大值 -->
  13.         <property name="maxTotal" value="256" />
  14.         <!--最大空閒值 -->
  15.         <property name="maxIdle" value="20" />
  16.         <!--最小空閒值 -->
  17.         <property name="minIdle" value="10" />
  18.         <property name="validationQuery" value="select 1"/>
  19.         <property name="testOnBorrow" value="false"/>
  20.         <property name="testWhileIdle" value="true"/>
  21.         <!-- 執行判斷連線超時任務的時間間隔 -->
  22.         <property name="timeBetweenEvictionRunsMillis" value="1200000"/>
  23.         <!-- 連結超時時間 -->
  24.         <property name="minEvictableIdleTimeMillis" value="1800000"/>
  25.     </bean>
  26.     <!-- 寫庫連線 -->
  27.     <bean id="writeConn" parent="basicDataSource">
  28.         <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
  29.         <property name="url" value="${writeConn.jdbcUrl}" />
  30.         <property name="username" value="${writeConn.user}" />
  31.         <property name="password" value="${writeConn.password}" />
  32.     </bean>
  33.     <!-- 讀庫連線 -->
  34.     <bean id="readConn" parent="basicDataSource">
  35.         <property name="driverClassName" value="com.mysql.jdbc.Driver" />
  36.         <property name="url" value="${readConn.jdbcUrl}" />
  37.         <property name="username" value="${readConn.user}" />
  38.         <property name="password" value="${readConn.password}" />
  39.     </bean>
  40.     <!-- 配置spring的PlatformTransactionManager -->
  41.     <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
  42.         <property name="dataSource" ref="writeConn" />
  43.     </bean>
  44.     <!--建立一個sql會話工廠bean，指定資料來源 -->
  45.     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
  46.         <!-- 指定資料來源 -->
  47.         <property name="dataSource" ref="writeConn" />
  48.     </bean>
  49.     <!--自動掃描對映介面 -->
  50.     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
  51.         <!-- 指定sql會話工廠，在上面配置過的 -->
  52.         <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
  53.         <!-- 指定基礎包，即自動掃描com.lyosaki.dao這個包以及它的子包下的所有對映介面類 -->
  54.         <property name="basePackage" value="com.idlewow.**.mapper"></property>
  55.     </bean>
  56.     <!-- 開啟事務控制的註解支援 -->
  57.     <tx:annotation-driven />
  58. </beans>
複製程式碼

在resources目錄下，新建properties資料夾，並新建檔案jdbc.properties。具體定義了資料庫連線的賬號、密碼等，供dataSource.xml使用。

  1. writeConn.jdbcUrl=jdbc:mysql://localhost:3306/idlewow?useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&serverTimezone=UTC
  2. writeConn.user=admin
  3. writeConn.password=123456

  5. readConn.jdbcUrl=jdbc:mysql://localhost:3306/idlewow?useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&flag=readonly&serverTimezone=UTC
  6. readConn.user=admin
  7. 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，後面凡是資料庫的實體類，均需繼承此類。

  1. package com.idlewow.common.model;

  3. import lombok.Data;

  5. import java.io.Serializable;
  6. import java.util.Date;

  8. @Data
  9. public abstract class BaseModel implements Serializable {
  10.     /**
  11.      * 主鍵ID
  12.      */
  13.     private String id;
  14.     /**
  15.      * 建立人
  16.      */
  17.     private String createUser;
  18.     /**
  19.      * 修改人
  20.      */
  21.     private String updateUser;
  22.     /**
  23.      * 建立時間
  24.      */
  25.     private Date createTime;
  26.     /**
  27.      * 修改時間
  28.      */
  29.     private Date updateTime;
  30.     /**
  31.      * 是否刪除 0-否 1-是
  32.      */
  33.     private Integer isDelete;
  34.     /**
  35.      * 版本號
  36.      */
  37.     private Integer version;
  38. }
複製程式碼

另外，再facade模組中，新建一個包com.idlewow.admin.model，並新增管理員類SysAdmin，

  1. package com.idlewow.admin.model;

  3. import com.idlewow.common.model.BaseModel;
  4. import lombok.Data;

  6. @Data
  7. public class SysAdmin extends BaseModel {
  8.     private String username;
  9.     private String password;
  10. }
複製程式碼


在rms模組中，新建包com.idlewow.rms.controller,並新建一個登陸認證的controller,在這裡，我們直接寫死賬號admin可登陸，並自動新增密碼123456，方便開發，

  1. 1 package com.idlewow.rms.controller;
  2. 2
  3. 3 import com.alibaba.fastjson.JSONObject;
  4. 4 import com.idlewow.admin.model.SysAdmin;
  5. 5 import org.apache.commons.lang3.StringUtils;
  6. 6 import org.springframework.beans.factory.annotation.Autowired;
  7. 7 import org.springframework.stereotype.Controller;
  8. 8 import org.springframework.web.bind.annotation.RequestMapping;
  9. 9 import org.springframework.web.bind.annotation.ResponseBody;
  10. 10
  11. 11 import javax.servlet.http.HttpSession;
  12. 12
  13. 13 @Controller
  14. 14 @RequestMapping("/authorize")
  15. 15 public class AuthorizeController {
  16. 16     @Autowired
  17. 17     HttpSession httpSession;
  18. 18
  19. 19     @ResponseBody
  20. 20     @RequestMapping("/login")
  21. 21     public Object longin(SysAdmin sysAdmin) {
  22. 22         String userName = sysAdmin.getUsername();
  23. 23         String password = sysAdmin.getPassword();
  24. 24         if (userName.equalsIgnoreCase("admin")) {
  25. 25             userName = "admin";
  26. 26             password = "123456";
  27. 27         }
  28. 28
  29. 29         JSONObject jsonObject = new JSONObject();
  30. 30         //驗證使用者名稱和密碼不能為空
  31. 31         if (StringUtils.isBlank(userName) || StringUtils.isBlank(password)) {
  32. 32             jsonObject.put("status", false);
  33. 33             jsonObject.put("msg", "使用者名稱和密碼不能為空");
  34. 34             return jsonObject.toJSONString();
  35. 35         }
  36. 36
  37. 37         httpSession.setAttribute("loginuser", sysAdmin);
  38. 38         jsonObject.put("status", true);
  39. 39         jsonObject.put("msg", "登入成功");
  40. 40         return jsonObject;
  41. 41     }
  42. 42 }
複製程式碼

在webapp目錄下，新增login.html登陸頁面，這裡直接使用xadmin提供的模板，對js稍作改動，

  1. 1 <!doctype html>
  2. 2 <html class="x-admin-sm">
  3. 3 <head>
  4. 4     <meta charset="UTF-8">
  5. 5     <title>後臺登入</title>
  6. 6     <meta name="renderer" content="webkit|ie-comp|ie-stand">
  7. 7     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. 8     <meta name="viewport"
  9. 9           content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  10. 10     <meta http-equiv="Cache-Control" content="no-siteapp"/>
  11. 11     <link rel="stylesheet" href="/css/font.css">
  12. 12     <link rel="stylesheet" href="/css/login.css">
  13. 13     <link rel="stylesheet" href="/css/xadmin.css">
  14. 14     <script type="text/javascript" src="/lib/layui/layui.js"></script>
  15. 15     <script type="text/javascript" src="/js/jquery.min.js"></script>
  16. 16 </head>
  17. 17 <body class="login-bg">
  18. 18
  19. 19 <div class="login layui-anim layui-anim-up">
  20. 20     <div class="message">idlewow管理登入</div>
  21. 21     <div id="darkbannerwrap"></div>
  22. 22
  23. 23     <form id="login-form" method="post" class="layui-form">
  24. 24         <input name="username" placeholder="使用者名稱" type="text" lay-verify="required" class="layui-input"
  25. 25                value="admin">
  26. 26         <hr class="hr15">
  27. 27         <input name="password" lay-verify="required" placeholder="密碼" type="password" class="layui-input">
  28. 28         <hr class="hr15">
  29. 29         <input value="登入" lay-submit lay-filter="login" style="width:100%;" type="submit" id="loginBtn">
  30. 30         <hr class="hr20">
  31. 31     </form>
  32. 32 </div>
  33. 33
  34. 34 <script>
  35. 35     $(function () {
  36. 36         layui.use(['form', 'jquery'], function () {
  37. 37             var form = layui.form;
  38. 38             form.on('submit(login)', function (data) {
  39. 39                 $('#loginBtn').attr('disabled', "true");
  40. 40                 $.post('/authorize/login', $('#login-form').serialize(), function (rsp) {
  41. 41                     if (rsp.status) {
  42. 42                         window.location.href = "index.jsp";
  43. 43                     } else {
  44. 44                         alert(rsp.msg);
  45. 45                         $('#loginBtn').removeAttr("disabled");
  46. 46                     }
  47. 47                 }, 'JSON').fail(function () {
  48. 48                     alert('系統錯誤！');
  49. 49                     $('#loginBtn').removeAttr("disabled");
  50. 50                 });
  51. 51             });
  52. 52         });
  53. 53     })
  54. 54 </script>
  55. 55 </body>
  56. 56 </html>
複製程式碼

在webapp目錄下，新增authorize.jsp，用來驗證身份，後面所有需要登陸的頁面，均需引用此頁面，

  1. 1 <%@ page import="com.idlewow.admin.model.SysAdmin" %>
  2. 2 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. 3 <%
  4. 4     if (session.getAttribute("loginuser") == null) {
  5. 5         response.sendRedirect("login.html");
  6. 6         return;
  7. 7     }
  8. 8
  9. 9     SysAdmin sysAdmin = (SysAdmin)session.getAttribute("loginuser");
  10. 10     String path = request.getContextPath();
  11. 11     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  12. 12 %>
複製程式碼


在webapp目錄下，新增index.jsp，作為登陸成功後的跳轉首頁，這個頁面也直接使用xadmin提供的模板，

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@ include data-original="/authorize.jsp" %>
  3. <!DOCTYPE html>
  4. <html class="x-admin-sm">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>idlewow</title>
  8.     <meta name="renderer" content="webkit|ie-comp|ie-stand">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10.     <meta name="viewport"
  11.           content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  12.     <meta http-equiv="Cache-Control" content="no-siteapp"/>
  13.     <link rel="stylesheet" href="<%=path%>/css/font.css">
  14.     <link rel="stylesheet" href="<%=path%>/css/xadmin.css">
  15.     <script type="text/javascript" src="<%=path%>/lib/layui/layui.js"></script>
  16.     <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
  17. </head>
  18. <body class="index">
  19. <!-- 頂部開始 -->
  20. <div class="container">
  21.     <div class="logo">
  22.         <a href="./index.jsp">Idle WOW</a></div>
  23.     <div class="left_open">
  24.         <a><i title="展開左側欄" class="iconfont"></i></a>
  25.     </div>
  26.     <ul class="layui-nav left fast-add" lay-filter="">
  27.         <li class="layui-nav-item">
  28.             <a href="javascript:;">+新增</a>
  29.             <dl class="layui-nav-child">
  30.                 <!-- 二級選單 -->
  31.                 <dd>
  32.                     <a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)">
  33.                         <i class="iconfont"></i>彈出最大化</a></dd>
  34.                 <dd>
  35.                     <a onclick="xadmin.open('彈出自動寬高','http://www.baidu.com')">
  36.                         <i class="iconfont"></i>彈出自動寬高</a></dd>
  37.                 <dd>
  38.                     <a onclick="xadmin.open('彈出指定寬高','http://www.baidu.com',500,300)">
  39.                         <i class="iconfont"></i>彈出指定寬高</a></dd>
  40.                 <dd>
  41.                     <a onclick="xadmin.add_tab('在tab開啟','member-list.html')">
  42.                         <i class="iconfont"></i>在tab開啟</a></dd>
  43.                 <dd>
  44.                     <a onclick="xadmin.add_tab('在tab開啟重新整理','member-del.html',true)">
  45.                         <i class="iconfont"></i>在tab開啟重新整理</a></dd>
  46.             </dl>
  47.         </li>
  48.     </ul>
  49.     <ul class="layui-nav right" lay-filter="">
  50.         <li class="layui-nav-item">
  51.             <a href="javascript:;">admin</a>
  52.             <dl class="layui-nav-child">
  53.                 <!-- 二級選單 -->
  54.                 <dd>
  55.                     <a onclick="xadmin.open('個人資訊','http://www.baidu.com')">個人資訊</a></dd>
  56.                 <dd>
  57.                     <a onclick="xadmin.open('切換帳號','http://www.baidu.com')">切換帳號</a></dd>
  58.                 <dd>
  59.                     <a href="./login.html">退出</a></dd>
  60.             </dl>
  61.         </li>
  62.         <li class="layui-nav-item to-index">
  63.             <a href="/">前臺首頁</a></li>
  64.     </ul>
  65. </div>
  66. <!-- 頂部結束 -->
  67. <!-- 中部開始 -->
  68. <!-- 左側選單開始 -->
  69. <div class="left-nav">
  70.     <div id="side-nav">
  71.         <ul id="nav">
  72.             <li>
  73.                 <a href="javascript:;">
  74.                     <i class="iconfont left-nav-li" lay-tips="會員管理"></i>
  75.                     <cite>會員管理</cite>
  76.                     <i class="iconfont nav_right"></i></a>
  77.                 <ul class="sub-menu">
  78.                     <li>
  79.                         <a onclick="xadmin.add_tab('統計頁面','welcome1.html')">
  80.                             <i class="iconfont"></i>
  81.                             <cite>統計頁面</cite></a>
  82.                     </li>
  83.                     <li>
  84.                         <a onclick="xadmin.add_tab('會員列表(靜態表格)','member-list.html')">
  85.                             <i class="iconfont"></i>
  86.                             <cite>會員列表(靜態表格)</cite></a>
  87.                     </li>
  88.                     <li>
  89.                         <a onclick="xadmin.add_tab('會員列表(動態表格)','member-list1.html',true)">
  90.                             <i class="iconfont"></i>
  91.                             <cite>會員列表(動態表格)</cite></a>
  92.                     </li>
  93.                     <li>
  94.                         <a onclick="xadmin.add_tab('會員刪除','member-del.html')">
  95.                             <i class="iconfont"></i>
  96.                             <cite>會員刪除</cite></a>
  97.                     </li>
  98.                     <li>
  99.                         <a href="javascript:;">
  100.                             <i class="iconfont"></i>
  101.                             <cite>會員管理</cite>
  102.                             <i class="iconfont nav_right"></i></a>
  103.                         <ul class="sub-menu">
  104.                             <li>
  105.                                 <a onclick="xadmin.add_tab('會員刪除','member-del.html')">
  106.                                     <i class="iconfont"></i>
  107.                                     <cite>會員刪除</cite></a>
  108.                             </li>
  109.                             <li>
  110.                                 <a onclick="xadmin.add_tab('等級管理','member-list1.html')">
  111.                                     <i class="iconfont"></i>
  112.                                     <cite>等級管理</cite></a>
  113.                             </li>
  114.                         </ul>
  115.                     </li>
  116.                 </ul>
  117.             </li>
  118.             <li>
  119.                 <a href="javascript:;">
  120.                     <i class="iconfont left-nav-li" lay-tips="訂單管理"></i>
  121.                     <cite>訂單管理</cite>
  122.                     <i class="iconfont nav_right"></i></a>
  123.                 <ul class="sub-menu">
  124.                     <li>
  125.                         <a onclick="xadmin.add_tab('訂單列表','order-list.html')">
  126.                             <i class="iconfont"></i>
  127.                             <cite>訂單列表</cite></a>
  128.                     </li>
  129.                     <li>
  130.                         <a onclick="xadmin.add_tab('訂單列表1','order-list1.html')">
  131.                             <i class="iconfont"></i>
  132.                             <cite>訂單列表1</cite></a>
  133.                     </li>
  134.                 </ul>
  135.             </li>
  136.             <li>
  137.                 <a href="javascript:;">
  138.                     <i class="iconfont left-nav-li" lay-tips="分類管理"></i>
  139.                     <cite>分類管理</cite>
  140.                     <i class="iconfont nav_right"></i></a>
  141.                 <ul class="sub-menu">
  142.                     <li>
  143.                         <a onclick="xadmin.add_tab('多級分類','cate.html')">
  144.                             <i class="iconfont"></i>
  145.                             <cite>多級分類</cite></a>
  146.                     </li>
  147.                 </ul>
  148.             </li>
  149.             <li>
  150.                 <a href="javascript:;">
  151.                     <i class="iconfont left-nav-li" lay-tips="城市聯動"></i>
  152.                     <cite>城市聯動</cite>
  153.                     <i class="iconfont nav_right"></i></a>
  154.                 <ul class="sub-menu">
  155.                     <li>
  156.                         <a onclick="xadmin.add_tab('三級地區聯動','city.html')">
  157.                             <i class="iconfont"></i>
  158.                             <cite>三級地區聯動</cite></a>
  159.                     </li>
  160.                 </ul>
  161.             </li>
  162.             <li>
  163.                 <a href="javascript:;">
  164.                     <i class="iconfont left-nav-li" lay-tips="管理員管理"></i>
  165.                     <cite>管理員管理</cite>
  166.                     <i class="iconfont nav_right"></i></a>
  167.                 <ul class="sub-menu">
  168.                     <li>
  169.                         <a onclick="xadmin.add_tab('管理員列表','admin-list.html')">
  170.                             <i class="iconfont"></i>
  171.                             <cite>管理員列表</cite></a>
  172.                     </li>
  173.                     <li>
  174.                         <a onclick="xadmin.add_tab('角色管理','admin-role.html')">
  175.                             <i class="iconfont"></i>
  176.                             <cite>角色管理</cite></a>
  177.                     </li>
  178.                     <li>
  179.                         <a onclick="xadmin.add_tab('許可權分類','admin-cate.html')">
  180.                             <i class="iconfont"></i>
  181.                             <cite>許可權分類</cite></a>
  182.                     </li>
  183.                     <li>
  184.                         <a onclick="xadmin.add_tab('許可權管理','admin-rule.html')">
  185.                             <i class="iconfont"></i>
  186.                             <cite>許可權管理</cite></a>
  187.                     </li>
  188.                 </ul>
  189.             </li>
  190.             <li>
  191.                 <a href="javascript:;">
  192.                     <i class="iconfont left-nav-li" lay-tips="系統統計"></i>
  193.                     <cite>系統統計</cite>
  194.                     <i class="iconfont nav_right"></i></a>
  195.                 <ul class="sub-menu">
  196.                     <li>
  197.                         <a onclick="xadmin.add_tab('拆線圖','echarts1.html')">
  198.                             <i class="iconfont"></i>
  199.                             <cite>拆線圖</cite></a>
  200.                     </li>
  201.                     <li>
  202.                         <a onclick="xadmin.add_tab('拆線圖','echarts2.html')">
  203.                             <i class="iconfont"></i>
  204.                             <cite>拆線圖</cite></a>
  205.                     </li>
  206.                     <li>
  207.                         <a onclick="xadmin.add_tab('地圖','echarts3.html')">
  208.                             <i class="iconfont"></i>
  209.                             <cite>地圖</cite></a>
  210.                     </li>
  211.                     <li>
  212.                         <a onclick="xadmin.add_tab('餅圖','echarts4.html')">
  213.                             <i class="iconfont"></i>
  214.                             <cite>餅圖</cite></a>
  215.                     </li>
  216.                     <li>
  217.                         <a onclick="xadmin.add_tab('雷達圖','echarts5.html')">
  218.                             <i class="iconfont"></i>
  219.                             <cite>雷達圖</cite></a>
  220.                     </li>
  221.                     <li>
  222.                         <a onclick="xadmin.add_tab('k線圖','echarts6.html')">
  223.                             <i class="iconfont"></i>
  224.                             <cite>k線圖</cite></a>
  225.                     </li>
  226.                     <li>
  227.                         <a onclick="xadmin.add_tab('熱力圖','echarts7.html')">
  228.                             <i class="iconfont"></i>
  229.                             <cite>熱力圖</cite></a>
  230.                     </li>
  231.                     <li>
  232.                         <a onclick="xadmin.add_tab('儀表圖','echarts8.html')">
  233.                             <i class="iconfont"></i>
  234.                             <cite>儀表圖</cite></a>
  235.                     </li>
  236.                 </ul>
  237.             </li>
  238.             <li>
  239.                 <a href="javascript:;">
  240.                     <i class="iconfont left-nav-li" lay-tips="圖示字型"></i>
  241.                     <cite>圖示字型</cite>
  242.                     <i class="iconfont nav_right"></i></a>
  243.                 <ul class="sub-menu">
  244.                     <li>
  245.                         <a onclick="xadmin.add_tab('圖示對應字型','unicode.html')">
  246.                             <i class="iconfont"></i>
  247.                             <cite>圖示對應字型</cite></a>
  248.                     </li>
  249.                 </ul>
  250.             </li>
  251.             <li>
  252.                 <a href="javascript:;">
  253.                     <i class="iconfont left-nav-li" lay-tips="其它頁面"></i>
  254.                     <cite>其它頁面</cite>
  255.                     <i class="iconfont nav_right"></i></a>
  256.                 <ul class="sub-menu">
  257.                     <li>
  258.                         <a href="login.html" target="_blank">
  259.                             <i class="iconfont"></i>
  260.                             <cite>登入頁面</cite></a>
  261.                     </li>
  262.                     <li>
  263.                         <a onclick="xadmin.add_tab('錯誤頁面','error.html')">
  264.                             <i class="iconfont"></i>
  265.                             <cite>錯誤頁面</cite></a>
  266.                     </li>
  267.                     <li>
  268.                         <a onclick="xadmin.add_tab('示例頁面','demo.html')">
  269.                             <i class="iconfont"></i>
  270.                             <cite>示例頁面</cite></a>
  271.                     </li>
  272.                     <li>
  273.                         <a onclick="xadmin.add_tab('更新日誌','log.html')">
  274.                             <i class="iconfont"></i>
  275.                             <cite>更新日誌</cite></a>
  276.                     </li>
  277.                 </ul>
  278.             </li>
  279.             <li>
  280.                 <a href="javascript:;">
  281.                     <i class="iconfont left-nav-li" lay-tips="第三方元件"></i>
  282.                     <cite>layui第三方元件</cite>
  283.                     <i class="iconfont nav_right"></i></a>
  284.                 <ul class="sub-menu">
  285.                     <li>
  286.                         <a onclick="xadmin.add_tab('滑塊驗證','https://fly.layui.com/extend/sliderVerify/')" target="">
  287.                             <i class="iconfont"></i>
  288.                             <cite>滑塊驗證</cite></a>
  289.                     </li>
  290.                     <li>
  291.                         <a onclick="xadmin.add_tab('富文字編輯器','https://fly.layui.com/extend/layedit/')">
  292.                             <i class="iconfont"></i>
  293.                             <cite>富文字編輯器</cite></a>
  294.                     </li>
  295.                     <li>
  296.                         <a onclick="xadmin.add_tab('eleTree 樹元件','https://fly.layui.com/extend/eleTree/')">
  297.                             <i class="iconfont"></i>
  298.                             <cite>eleTree 樹元件</cite></a>
  299.                     </li>
  300.                     <li>
  301.                         <a onclick="xadmin.add_tab('圖片擷取','https://fly.layui.com/extend/croppers/')">
  302.                             <i class="iconfont"></i>
  303.                             <cite>圖片擷取</cite></a>
  304.                     </li>
  305.                     <li>
  306.                         <a onclick="xadmin.add_tab('formSelects 4.x 多選框','https://fly.layui.com/extend/formSelects/')">
  307.                             <i class="iconfont"></i>
  308.                             <cite>formSelects 4.x 多選框</cite></a>
  309.                     </li>
  310.                     <li>
  311.                         <a onclick="xadmin.add_tab('Magnifier 放大鏡','https://fly.layui.com/extend/Magnifier/')">
  312.                             <i class="iconfont"></i>
  313.                             <cite>Magnifier 放大鏡</cite></a>
  314.                     </li>
  315.                     <li>
  316.                         <a onclick="xadmin.add_tab('notice 通知控制元件','https://fly.layui.com/extend/notice/')">
  317.                             <i class="iconfont"></i>
  318.                             <cite>notice 通知控制元件</cite></a>
  319.                     </li>
  320.                 </ul>
  321.             </li>
  322.         </ul>
  323.     </div>
  324. </div>
  325. <!-- <div class="x-slide_left"></div> -->
  326. <!-- 左側選單結束 -->
  327. <!-- 右側主體開始 -->
  328. <div class="page-content">
  329.     <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
  330.         <ul class="layui-tab-title">
  331.             <li class="home">
  332.                 <i class="layui-icon"></i>歡迎
  333.             </li>
  334.         </ul>
  335.         <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
  336.             <dl>
  337.                 <dd data-type="this">關閉當前</dd>
  338.                 <dd data-type="other">關閉其它</dd>
  339.                 <dd data-type="all">關閉全部</dd>
  340.             </dl>
  341.         </div>
  342.         <div class="layui-tab-content">
  343.             <div class="layui-tab-item layui-show">
  344.                 <iframe src='/welcome.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
  345.             </div>
  346.         </div>
  347.         <div id="tab_show"></div>
  348.     </div>
  349. </div>
  350. <div class="page-content-bg"></div>
  351. </body>
  352. </html>
複製程式碼


4.專案啟動

這裡，為了方便快捷，我們使用maven外掛啟動，在rms的pom中新增build節點如下，指定我們使用maven的tomcat7外掛啟動，好處是啟動、熱更新比較快，不用單獨下載tocmat，缺點是內建的tomcat版本較低是7.0.47，並且不能調整。

  1. <build>
  2.         <plugins>
  3.             <plugin>
  4.                 <groupId>org.apache.tomcat.maven</groupId>
  5.                 <artifactId>tomcat7-maven-plugin</artifactId>
  6.                 <version>2.2</version>
  7.                 <configuration>
  8.                     <uriEncoding>UTF-8</uriEncoding>
  9.                     <port>20020</port>
  10.                     <path>/</path>
  11.                 </configuration>
  12.             </plugin>
  13.             <plugin>
  14.                 <groupId>org.apache.maven.plugins</groupId>
  15.                 <artifactId>maven-war-plugin</artifactId>
  16.                 <version>2.6</version>
  17.             </plugin>
  18.         </plugins>
  19.     </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。

相關閱讀：
從零開始實現放置遊戲（一）：準備工作
從零開始實現放置遊戲（二）：整體框架搭建

作者：丶謙信
部落格地址：https://www.cnblogs.com/lyosaki88/p/idlewow_3.html

相關文章