前端|Vue3+Spring Boot前后端分离开发面试|spring|boot|intellij-idea|java

前言之前本人在学习Vue3.x与Spring Boot整合时，遇到了诸如跨域、使用axios报错等问题，在成功解决后，总结了一些经验，于是将如何从零开始搭建Vue3.x+SpringBoot前后端分离项目写成文章，当分享和记录。示例使用的是Window系统。（默认已配置好Java环境、Maven、MySQL、npm以及下载并安装IDEA，因为本文目的是完成Vue3.x通过axios访问Spring Boot项目的接口）

安装Vue3.x
打开命令行工具（尽量用管理员权限打开）cmd或powershell都行（Windows请先安装npm），输入如下命令安装Vue CLI，安装过程中如有报错请自行检索报错信息，毕竟不同的电脑体质遇到的错误不尽相同
yarn global add @vue/cli
或 npm install -g @vue/cli

文章图片

安装完成后输入vue -V即可查看版本信息

文章图片

创建Vue工程，在命令行（尽量管理员权限打开）中输入vue ui打开Vue图形化工具

vue ui

文章图片

在浏览器输入http://localhost:8000/进入对应网页

文章图片

文章图片

接下来就是祈祷佛祖保佑创建过程不要报错了，如报错了也是请自行检索报错信息来解决。

使用IDEA来打开创建的Vue工程，当然什么工具打开都行，只是起到编辑和方便查看代码的作用，最后都是可以用npm run serve/npm run dev/npm run build来运行项目的

文章图片

文章图片

文章图片
接下来就是axios的安装了（先停掉项目，Ctrl+C），这里比较重要，因为通过命令行下载的axios是Vue2的版本，要想在Vue3.x中使用需要修改一点代码
安装命令

vue add axios

文章图片

打开axios.js文件，将倒数第二行的Vue.use(Plugin)注释掉

文章图片

打开main.js文件，添加如下代码，注意添加的代码要在createApp(App).use(store).use(router).mount(’#app’)前面

import axios from 'axios' import VueAxios from 'vue-cli-plugin-axios'createApp(App).use(VueAxios, axios)

文章图片

这样，Vue中的配置就完成了

Spring Boot项目中配置（如果你是在Vue项目中解决跨域问题，这部分可以不看）
Spring Boot中接口的编写就不展示了，因为这个并不是这篇文章的重点，跨域问题只需要在项目中编写一个配置类即可解决，类中具体代码都是在网上cv的

文章图片
简单测试

文章图片

Test.vue中的代码

编号菜单名父节点请求编号

{{index}} {{item.menuName}} {{item.parentId}} {{item.orderNum}}

在index.js中配置Test.vue的路由信息

文章图片

index.js中的代码

import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue'const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/test', name: 'Test', component: Test } ]const router = createRouter({ history: createWebHashHistory(), routes })export default router

【前端|Vue3+Spring Boot前后端分离开发】分别运行SpringBoot项目和Vue项目，注意设置好端口，因为Vue项目和SpringBoot项目默认端口都是8080