116.【SpringBoot和Vue结合-图书馆管理系统】（一）-阿里云开发者社区

116.【SpringBoot和Vue结合-图书馆管理系统】（一）

2023-09-24 117

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 116.【SpringBoot和Vue结合-图书馆管理系统】

(一)、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