前言

现在这个长时间没打理过的博客终于将被翻新一遍了。这学期学SpringBoot，于是实践项目就打算用它做一个博客项目。现在这个博客用的还是hexo，高中的时候就希望能随意个性化自己的博客网站，无奈hexo的限制太大，加上自己技术力太落后，只能接受现实。如今技术稍微进步，终于可以DIY一个博客网站。

前端用的是vue3，上个学期期末老师一节课就速通了😓，这学期只能边学边做。

SpringBoot项目创建

上课用的是idea，然后里面配置了一大堆maven什么的，我也忘记了，反正配置好了，就暂时不管了。

脚手架在https://start.spring.io/搭建的。搭好之后直接打开这个文件夹就行了。

一些依赖参考https://gitee.com/huluspace/javaweb4learning/tree/master/doc

这里把maven的设置文件放这里

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
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 
                              https://maven.apache.org/xsd/settings-1.0.0.xsd">
  <mirrors>
    <!-- 阿里云中央仓库 -->
    <mirror>
      <id>aliyun-central</id>
      <mirrorOf>central</mirrorOf>
      <name>Aliyun Central Repository</name>
      <url>https://maven.aliyun.com/repository/central</url>
    </mirror>

    <!-- 阿里云Spring仓库 -->
    <mirror>
      <id>aliyun-spring</id>
      <mirrorOf>spring-milestones,spring-snapshots</mirrorOf>
      <name>Aliyun Spring Repository</name>
      <url>https://maven.aliyun.com/repository/spring</url>
    </mirror>

    <!-- 阿里云插件仓库（用于加速Maven插件下载） -->
    <mirror>
      <id>aliyun-plugins</id>
      <mirrorOf>plugins-release</mirrorOf>
      <name>Aliyun Maven Plugins Repository</name>
      <url>https://maven.aliyun.com/repository/public</url>
    </mirror>
  </mirrors>

  <!-- 可选：设置本地仓库路径 -->
  <!--
  <localRepository>D:/maven/repository</localRepository>
  -->

  <!-- 可选：激活 profiles -->
  <!--
  <activeProfiles>
    <activeProfile>default</activeProfile>
  </activeProfiles>
  -->
</settings>

vue3项目创建

在b站上学的是用npm create vue@latest，老师发的视频里用的npm create vite@latest，区别好像是前者的vue集成更好，后者则可以集合别的框架。既然vue3主要是在b站学的，我就用前者了。（勾选了TS和router)

然后用npm install安装需要的模块。如果用的是VScode，打开一些配置文件会报错，原因好像是ts版本不对，只要ctrl+shift+p调出命令面板，输入TypeScript版本选择，选择合适的版本即可。

然后还要安装一些模块npm install element-plus，npm install vue-router@4。

配置路由

先创建views文件夹，创建页面文件Home.view和About.view

可以写入

1
2
3
4
5
6
7
<template>
  <div>
    <h2>首页 Home</h2>
    <p>这里是首页内容</p>
    <router-link to="/about">去 About 页面</router-link>
  </div>
</template>
1
2
3
4
5
6
7
<template>
  <div>
    <h2>关于 About</h2>
    <p>这里是关于页面</p>
    <router-link to="/">返回 Home 页面</router-link>
  </div>
</template>

测试路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//创建一个router文件夹，在里面创建index.ts，写入
import {createRouter, createWebHistory} from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
    {path : '/', component: Home},
    {path : '/about', component : About}
]

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

export default router;

然后在App.vue中写入

1
2
3
4
5
6
7
8
9
<script setup lang="ts"></script>

<template>
  <h1>You did it!</h1>
  <router-view></router-view> 
</template>

<style scoped></style>

前后端通信

现在vite.config.json里配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {               // 访问/api开头的请求
        target: 'http://localhost:8080',  // 这是后端服务器地址，前端的端口是5173
        changeOrigin: true,
        // rewrite: path => path.replace(/^\/api/, '') // 可选：去掉/api前缀
      }
    }
  }
})

然后在后端创建一个测试类

1
2
3
4
5
6
7
8
@RestController
@RequestMapping("/api")
public class HelloController {
  @GetMapping("/hello")
  public String hello() {
    return "Hello World!";
  }
}

再运行前端与后端就可以了