SpringBoot+Vue3前后端快速整合入门

前言

最近需要维护一个个人项目由于笔者是一个大后端所以借此机会把前端学习过程记录一下方便后续回顾。

前端项目初始化

安装npm

在前端项目初始化时我们必须要安装好node官网地址如下因为笔者后续会用到vue3所以这里下在的node版本为18.16.0 。

https://nodejs.org/en/download

安装步骤比较简单就不多赘述了安装完成后到cmd键入如下命令若输出node版本号则说明安装成功了。

C:\Users\xxx>node -v
v18.16.0

为了加速后续各种依赖的下载我们建议注册淘宝镜像命令为

npm get registry --显示当前的镜像网址
npm config set registry http://registry.npm.taobao.org -- 使用淘宝的镜像网址

完成后全局安装一下vue-cli

npm install -g @vue/cli@5.0.8

创建前端文件使用命令初始化前端项目

创建一个名为web的前端项目

vue create web 

首先进入选择页面我们直接选择第3个选项,即自定义创建前端项目。

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

然后进入选择页面使用空格键选择对应选项完成后如下所示可以看到笔者勾选了

1. Babel
2. Router
3. Vuex
4. Linter / Formatter

选择的界面如下带*号的就是笔者所选择的。

? Check the features needed for your project:
 () Choose Vue version
>(*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

然后我们就可以进入后续的配置了:

首先我们的vue选择3.0版本

# 选择vue3.0
? Choose a version of Vue.js that you want to start the project with 3.x 

路由选择历史模式

# 使用历史模式的router
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

然后是代码检查这里我们就选择简单的报错检查就行了

# 代码检查仅用于仅用于预防错误
? Pick a linter / formatter config:
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

接下来是配置选择的时机我们选择保存时检查即可

# ESLint 保存时触发检查
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

然后我们选择将配置存到package.json中

 # router等配置文件单独存放不和package.json一起
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

最后将模板配置为一个web的模板即可

  # 上述初始化操作保存为一个模板名字为web
? Save this as a preset for future projects? Yes
? Save preset as: web

自此就生成一个前端文件夹整体文件结构如下:

此时我们不妨键入以下命令尝试将项目启动

 $ cd web
 $ npm run serve

然后我们到浏览器键入

http://localhost:8080/

自此我们的前端架子就初始化完成了。

前端项目结构介绍

整体结构如下所示每个文件夹的含义分别是

1. node_modules:类似后端中maven在pom引入依赖后导入的依赖一样这个node_modules就是前端依赖引入的位置。
2. public:存放静态文件的位置。
3. assets:log文件存放处。
4. components:编写自己的通用vue组件的文件夹。例如你的网站有通用的header和footer就可以抽取一个组件存放到这个位置然后引入到需要的页面即可。
5. router:存放页面请求的每一个路由以及路由到达的vue组件位置。
6. store:存放全局变量的位置。
7. views:存放视图文件的位置。

├─node_modules
    └─__tests__
├─public
└─src
    ├─assets
    ├─components
    ├─router
    ├─store
    └─views

我们在前端根目录还会看到一个package.json和package-lock.json这些都说vue配置依赖版本的文件其中package-lock.json是我们完成依赖安装后索引版本的文件后续如果我们删除node_modules在进行npm install的话对应依赖版本都会以这个文件为主。

整合ant-design-vue

引入依赖

我们在这步骤需要引入ant-design-vue以及它的样式、标签等所以我们需要依次键入如下命令注:这些命令都来自官网如果版本有变读者可以到官网cv最新的命令。

npm install ant-design-vue --save
npm install --save @ant-design/icons-vue

然后main.js全局引入对应的这些配置即可

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 全局引入ant-design-vue 以及css样式
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

//图标
import * as Icons from '@ant-design/icons-vue';



const app = createApp(App);
app.use(Antd).use(store).use(router).mount('#app');

// 全局使用图标
const icons = Icons;
for (const i in icons) {
    app.component(i, icons[i]);
}

配置官网完成基本样式、标签整合

这里笔者就是通过官网复制粘贴+调整就完成了一个网站的初步搭建感兴趣的读者可以自行查阅调试由于没有什么很高深的技巧所以笔者就不多赘述了。

Ant Design Vue

唯一需要注意的就是选择3.0的文档。

header、footer组件化

我们都知道网站的头部和页脚都是通用的所以我们建议将这些部分抽取出来存放到上文所说的component文件夹中

以Footer.vue为例笔者的代码如下可以看到代码非常简单声明样式之后引入defineComponent并且将这个组件命名为Footer

<template>
    <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
</template>

<script>
    import {defineComponent} from 'vue';

    export default defineComponent({
        name: 'Footer',
    });
</script>

<style scoped>

</style>

然后我们在核心组件app.vue中引入核心代码如下可以看到使用import 之后就可以使用 <Footer/>就可以将页脚的样式引入了。

<template>
    <a-layout>
        <Header/>
        <router-view/>
        <Footer/>
    </a-layout>


</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import Header from '@/components/Header.vue'; // @ is an alias to /src
    import Footer from '@/components/Footer.vue'; // @ is an alias to /src
    </script >

最后就是核心配置文件main.js,如下所示他引入的全局都需要用到的组件通过import 引入通过use将其整合到app组件中。这就是为什么初始化时我们的app.vue可以直接使用路由等功能。

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(store)
    .use(router)
    .use(Antd)
    .mount('#app')

到此位置我们基本的东西都引入了我们不妨拿这个vue文件测试一下看看引入是否成功

输入如下内容可以看到笔者直接从官网抄了两个组件贴上去

<template>
  <div class="about">
    <a-button>Add</a-button> <step-forward-outlined />
  </div>
</template>

而页面确实输出了对应的样式由此可知我们的配置步骤成功了。

前端引入axios

为了能够请求后端接口我们需要使用如下命令完成axios安装

npm install axios --save

完成后我们即可直接import使用了如下所示这就是笔者基于axios发起的get命令示例

  import axios from 'axios';
    import {defineComponent} from 'vue';

    export default defineComponent({
        name: 'Header.vue',
        setup() {
            let name="xiaoming";
            axios.get("http://127.0.0.1:8081/hello/"+name).then((resp) => {
                console.log(resp.data);
                alert(resp.data);
            });
        }
    });

后端项目初始化

get请求

为了测试前后端交互我们编写了一个restful接口。

@RestController
public class HelloController {

    @GetMapping("/hello/{name}")
    public String hello(@PathVariable("name") String name) {
        return "hello" + name;
    }
}

因为前后端处于不同端口存在跨域问题所以我们后端还需要增加一段代码。+

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有路由
                .allowedOriginPatterns("*") // 允许所有来源
                .allowedHeaders(CorsConfiguration.ALL) // 允许所有请求头
                .allowedMethods(CorsConfiguration.ALL) // 允许所有请求方法
                .allowCredentials(true) // 允许前端带上凭证例如 cookie
                .maxAge(3600); // 1小时内不需要再预检发 OPTIONS 请求
    }
}

测试

最后刷新页面可以看到alert输出后端的响应结果说明整合成功了。