1. 配置环境和项目创建_kob项目-CSDN博客

本文链接：https://blog.csdn.net/qq_41046821/article/details/125824120

1. 配置git环境

本地创建。

创建kob文件夹，作为项目的存储位置

打开自己创建的kob文件夹，然后在文件夹打开git bash，输入命令：

git init

初始化git.png

创建readme.md文件夹，输入内容：

一个伟大的史诗级巨著

在kob文件夹下依次输入命令：

git status // 查看有几个文件没有加入仓库
git add . //当前文件下没有加入仓库的加入
git commit -m "创建项目" // 保存

云端创建：

打开AcGit

菜单 -> 项目 -> 您的项目 -> 新建项目 -> 空白项目：如下：

acgit 创建项目.png

在git bash 中输入命令行指引。

需要修改

git push -u origin main
为git git push -u origin master

连接云端和本地。

tips：如果有两台电脑

使用：

git clone + ssh地址
git pull // 拉取

2. 创建项目后端

前后端分离的思想：

前后端分离.png

使用IDEA创建项目：

注意：创建的后端项目需要放在kob文件夹下
1.创建项目

2.添加组件

此方法创建的是前后端不分离的项目

点击运行：

输入网址127.0.0.1:8080，显示此界面即为成功。

添加组件、编写代码

编写 `IndexController` 类

在com.kob.backend目录下给函数新开一个软件包controller
新建IndexController
加注解@Controller
加上父目录@RequestMapping("/pk/")
在IndexController新建一个返回函数

@RequestMapping("index/")
public String index() {
        return "pk/index.html";
    }

编写 `index.html`

建立的目录： resource/templates/pk/index.html
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KOB</title>
</head>
<body>
<div style="text-align: center">
    <img src="/image/icon.png" alt="">
</div>
</body>
</html>

代码如下：

package com.kob.backend.controller.pk;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/pk/")
public class IndexController {

    @RequestMapping("index/")
    public String index() {
        return "pk/index.html";
    }
}

编写 `BotInfoController` 类

加上注解@RestController，@RequestMapping("/pk/")
使用RestController注解不是Controller
返回函数：

@RequestMapping("getbotinfo/")
    public Map<String, String> getBotInfor() {
        Map<String, String> bot1 = new HashMap<>();
        bot1.put("name", "apple");
        bot1.put("rating", "1500");
        return bot1;
    }

代码如下：

package com.kob.backend.controller.pk;

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

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/pk/")
public class BotInfoController {

    @RequestMapping("getbotinfo/")
    public Map<String, String> getBotInfor() {
        Map<String, String> bot1 = new HashMap<>();
        bot1.put("name", "apple");
        bot1.put("rating", "1500");
        return bot1;
    }
}

测试

在地址栏输入127.0.0.1:8080/pk/getbotinfo/
可以在application.properties修改后端的端口为3000
自己添加代码, 使用spring源创建的默认是空，自己加上就好！

server.port= 9090

3. 创建项目Web端与AcApp端

下载组件

vscode下载地址：https://code.visualstudio.com/
Bootstrap官网地址：https://v5.bootcss.com/
安装Vue3： https://www.acwing.com/blog/content/20724/

创建web项目

在kob目录下创建，名称为web，取消初始化Git
选Vue3 添加 vue-router 和 vuex 两个插件
点击依赖安装依赖 jquery 和 bootstarp
Server -> 运行 -> 输出点击网址

创建acapp项目

在kob下创建，名称为acapp，取消初始化Git
选Vue3 添加 vuex 插件
Server -> 运行 -> 输出点击网址

同步

使用git 同步一下;

git status
git add .
git status
git commit -m "创建web和acapp"
git push

用vscode打开web项目

添加</router-view>防止报错

<router-view></router-view>

在App.vue中把<style></style>和<script></script>中的东西删掉
在index.js文件中的第一行和21行删除createwebHistory删除Hash 目的是删除地址栏的#，同时删除一些无用的代码。最终结果如下：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [

]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

删除AboutView.vue、HomeView.vue、HelloworldView.vue文件

编写`App.vue`

<template>
  <div>Bot昵称：{{ bot_name }}</div>
  <div>Bot战力：{{ 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://127.0.0.1:8080/pk/getbotinfo/",
      type: "get",
      success: resp => {
        bot_name.value = resp.name;
        bot_rating.value = resp.rating;
      }
    });

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


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

4. 解决跨域问题：

目录：package com.kob.backend.config
创建一个类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() {
    }
}