项目概述和环境配置

项目设计

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

前端使用Vscode，后端使用IDEA。

解决前端跨域问题

在后端文件的根目录src/main/java/com/example/backend下，新建config文件夹，在该文件夹内，新建CorsConfig文件并写入以下代码：

package com.example.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() {
    }
}

基本的前后端交互

后端理解为一个函数库，存放各种各样的函数。把这些函数都放在controller目录下。

前端利用ajax即可调用后端的函数，以下面代码为例。

后端函数

package com.example.backend.controller.pk;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/pk/")
public class BotInfoController {
    @RequestMapping("getbotinfo/")
    public String getBotInfo() {
        return "沃斯尼蝶";
    }
}

八股

在 SpringMVC 中，控制器 Controller 负责处理由 DispatcherServlet 分发的请求，它把用户请求的数据经过业务处理层处理之后封装成一个 Model ，然后再把该 Model 返回给对应的 View 进行展示。

在 SpringMVC 中提供了一个非常简便的定义 Controller 的方法，你无需继承特定的类或实现特定的接口，只需使用 @Controller 标记一个类是 Controller ，然后使用 @RequestMapping 和 @RequestParam 等一些注解用以定义 URL 请求和 Controller 方法之间的映射，这样的 Controller 就能被外界访问到。

此外 Controller 不会直接依赖于 HttpServletRequest 和 HttpServletResponse 等 HttpServlet 对象，它们可以通过 Controller 的方法参数灵活的获取到。

@RestController和@RequestMapping是Springboot中的注解。

@Controller: 定义一个控制器类。
用 @ResponseBody 标记 Controller 类中的方法。把 return 的结果变成 JSON 对象返回。（如果没有这个注解，这个方法只能返回要跳转的路径即跳转的 html/JSP 页面。有这个注解，可以不跳转页面，只返回 JSON 数据）。
@RestController: 相当于 @Controller+@ResponseBody 两个注解的结合，返回 json 数据不需要在方法前面加 @ResponseBody 注解了，但使用 @RestController 这个注解，就不能返回 jsp,html 页面，视图解析器无法解析 jsp,html 页面。前后端分离的写法。
@RequestMapping: 给出外界访问方法的路径，或者说触发路径，触发条件。

前端调用

<template>
  <h1>我的最爱：{{ name }}</h1>
  <router-view/>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';


export default {
  setup: () => {
    let name = ref("");

    $.ajax({
      url: "http://127.0.0.1:3000/pk/getbotinfo/",
      type: "get",
      success: resp => {
        name.value = resp;
      }
    })

    return {
      name
    }
  }
}
</script>

<style scoped>
</style>