從零開始實現放置遊戲（十一）——實現戰鬥掛機（2）註冊登陸和遊戲主界面

　　本章主要實現註冊登陸功能和遊戲的主界面。有了遊戲的界面，大家能有更直觀的認識。

　　本章我們主要開發的是idlewow-game模塊，其實就是遊戲的客戶端展示層。因爲是放置遊戲，爲了方便，主要使用spring-mvc來開發，整個遊戲形式是類似web端的文字mud遊戲，會稍帶一些圖形圖片。當然，遊戲的客戶端可以是多種多樣的，也可以使用U3D開發成移動端或者C++/flash/silver light，開發成PC端、網頁端、微端等等形式，但需要更多的美術資源。

一、註冊登陸和角色創建

　　首先，我們把idlewow-game的框架搭建好，因爲也是spring-mvc項目，可以基本參照前面的rms模塊。各種配置，這裏就不再贅述了。可以先把源代碼下載下來，對照着看。

　　一）添加jsp頁面

　　爲了便於理解，這裏我們先添加個首頁，即登陸頁面。其實就是一個背景圖，帶上登陸輸入框和註冊、登陸按鈕。如下圖，是我從網上隨便找的一個背景圖。這裏，註冊和登陸頁面的展示，不需要經過controller做什麼處理，直接在"/webapp/"目錄下添加jsp頁面即可。代碼如下，比較簡單，注意裏面引用的css和js就不粘貼了。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath();%>
<html>
<head>
    <title>掛機魔獸</title>
    <link rel="stylesheet" href="<%=path%>/css/wow/base.css?v=0714">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <style>
        .input-wow {
            background: rgb(80, 80, 80);
            border: gray;
            border-radius: 4px;
            color: white;
        }
    </style>
</head>
<body>
<div class="bg bg-index"></div>
<div style="text-align:center; width:100%;position:relative;top:58%;">
    <form id="form-login" method="post">
        <div style="margin: 10px;">
            <input type="text" name="username" placeholder="請輸入賬號" class="input-wow"/>
        </div>
        <div style="margin-top: 50px;">
            <input type="password" name="password" placeholder="請輸入密碼" class="input-wow"/>
        </div>
        <div style="margin: 20px;">
            <button type="button" class="btn-wow" onclick="login();">登 陸</button>
            <button type="button" class="btn-wow" onclick="location.href='/register.jsp';">注 冊</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="<%=path%>/js/wow/index.js?v=0714"></script>
</body>
</html>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>註冊賬號</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
<form id="form-register" method="post">
    <div>
        <label>賬號：</label>
        <input type="text" name="username" id="username"/>
    </div>
    <div>
        <label>密碼：</label>
        <input type="password" name="password" id="password"/>
    </div>
    <div>
        <label>確認密碼：</label>
        <input type="password" name="password2" id="password2"/>
    </div>
    <div>
        <button type="button" onclick="register();">註冊</button>
        <button type="button" onclick="history.go(-1);">返回</button>
    </div>
</form>
<script type="text/javascript" src="/js/wow/register.js"></script>
</body>
</html>

　　好了，現在頁面有了，接下來，在註冊頁面點擊“註冊”和登陸頁面點擊“登陸”按鈕時，就需要controller來做後臺邏輯處理了。

　二）hessian客戶端配置

　　在添加controller前，我們先把hessian客戶端配置好。注意，在調用hessian接口的客戶端，同樣需要在pom中引用hessian的包。

　　因爲game模塊作爲遊戲的客戶端展示層，本身不訪問底層數據庫，這裏就需要調用上一章提供的hessian服務，來完成註冊和登陸功能。hessian的服務端配置上一章已經講過了，在調用時，上一章我們直接使用代碼生成代理類進行測試。實際使用時，一般只需要配置一個xml文件，就可以在項目中引用對應的對象。

　　在game模塊的"/resources/properties"目錄下，添加 hessian.properties 文件，用來存放 hessian 服務的url地址，內容如下：

　　server.url=http://localhost:20000

　　再在"/resources/spring"目錄下，添加 hessian-client.xml 文件，用來配置需要引用的接口地址（即hessian服務端暴露出的接口），內容如下：

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:util="http://www.springframework.org/schema/util"
       xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/util
        http://www.springframework.org/schema/util/spring-util.xsd">

    <util:properties location="classpath:/properties/hessian.properties" id="hessian"/>

    <bean id="userService" class="org.springframework.remoting.caucho.HessianProxyFactoryBean">
        <property name="serviceUrl" value="#{hessian['server.url']}/remoting/UserService"/>
        <property name="serviceInterface" value="com.idlewow.user.service.UserService"/>
    </bean>
    <bean id="characterService" class="org.springframework.remoting.caucho.HessianProxyFactoryBean">
        <property name="serviceUrl" value="#{hessian['server.url']}/remoting/CharacterService"/>
        <property name="serviceInterface" value="com.idlewow.character.service.CharacterService"/>
    </bean>
</beans>

　　　　然後，在spring的上下文配置文件 applicationContext.xml 中，將這段配置引入即可，即：

<beans>        
        ........
        <import resource="hessian-client.xml"/>
        ........
</beans>

全部配置完成，就可以在項目中引用並調用hessian服務了。注意，以後服務端每次添加新的接口，都需要在服務端和客戶端的配置文件添加配置。

三）添加controller

　　頁面完成後，點擊“註冊“和”登陸“按鈕時，需要後臺進行相應的邏輯處理，在spring-mvc框架下，就需要新建一個controller。

　　在com.idlewow.game.controller包下，新建一個類GameController，內容如下：

package com.idlewow.game.controller;

import com.idlewow.character.model.Character;
import com.idlewow.character.service.CharacterService;
import com.idlewow.common.model.CommonResult;
import com.idlewow.game.GameWorld;
import com.idlewow.user.model.UserAccount;
import com.idlewow.user.service.UserService;
import com.idlewow.util.cipher.MD5Util;
import org.apache.commons.lang3.StringUtils;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.List;
import java.util.regex.Pattern;

@Controller
@RequestMapping("/game")
public class GameController {
    private static final Logger logger = LogManager.getLogger(GameController.class);

    @Autowired
    UserService userService;
    @Autowired
    CharacterService characterService;
    @Autowired
    private HttpSession httpSession;
    @Autowired
    private HttpServletRequest request;

    @ResponseBody
    @RequestMapping("/register")
    public Object register(String username, String password) {
        String ip = request.getRemoteAddr();
        String regex = "[a-zA-Z0-9]{6,20}";
        if (!Pattern.matches(regex, username)) {
            return CommonResult.fail("用戶名應爲6-20位英文字母、數字");
        }

        if (!Pattern.matches(regex, password)) {
            return CommonResult.fail("密碼應爲6-20位英文字母、數字");
        }

        String cipher = MD5Util.md5(password);
        CommonResult commonResult = userService.register(username, cipher, ip);
        return commonResult;
    }

    @ResponseBody
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public Object login(String username, String password) {
        String cipher = MD5Util.md5(password);
        CommonResult commonResult = userService.login(username, cipher);
        if (commonResult.isSuccess()) {
            UserAccount userAccount = (UserAccount) commonResult.getData();
            httpSession.setAttribute(GameWorld.SK_User, userAccount);
        }

        return commonResult;
    }

    @RequestMapping("/characters")
    public Object characterList(RedirectAttributes redirectAttributes) {
        try {
            UserAccount userAccount = (UserAccount) httpSession.getAttribute(GameWorld.SK_User);
            String userId = userAccount.getId();
            CommonResult commonResult = characterService.getUserCharacters(userId);
            if (!commonResult.isSuccess()) {
                throw new Exception("獲取角色列表失敗！" + commonResult.getMessage());
            }

            List<Character> list = (List<Character>) commonResult.getData();
            request.setAttribute("characters", list);
            return "/game/characters";
        } catch (Exception ex) {
            redirectAttributes.addFlashAttribute("error", ex.getMessage());
            return "redirect:/game/error";
        }
    }

    @RequestMapping("/createChar")
    public Object createChar() {
        return "/game/createChar";
    }

    @ResponseBody
    @RequestMapping(value = "/createChar", method = RequestMethod.POST)
    public Object createChar(String name, Integer faction, Integer race, Integer job) {
        UserAccount userAccount = (UserAccount) httpSession.getAttribute(GameWorld.SK_User);
        String userId = userAccount.getId();
        if (StringUtils.isBlank(name)) {
            return CommonResult.fail("角色暱稱不能爲空！");
        }

        if (name.length() < 2 || name.length() > 10) {
            return CommonResult.fail("角色暱稱應爲 2-10 個字符！");
        }

        String pattern = "^[\\u4e00-\\u9fa5_a-zA-Z0-9]+$";
        if (!Pattern.matches(pattern, name)) {
            return CommonResult.fail("角色名稱只能包含漢字、英文字母、數字、下劃線！");
        }

        if (faction == null) {
            return CommonResult.fail("請選擇陣營！");
        }

        if (race == null) {
            return CommonResult.fail("請選擇種族！");
        }

        if (job == null) {
            return CommonResult.fail("請選擇職業！");
        }


        CommonResult commonResult = characterService.createCharacter(userId, name, faction, race, job);
        return commonResult;
    }

    @RequestMapping("/main")
    public Object main(String characterId, RedirectAttributes redirectAttributes) {
        if (characterId == null) {
            characterId = httpSession.getAttribute(GameWorld.SK_CharId).toString();
        }

        CommonResult commonResult = characterService.find(characterId);
        if (commonResult.isSuccess()) {
            Character character = (Character) commonResult.getData();
            httpSession.setAttribute(GameWorld.SK_CharId, characterId);
            request.setAttribute("character", character);
            return "/game/main";
        } else {
            redirectAttributes.addFlashAttribute("error", commonResult.getMessage());
            return "redirect:/game/error";
        }
    }

    @RequestMapping("/error")
    public Object error() {
        return "/game/error";
    }
}

GameController

　　其中，userService和characterService就是對hessian接口的引用。這裏註解使用@Autowired或者@Resource均可。具體區別可以百度一下。

    @Autowired
    UserService userService;
    @Autowired
    CharacterService characterService;

　　controller中的方法，對應提供了“註冊”、“登陸”、“獲取角色列表”、“創建角色”、“進入遊戲主界面”、“錯誤頁面”幾個功能。其中，還需要對應的創建幾個頁面，目錄結構如下圖。頁面代碼就不粘貼了，可以下載源碼查看。這裏需要注意的是，由controller路由的頁面，根目錄是"/WEB-INF/views/”，這是我們在spring-mvc.xml中的視圖解析節點配置的，屬於mvc的路由機制。而前面的index.jsp和register.jsp，是直接從文件目錄結構訪問的，未參與mvc路由。

　四）數據庫設計

　　項目中用到的sql建表語句等，都在idlewow-doc目錄下。這裏賬號表和角色表比較簡單，sql裏也有相應的註釋。這裏需要注意的是，角色表 user_character 中，有一個字段 extra_info。這個字段主要以json文本的形式存儲一些緩存數據。比如角色身上的裝備信息，角色所在的地圖，等等等等。

　　試想一下，在遊戲世界中，一個角色可能會頻繁的進行更換裝備、切換地圖等操作，這些信息都需要記錄。如果遊戲中每個角色有此類動作時，都進行更新寫庫，對數據庫會造成巨大的壓力。因此這部分數據，會在遊戲一開始時，讀取到緩存中（比如redis）。在遊戲進行時，只需要更新緩存數據。在遊戲退出時，再將緩存中的數據寫回數據庫。

二、效果演示

小結

　　本章主要實現了遊戲的主界面，但界面上的角色信息、戰鬥記錄、地圖信息及怪物信息等，目前都是靜態文本，接下來只要一點點往上添加就行了。

　　本章的代碼可能會有部分冗餘，因爲是從我已經開發好的分支上，直接拷貝過來的。有些代碼可能目前還用不到，或者後期會有改進，有些地方是我還沒想好最終會怎麼做還在思考。看代碼的時候，重點關注本章需要實現的內容就可以了，有些不合理的地方也可以自己發揮。

　　源碼下載地址：https://545c.com/file/14960372-403554557

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

　　項目交流羣：329989095

從零開始實現放置遊戲（十一）——實現戰鬥掛機（2）註冊登陸和遊戲主界面

一、註冊登陸和角色創建

一）添加jsp頁面

二）hessian客戶端配置

三）添加controller

四）數據庫設計

二、效果演示

小結

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

無限戰爭

從零開始實現放置遊戲（十七）——完結篇（附DEMO地址）

安卓開發入門（一）開發環境搭建

線上高併發應用重構（寫）填坑經驗分享（二）

線上高併發應用重構（寫）填坑經驗分享（一）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結