项目设计

名称：KOB

项目包含的模块

PK模块：匹配界面（微服务）、实况直播界面（WebSocket协议）
对局列表模块：对局列表界面、对局录像界面
排行榜模块：Bot排行榜界面
用户中心模块：注册界面、登录界面、我的Bot界面、每个Bot的详情界面
前后端分离模式
SpringBoot实现后端
Vue3实现Web端和AcApp端

配置git环境

安装Git Bash：https://gitforwindows.org/
进入家目录生成秘钥：执行命令ssh-keygen
git托管平台：Ac Git
将id_rsa.pub的内容复制到Ac Git上
创建项目后端
https://start.spring.io/加载慢的话，可以换成：https://start.aliyun.com
创建项目Web端与AcApp端
vscode下载地址：https://code.visualstudio.com/

 Vue3

6.1 Vue3——网站整体布局、用户动态页面
6.2 Vue3——用户列表、登录、注册页面
在SpringBoot中解决跨域问题
添加配置类：CorsConfig

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;@Configuration
public class CorsConfig implements Filter {@Overridepublic 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);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}
}

依托平台 

https://botzone.org.cn/

 项目概图

 

 backend笔记

IDEA创建项目

1.创建项目，注意选用java8版本，配置maven，选用SpringWeb(前后端不分离再选用)

2.本地测试网络127.0.0.1

3.controller下的BotInfoController

4.url服务器，

@RestController
@RequestMapping("/pk/")
public class BotInfoController {@RequestMapping("getbotinfo/")public List<Map<String,String>> getinfo(){List<Map<String ,String>> list=new LinkedList<>();Map<String,String> bot1=new HashMap<>();bot1.put("name","jk");bot1.put("rating","78789");Map<String,String> bot2=new HashMap<>();bot2.put("name","black");bot2.put("rating","19999");list.add(bot1);list.add(bot2);return list;}
}

 

 使用Vue

1.安装node.js

2.在WindowsPowerShell下执行npm i -g @vue/cli

如果执行后面的操作有bug，可能是最新版有问题，可以尝试安装早期版本

比如：npm i -g @vue/cli@5.0.4

启动vue自带的图形化项目管理界面
vue ui
常见问题1：Windows上运行vue，提示无法加载文件，表示用户权限不足。
解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned，然后输入y

vue ui(若vue ui报错，cannot read prop***，尝试换用新版本)

常见问题2：之前配置过Hadoop，yarn可以操作js@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案-CSDN博客

创建web项目

问题1：创建项目出错，可能需要重新配置

问题2：卡着不动，需要切换目录

使用Vue ui创建项目，一直刷新_node.js创建vue ui界面一直跳转-CSDN博客

添加插件：vue-router     vuex

安装依赖：

bootstrap

jquery

任务：server    运行   输出 

创建acapp

添加插件：vuex

任务：server    运行   输出 

  消除#

去掉createWebHashHistory

........

vue文件包括

<template>  -------html

<script>------------js

<style> ---------css

解决跨域问题：后端添加config/CorsConfig.java

import org.springframework.context.annotation.Configuration;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@Configuration
public class CorsConfig implements Filter {@Overridepublic 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);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}
}