学习平台

AcWing SpringBoot框架课

项目设计

项目说明

本游戏是一个类似贪吃蛇的游戏，每一个对局会有两个玩家，两个玩家通过控制一条蛇向上、下、左、右四个方向行走，如果撞到自己、墙壁、敌人，则会判定失败。

每个用户也可以通过编写代码实现自己的bot（类似于像机器人），代替自己进行操作。

每局对战可以进行回放查看

项目名称

King Of Bots，简称 KOB

项目包含的模块

这里按照可能需要的页面进行分块

PK模块：匹配界面（微服务）、实况直播界面（WebSocket协议）、双人对战
对局列表模块：对局列表界面、对局录像界面
排行榜模块：Bot排行榜界面
用户中心模块：注册界面、登录界面、我的Bot界面、每个Bot的详情界面

前后端分离模式

SpringBoot实现后端
Vue3实现Web端和AcApp端
数据库使用MySQL

环境配置

配置git环境

安装Git Bash https://gitforwindows.org/
进入家目录生成密钥：执行命令ssh-keygen
在Ac Git上注册账号， Ac Git
将id_rsa.pub的内容复制到Ac Git上

创建项目后端

https://start.spring.io/ 加载慢的话，可以换成：https://start.aliyun.com

创建项目

然后在下一页面只需要选择 Web/Spring Web 和 Templa Engines/thymeleaf 两个选项。

编写类

则可以根据localhost:8080/pk/index/路径跳转至index.html页面

修改后端端口号

在application.properties文件中修改server.port=8080为server.port=3000，则访问路径变为：localhost:3000

创建项目Web端与AcApp端

vscode下载地址：https://code.visualstudio.com/
Bootstrap官网地址：https://code.visualstudio.com/
web端需要使用VSCode：https://code.visualstudio.com/
vue安装：看讲义 vue讲义

创建vue项目

创建vue 项目时，使用Power Shell进行创建，可以现在Power Sehll里进入需要创建的目录中，再打开vue ui进行项目创建。

需要创建两个前端项目：web 和 acapp

安装插件

创建好项目后，需要安装插件：

安装依赖

然后web端需要再装依赖jquery和bootstrap

运行项目

在SpringBoot中解决跨域问题

添加配置类：CorsConfig.class

package com.kob.backend.config;

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author xzt
 * @version 1.0
 * 解决springBoot跨域问题相关配置
 */
@Configuration
public class CorsConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if(origin!=null) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if(headers!=null) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }
}

Atopos's Blog

AcWing SpringBoot项目实战01