配置好git

  • 配置好代码托管网站的密钥和本机的密钥生成
  • git init
  • 推送

使用idea创建后端项目框架

创建Spring boot项目，选择阿里云的服务器，版本相对较旧，和课程一致

image-20240808120538224

勾选Web > Spring Web和 Template Engines> Thymeleaf

image-20240808120947990

启动项目

image-20240808121229619

image-20240808121244563

注解

一般情况下我们会新建一个controller的软件包

示例：

在controller下面新建一个IndexController的类

如果我们想把这个函数变成链接对应的一个函数，大家需要加上一个注解@Controller一回车就加进来了

image-20240808121849165

父目录可以用@RequestMapping

image-20240808122031627

比如说想去返回一个页面的话

在resources下面创建一个templates文件夹

ps: 因为我没有不知道为什么hhh

在pk下面创建一个html文件随便添加任何内容

然后如果我们想在之前定义pk/链接下返回这个页面

待施工，我的和y总的templates文件夹不一样，我的路径是static里的，应该是版本的问题后续看，我的return值应该改为”../templates/pk/index.html”

如果想加入图片，在static文件夹下面创建css js image 三个文件夹，将图片复制到image 中去

kob.png

以上就是前后端不分离的写法，本课程都是采用前后端分离的写法

如果想要前后端分离，并且返回一些数据：

在controller 下面创建一个BotInfoController

如果我们想要返回数据注解就要写成@RestController

image-20240808125758194

可以任意返回比如说 列表 、 字典 等等

image-20240808130549423

链接通过controller一层一层找出来的，找出来后，算出来将他返回

更改端口

在resources.application.properties中把最后一行server.port=8080改成3000

因为和vue的端口冲突了

我的端口冲突了，不知道放了什么东西，我改成30000了。

提交一次代码

略

创建前端

在vscode里面写

  • 安装vscode
  • 安装nodejs
  • 启动vue

创建一个web项目

image-20240808133318150

！！！不要勾选初始化git仓库

安装依赖和插件

  • vuex
  • vue-router
  • bootstrap
  • jquery

运行

image-20240808133651101

再创建一个acapp 项目

只装vuex

提交代码

略

删除网址hash

删除 router/index.js 中的Hash字符

删除vue框架中一些没有用的内容

  • app.vue中css
  • views中的两个文件
  • index.js中没用的路径
  • components的内容
  • public中的内容
  • assets 中的内容

修改后端中的getinfo函数

只返回map

image-20240808135240694

测试前后端通信

写好 ajax 后不出意外的话就出意外了

报错 cors 也就是跨域问题

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

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

在SpringBoot中解决跨域问题

添加配置类： CorsConfig,在跟文件夹backend下面新建

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

前后端交互完成了，这节课就完成了

加一个背景

图片地址

我选择直接粘贴网页链接

在app.vue中style中添加

image-20240808141518340

提交一次代码

略