环境

配置git环境
安装Git Bash（使用Mac和Linux的同学可以跳过这一步）：https://gitforwindows.org/
进入家目录生成秘钥：执行命令ssh-keygen
在Ac Git上注册账号，地址：https://git.acwing.com/
将id_rsa.pub的内容复制到Ac Git上

1.创建IndexController

@CrossOrigin 解决跨域问题

@RestController 返回Json形式的数据给前端

@Requstmapping 父路径

@GetMapping Get形式的请求返回一个map

package com.wsz.backend.controller.pk;

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

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

@CrossOrigin
@RestController
@RequestMapping("/pk")
public class IndexController {

    @GetMapping("/getbotinfo")
    public Map<String,Object> index(){
        Map<String,Object> map = new HashMap<>();
        map.put("bot_name","wsz");
        map.put("bot_rating",1900);
        return map;
    }
}

修改端口号为3000

application.properties

前端部分

1.下载node.js

2.下载vue3

安装 npm i -g @vue/cli

vue -V: @vue/cli 5.0.8

3.创建vue项目

选项全关闭

web项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdqT2P1H-1667654061921)(C:\Users\wangs\AppData\Roaming\Typora\typora-user-images\image-20221105205246143.png)]

下载vuex和vue-router插件

依赖下载

bootstrap和jquery

启动后为这样就是成功了

acapp项目只要下载vuex插件

删除views中内容

修改router中index内容

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

const routes = [
]

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

export default router

删除components中内容

修改App.vue内容

<template>
<div>
  <div>昵称:{{bot_name}}</div>
  <div>战力:{{bot_rating}} </div>
</div>
  <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:3000/pk/getbotinfo",
          type: "get",
          success: resp => {
            bot_rating.value = resp.bot_rating;
            bot_name.value = resp.bot_name;
            console.log(resp);
          }

      });

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

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

结果

最后提交git