配置git环境与项目创建

项目设计

名称：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 {
    @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() {
    }
}

依托平台 

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 {
    @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() {
    }
}