SpringBoot 框架入门（King Of Bots项目） Class1

King Of Bots项目

---

---

readme

• 这是一个优秀的史诗级巨著
  仅用于个人学习笔记；
  在实验中也遇到过一些问题，解决

一、项目包含的模块

- 写项目 ——按照页面（类）来进行分页

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

二、Git 环境的配置与搭建

1.git 的作用

1. 历史存档
2. 同步不同机器上的不同代码 git clone 和 SSH克隆

2.git 环境配置

Git 通过ssh通信，不支持用户名和密码

打开Git Bash

1、输入ssh-keygen 然后一路回车
2、进入home 目录 然后cd .ssh 然后ls 里面有两个文件一个私钥一个公钥
3、cat一下公钥然后复制中摁住鼠标左键git bash就会自动复制 打开acgit
打开偏好设置点ssh密钥然后上传即可

4、在创建的项目（Kob）文件夹里git bash 输出git init然后回车即可ls -a查看隐藏文件 .git，然后写一个readme.md
5、git status表示当前目录下有多少文件还没有收录到仓库里
git add .全部收录 git commit -m “备注”
git pull 然后 git push
6、打开acgit把git全局设置一下然后推送现有文件夹即可

• 过程如下：
  
• 同步到其他的电脑的方法：
  • git clone +ssh协议的url（再别人的代码克隆的地方有）

三、创建项目

1、用IDEA创建后端Spring Boot的项目——用的是aliyun的网址（我重新安装了一下IDEA）

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

• 最好都用的是Java 1.8 （我也重新安装了一下Java 8）
  

2、然后开始写代码

（1）前后端不分离的写法——返回的是一个网页的地址（浏览器直接就展示就好了）

• 后端代码.class
  
• 前端代码.html
  
• 在tmplates 中写html
• static 中写css image 和js
  

（2）前后端分离的写法——返回的是json数据（就是一个数据字符串（保存为一个个变量），进行字符串的拼接）

（3）改端口8080—>3000

因为前端vue，默认访问的端口就是8080，所以后端改一下比较好

实验结果

3、Vue3

（1）安装vue3 ----安装nodejs 的过程看其他人的博客

安装nodejs 的过程

安装Nodejs

安装@vue/cli
打开Git Bash，执行：
npm i -g @vue/cli

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

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

（2）开始创建vue和配置

然后在项目的文件夹下创建web

• 创建的时候要等一段时间vue的项目比较大200 左右mb
  
  要安装 1插件和2依赖，然后3启动任务，4查看输出
  
  到这里vue的项目就创建成功了

四、开始写实际的项目代码

1、 前端代码：

<template>
  <div>BotGame</div>
  <div>Bot_name : {{ bot_name }}</div>
  <div>Bot_rating : {{ bot_rating }}</div>
  <router-view> </router-view>
</template>

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

export default {
  name: "App",
  setup: () => {
    let bot_name = ref("");
    let bot_rating = ref("");

    $.ajax({
      url: "http://localhost:3000/pk/getBotInfo/",
      type: "get",
      success: (resp) => {
        console.log(resp);
        bot_name.value = resp.name;
        bot_rating.value = resp.rating;
      },
    });

    return {
      bot_name,
      bot_rating,
    };
  },
};
</script>

<style>
body {
  background-image: url(@/assets/background.jpg);
  background-size: cover;
}
</style>

2、后端的代码——可以向前端传送数据

package com.kob.backend.controller.pk;


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

import java.awt.*;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.Map;

@RestController
@RequestMapping("/pk/")
public class BotInfoController {
    @RequestMapping("getBotInfo/")
    public Map<String,String> getBotInfo() throws Exception{
        Map<String,String> bot1 = new HashMap<>();
        bot1.put("name","zhang");
        bot1.put("rating","1000");


        return bot1;
    }
}

3、解决跨域问题：CoraConfig

• 在IDEA的后端代码中添加一个CoraConfig 类，添加一下内容（是什么内容，我也不知道）——解决的问题：就是前后端访问了不同的端口

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

总结

• IDEA中的backend 文件夹中写后端的代码，后端中有一个个类就是一个个功能的方法，用来返回对应部分的数据；
• IDEA中的resourse文件夹中写前端的一些代码和资源
• vscode中写一些前端vue的内容，web 和acapp等内容