项目设计
名称：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中解决跨域问题
添加配置类：CorsConfigpackage 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，然后输入yvue 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() {} }
