(一)、SpringBoot+Vue概述
1.基本概述
前后端分离就是将一个应用的前端代码和后端代码分开写:
- 传统的JavaWeb开发中，前端使用JSP进行开发，JSP不是由后端开发者来独立完成的。(前端
编写静态页面转交给后端开发)。这种开发方式的利用率极低…单体应用结构
- 使用前后端开发，就可以完美的解决这一问题。(前端只需要
独立编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可。前端通过axios请求来访问后端的数据接口，将Model展示到View即可) - 使用SpringBoot+Vue前后端开发者只需要提前约定好接口文档(URL、参数、数据类型…)，然后分别独立开发。前端可以造假数据进行测试，完全不需要依赖后端。真正实现了前后端应用的解耦合。
- 由原来的单体应用分为了:
纯前端应用 + 纯后端应用。前端应用:负责数据展示和用户交互。后端应用: 负责提供数据处理接口。前后端分离结构
前后端分离应用就是将一个单体应用拆分成独立的应用，前端应用和后端应用咦JSON的个数进行数据的交互。
2.实现技术
SpringBoot+Vue: SpringBoot进行后端应用的开发，使用Vue进行后端应用的开发。
(二)、Vue3.x搭建 (SpringBoot+Vue)
1.搭建Vue基本环境
(1).搭建Vue项目框架
1.我们使用命令行的方式进行创建:这个仅支持vue-cil3.0以上
vue ui
会自动跳转到ui页面...
1.我们选择在E:\Vscode源码创建我们的vue项目
2.手动配置我们的vue
3.开启router和vuex。关闭语法检测
4.开启历史记录...
5.预设项目不选
6.创建成功后就会进入...
我们通过运行测试发现会出现以下的错误...
ERROR Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree. Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree. at Object.<anonymous> (E:\Vscode源码\vuetest\node_modules\vue-loader\dist\compiler.js:14:15) at Module._compile (internal/modules/cjs/loader.js:956:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10) at Module.load (internal/modules/cjs/loader.js:812:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Module.require (internal/modules/cjs/loader.js:849:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (E:\Vscode源码\vuetest\node_modules\vue-loader\dist\index.js:29:20) at Module._compile (internal/modules/cjs/loader.js:956:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10) Total task duration: 0.65s
我们只需要在我们的控制台的地方安装一个vue新版本即可。
npm i vue@3.2.26
添加完毕之后: 我们发现的项目能够跑的动了...
访问 localhost:8080端口，我们就会跳转到这个页面...
(2).介绍Vue项目内容
1.Vue.app: 实质上Vue的内容是不会变化的，变化的实质上是路由跳转的部分。
2.搭建SpringBoot基本环境
(1).创建SpringBootTest项目
