前言

因为 springboot 和 vue 基础不太好

因此这篇题解只追求 不求甚解

Git 的配置

Git 工具用来 管理 本地仓库 和 云仓库

中国下载地址 : https://git-scm.com/ 官方下载地址 : https://gitforwindows.org/

安装过程 ： 我们只需要傻瓜的 Next 即可 img 然后桌面鼠标右键,点击 Git Bash,利用 ssh-keygen 进行生成密钥(注意这里需要 cd 到 Home 目录)

img

然后会生成两个文件一个是 id_rsa,id_rsa.pub

利用 cat id_ras.pub 打开这个文件,复制里面的全部内容

Acgit 的配置

(这里建议将刚刚复制的内容存放一下)

登录 https://git.acwing.com/进行账号注册

一开始是英文,我们需要点击头像,偏好设置(倒数第二个),然后往下滑找到 languague

img img

然后我们将刚刚创建的密钥,添加到我们的 Acgit 上面

img

项目仓库配置

  1. 我们在本地创建一个项目文件夹 img
  2. 我们进入项目文件夹,鼠标右键git Bash然后输入git init (可以使用ls -a查看是否初始化成功) ![img](https://img-blog.csdnimg.cn/179fcc7cc73445368fc9e3c9d608cb1d.png)
  3. 我们利用touch readme.md创建一个md文件,然后利用vim readme.md进行写入 vim怎么使用,我们打开之后还是不能写的,我们需要按下 i才可以进行写,写完之后按esc之后按:,输入wq实现保存和退出 ![img](https://img-blog.csdnimg.cn/2662faa450974277a9e18ea08f3c25fb.png) ![img](https://img-blog.csdnimg.cn/fa33e4ca9e0e4c7485211b7e26a9ab3e.png)

下面就是 git 的操作了

  1. git status 查看当前分支的情况,这里的情况大致分为三种对应git 的三个区域(应该是三种情况) 这里我们发现,readme.md 没有 add commit,然后它提示 git add to track img
  2. git add .(将文件放入暂存区,第二个区域) 这里使用的是git add . .表示所有文件,应该是个通配符 ![img](https://img-blog.csdnimg.cn/33d248ae813645ffb2c4b34600cd1560.png)
  3. git status 我们再次查看状态,发现文件变绿了

img

  1. git commit -m “创建项目”(将暂存区提交到本地仓库) img

1.创建 Acgit 项目

下面是 Acgit 的操作 https://git.acwing.com/ 我们打开 Ac git

img

创建一个 空白项目,然后填写相应信息

记得把下面那个勾掉(原因 : 没什么用) img 2. 配置 我们创建好之后,会出现一个新网页

我们复制这两个记得去掉—global,(原因 : 如果有这两个那么以后的所有项目用的都是这两个配置) img

接着我们在复制这两个,顺序的粘贴运行,将本地仓库 push 到云端上 img

img 完成云端仓库的创建 img 下面 y 总联系了一下 git pull/commit/add/push 操作,具体看视频

IDEA

1. 创建项目

选择 Spring Initializr 这个应该是专业版才有,社区版无

因为默认的连不上,所以这里选择 start.aliyun.com

然后设置名称,改一下 Group : com.kob

因为我没有 Java8,这里选择 Java11

记得将这个项目放到本地仓库那个目录 img

勾选 Spring Web 和 Thymeleaf,第二个的作用是模拟一下前后端不分离

img

*首次创建需要注意等 index 完之后在操作,时间有点久

img 2. 启动项目 启动项目,输入 127.0.0.1:8080 进行访问,如图即成功 img img img 3. 前后端不分离

创建 Controller

我们创建两个包 controller pk 和一个 IndexController 类

然后我们给该类添加@Controller 注解和 RequestMapping(“/pk/) img

@Controller 标识的类，该类代表控制器类(控制层/表现层)。
@RequestMapping(),用于映射请求

(注解 y 总不会讲,我们只需要知道每个注解的作用即可)

创建 index.html 我们需要在 resource 中创建一个 pk 文件夹,然后创建 index.html (这里的 pk 文件夹是否是要和前面的 controller 对应不清楚,个人感觉是不需要的主要还是基础不扎实) img 添加相应的映射

我们写一下相关的映射,然后重启服务,在地址栏手动添加 pk/index 进行对该页面的访问 (除此之外还可以 添加其他东西) img img 前后端分离小测试 前后端分离,后端不再返回页面,而是返回数据

我们创建 BotInfoController 并且添加@RestController img

@RestController 是@controller 和@ResponseBody 的结合
@Controller 将当前修饰的类注入 SpringBoot IOC 容器，使得从该类所在的项目跑起来的过程中，这个类就被实例化。
@ResponseBody 它的作用简短截说就是指该类中所有的 API 接口返回的数据，甭管你对应的方法返回 Map 或是其他 Object，它会以 Json 字符串的形式返回给客户端

重启服务,访问页面 (y 总还返回了 List,Map 这里不多列出) img

小插曲

因为 Vue 默认的端口也是 8080,所以我们将 Spring 的端口改为 3000,重启服务 img

4.将项目上传 git status 项目为上传 img git add .放入暂存区 git commit -m “创建后端” git push

完成 img

Vue

  1. 安装 Node.js https://nodejs.org/en/ img
  2. 我们打开cmd最好用管理员的方式 可以先试试直接npm i -g @vue/cli@5.0.4如果卡住很久不动建议使用下面的方法 npm install -g cnpm --registry=https://registry.npm.taobao.org npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像 cnpm install -g @vue/cli 安装Vue

安装成功之后,我们 vue ui 打开控制台 img

之后我们在 kob 文件下创建文件,记得勾掉 git,并且选择 vue3 img 安装两个依赖 JQuery 和 bootstrap img 然后启动并且访问

img img 然后再创建一个项目 acapp 和上面的操作相同(插件不需要再装 vue-router 和其他的依赖),回到初始界面左上角 运行测试

用 git 进行上传

git statusimg

git add . git commit -m “创建 web 端和 acapp 端” git push

成功！！！！ img

Vscode

用 Vscode 打开 web img 切回 web 启动任务运行,调出该网页方便运行 img 删除无关信息(具体可看视频 1:40:00 左右) img 完成 img

前端代码编写

每个 Vue 就三个标签 template,script,style 分别对应 html,js,css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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({
      url: "http://127.0.0.1:3000/pk/getBotInfo/",
      type: "get",
      success: resp => {
        console.log(resp);
      }
    });
    return {
      bot_name,
      bot_rating
    }
  }
}
</script>

<style>
</style>

这里会出现一个小错误,需要复制讲义里面的类 img

这里摆烂了,没有写返回 List 的,哈哈哈跑起来了,总算跑起来了 QAQ img

最后添加背景图

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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({
      url: "http://127.0.0.1:3000/pk/getBotInfo/",
      type: "get",
      success: resp => {
        // console.log(resp);
        bot_name.value = resp;
        bot_rating.value = resp;
      }
    });
    return {
      bot_name,
      bot_rating
    }
  }
}
</script>

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

最后千万千万记得保存代码 img