SpringBoot框架之KOB项目-配置git环境和项目创建

爱敲代码的憨仔

已于 2024-08-09 13:54:24 修改

阅读量871

点赞数 21

分类专栏： SpringBoot 文章标签： spring boot git 后端 java

于 2024-05-05 17:22:22 首次发布

本文链接：https://blog.csdn.net/hanxuewei666/article/details/138469975

版权

SpringBoot 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

项目设计

每一个User可以有多个Bot对战机器人，但是每次只能派出一名出战，每一个Bot都是用户提交的一段代码，本质上是一个函数。
游戏是回合制，每条蛇要考虑下一个方向怎么走，给四个方向编号0 1 2 3
需要使用数据库，存储用户信息、Bot的信息、每场对局的信息等等
微服务：匹配系统

名称：King Of Bots,简称 KOB
图标：
项目包含的模块（二层为模块，三层为界面）
- pk模块：
  - 匹配界面（微服务）
  - 实况直播界面（WebStock协议）
  - 真人PK（WebStock协议）
- 对局列表模块：
  - 对局列表界面
  - 对局录像界面
  - 录像回放
- 排行榜模块
  - Bot列表
- 用户中心模块
  - 注册界面
  - 登录界面
  - 我的Bot界面
  - 每个Bot的详细界面
前后端分离模式：优点在于一套后端代码可以对应多个前端（比如：web，小程序，App等等）
- SpringBoot实现后端
- Vue3实现Web端和AcApp端
  例如web端常见布局

配置git环境

git的作用

代码存档
同步不同机器上的代码（github，acgit）

安装Git Bashhttps://gitforwindows.org/
1. 下载安装，全部默认即可
2. 安装完成后，在文件夹下右击鼠标，显示Git Bash图标，则已经安装完毕。
3. 点击Git Bash Here进入黑框
通过cd进入家目录生成密钥：执行命令ssh-keygen一路回车即可。
1. acgit 和 github 通信是通过SSH通信的，不支持用户名和密码的，所以需要用密钥来进行操作。
2. 学习Linux的常用操作和SSH
在Ac Git上注册账号，地址：https://git.acwing.com/
将id_rsa.pub的内容复制到Ac Git上
创建仓库，将项目维护起来，在刚刚git的目录下创建一个文件夹KOB
1. 初始化git，使用git init命令
2. 创建名叫readme的md格式的文件，使用命令vim readme.md，他会展示在我的项目简介里面
3. 看一下当前文件夹有多少个文件没有被收入到仓库里面，使用命令git status，显示有一个。使用命令git add .，将当前没有收入到仓库的文件全部收到仓库里面。
4. 将当前的版本保留下来使用命令git commit -m "保留版本的自定义名称"
在AcGit创建项目，进行双方同步。
1. 菜单-》点击项目-》您的项目-》创建项目-》创建一个空白项目
2. 创建完成之后，进行配置。终端粘贴方法：右键-》paste
  1. git全局配置：将–global去掉，应为这意味这所有的项目都使用一个配置，这是不合理的所以去掉。输入git config user.name "han xuewei"回车，再输入git config user.email "3025731614@qq.com"回车。
  2. 推送现有的文件夹：输入git remote add origin git@git.acwing.com:Han/kob4.git回车，再输入git push -u origin master，然后刷新页面即可。
如何实现两台电脑的同步操作（使用同一台电脑下的不同文件夹来模拟）
1. 使用SSH克隆
2. 新建一个temp文件夹，在此文件夹下打开git bash，执行git clone SSH克隆的链接，如 git clone git@git.acwing.com:Han/kob4.git
3. 维护项目的常见操作：在原来的KOB文件下面新建一个test.txt文件并且输入一些内容。在当前目录下打开git bash，执行git status会发现多了一个文件test，然后执行git add .将文件上传到仓库，然后执行git commit -m "test",最后执行git push。查看云端仓库，会发现多了一个test文件
4. 假设temp文件夹下就是公司的电脑。在其目录KOB文件夹下打开git bash，执行git pull拉取文件
5. 反过来是一样的操作
6. 点击历史可以看到之前提交的内容，点击右边的文件夹可以看到当时的内容

前后端分离的学习理解

服务模型：客户端向服务端发送请求（本质上为url），服务端向客户端返回界面（字符串）。这个过程就类似于函数的调用，用户的所有操作本质上都是调用服务端的某个函数。

这种服务模式又分为两种模式：

1.前后端分离模式：html代码在服务器端生成，客户端发送请求，服务端响应请求。
2.前后端不分离模式：前端（如web）先向客户端传送静态文件（网站的展示框架）。客户端再向服务端发送一些请求，服务器端将数据（网站的框架中填充的具体内容）返回给客户端。客户端接收了这些数据就动态填充到页面中去，这个过程就是渲染。因此同一个后端可以对应多个前端，不同前端的区别就在于静态文件的框架不同，但是其中的内容都是一样的。

MVC模式：

controller：负责向用户返回一个数据的控制器（包下存储后端函数）
View：就是html，负责界面的显示，以及与用户的交互功能，比如列表和网页。
Model：就是数据库，支持所有的数据，状态，程序逻辑。模型接受视图数据的请求，并返回最终的处理结果。

本项目的构建：

客户端：比如网站的每一个用户。
服务器端：Server端，这个KOB项目包含以下三个模块
- Backend（后端SpringBoot实现）
  - Mysql
  - Redis
  - 硬盘
  - 微服务
- vue3实现：
  - web端（前端）
  - AcApp端（前端）

创建项目后端

[https://start.spring.io/](https://start.spring.io/)，加载慢的话，可以使用[https://start.aliyun.com](https://start.aliyun.com)

加载依赖之后，启动项目

输入网址，看到如下页面则表示已经项目已经启动完成。

端案例展示

返回html版（`@Controller`注解更合适）

根据Controller的目录拼接为网址链接，执行代码返回html页面。

html文件存在templates文件夹下
照片等存在static文件夹下，static下细分三个文件
- image
- css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

返回json版（`@RestController`注解更合适）

在PK包下创建BotInfoController类

//返回Bot信息的类
@RestController//比Controller更加适合返回数据。
@RequestMapping("/pk/")
public class BotInfoController {
    @RequestMapping("BotInfo/")
    //返回一个字符串
    public List<Map<String,String>> getBotInfo(){
        List<Map<String,String>> list = new LinkedList<>();
        Map<String, String> bot1 = new HashMap<>();
        bot1.put("name","tiger");
        bot1.put("rating","1500");
        Map<String, String> bot2 = new HashMap<>();
        bot2.put("name","apple");
        bot2.put("rating","1800");
        list.add(bot1);
        list.add(bot2);
        return list;
    }

}

创建项目前端：Web端和AcApp端

vscode下载地址：https://code.visualstudio.com/
vue的安装配置看这篇博客哈哈，可以看到如何安装，以及需要的插件和依赖，最后如何启动等一条龙博客~~
相同的方法，同目录创建两个前端项目，创建完成后，用git维护。
- web项目
- acapp项目

前后端通信案例

前端

App.vue

<template>
  <div>
    <div>Bot昵称：{{ bot_name }}</div>
    <div>Bot战力：{{ bot_rating }}</div>
  </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将后端的值取出来
          $.ajax ({
            //函数地址
            url: "http://localhost:3000/pk/BotInfo/",
            //类型,获取数据
            type:"get",
            success: resp => {
              console.log(resp);
              bot_name.value = resp.name;
              bot_rating.value = resp.rating; 
            }
          });
          return {
            bot_name,
            bot_rating
          }
      }
  }

</script>
<style>

</style>

后端

package com.kob.backend.controller.pk;

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

import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;

//返回Bot信息的类
@RestController//比Controller更加适合返回数据。
@RequestMapping("/pk/")
public class BotInfoController {
    @RequestMapping("BotInfo/")
    //返回一个字符串
    public Map<String,String> getBotInfo(){
        Map<String, String> bot1 = new HashMap<>();
        bot1.put("name","tiger");
        bot1.put("rating","1500");
        return bot1;
    }

}

在SpringBoot中解决跨域问题

项目根目录下创建config包
config包下创建CorsConfig

package com.kob.backend.config;

import org.springframework.context.annotation.Configuration;

import jakarta.servlet.*;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.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() {
    }
}

效果展示

思路分析

右击鼠标，查看网页源代码，vue所有的项目代码都在下面这个app.js里面，这就拥有了前端骨架，计算机逐行执行，然后执行ajax代码，更具url获取后端数据。

引入项目背景

背景图片（复制到`web文件夹`中的`asset文件夹`下）

`App.js`文件夹中增加代码

<style>
body {
  background-image: url("@/assets/image.png");
  /* 百分百填充 */
  background-size: 100%;
}
</style>

效果展示

上传git，完美结束哈哈！

爱敲代码的憨仔

关注

21
点赞
踩
20

收藏

觉得还不错? 一键收藏
3
评论
SpringBoot框架之KOB项目-配置git环境和项目创建

服务模型：客户端向服务端发送请求（本质上为url），服务端向客户端返回界面（字符串）。这个过程就类似于函数的调用，用户的所有操作本质上都是调用服务端的某个函数。每一个User可以有多个Bot对战机器人，但是每次只能派出一名出战，每一个Bot都是用户提交的一段代码，本质上是一个函数。前后端分离模式：优点在于一套后端代码可以对应多个前端（比如：web，小程序，App等等）右击鼠标，查看网页源代码，vue所有的项目代码都在下面这个。里面，这就拥有了前端骨架，计算机逐行执行，然后执行。，加载慢的话，可以使用。
复制链接

扫一扫