SpringBoot+Mybatis-plus与vue前后端集成

本文介绍了SpringBoot+Mybatis-plus与Vue进行前后端集成的步骤,包括SpringBoot项目的创建,Mybatis-plus、Druid、MySQL的配置,RESTful API设计规范的应用,以及Vue框架下登录处理和跨域问题的解决方案。

一、知识准备

1.springboot
springboot简化了配置编写,可以快速开发web应用,已经成为java主流的开发框架。
2.vue
前端开发也进入框架时代,vue能够满足前后端开发分离的需要,快速独立构建前端应用。
3.mybatis-plus
mybatis-plus是对mybatis的扩展,在保留了mybatis灵活使用sql语句的基础上,又扩展了基本的CRUD功能调用,大大提高了开发效率,程序员不用在编写、调试基本的CRUD映射sql语句。
4.json
前后端分离后,采用json格式作为前后端数据交互标准。
5.Restful API设计规范
RESTFUL是一种网络应用程序的设计风格和开发方式,客户端使用GET、POST、PUT、DELETE4个表示操作方式的动词对服务端资源进行操作:GET用来获取资源,POST用来新建资源(也可以用于更新资源),PUT用来更新资源,DELETE用来删除资源。

二、前后端集成

1、使用Maven创建springboot项目
2、引入pom配置,添加mybatis-plus、druid、mysql依赖

<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>
		<!-- Mysql-Connector -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>

		<!-- Fastjson -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
		</dependency>
		<!-- Druid -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid-spring-boot-starter</artifactId>
		</dependency>
		<!-- Mybatis-plus -->
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
		</dependency>
		<!-- Pagehelper -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pageh
### SpringBoot + MyBatis-Plus + Vue 技术架构图整合方案 #### 1. 架构概述 SpringBoot + MyBatis-Plus + Vue 是一种典型的前后端分离技术栈组合。该架构通过后端的 SpringBoot 提供 RESTful API 接口,利用 MyBatis-Plus 实现高效的数据库操作;前端采用 Vue.js 进行页面渲染交互逻辑处理[^3]。 以下是整体的技术架构层次划分: - **前端层**: 使用 Vue.js ElementUI 完成界面展示用户交互。 - **服务层**: SpringBoot 提供业务逻辑处理服务接口封装。 - **持久层**: MyBatis-Plus 对接数据库,完成 CRUD 操作及相关扩展功能。 --- #### 2. 技术架构图描述 下图为 SpringBoot + MyBatis-Plus + Vue 的典型技术架构设计: ``` +-------------------+ | 浏览器 | | | (HTTP/REST请求) +--------+----------++--------v----------+ | Vue.js | (前端) | | (负责视图渲染、事件绑定等) +--------+----------++--------v----------+ | Gateway/API网关 | (可选模块,用于统一管理API路由) +--------+----------++--------v----------+ | SpringBoot | (后端) | Service | (核心业务逻辑) | Controller | (暴露Rest接口给前端调用) +--------+----------++--------v----------+ | MyBatis-Plus | (持久层框架) | 数据库访问组件 | (提供高效的数据增删改查能力) +--------+----------++--------v----------+ | MySQL/Oracle | (存储数据的实际数据库) +-------------------+ ``` --- #### 3. 各部分职责说明 ##### 前端(Vue.js 层) - Vue.js 结合 ElementUI 或其他 UI 库构建动态网页应用。 - 利用 Axios 发起 HTTP 请求到后端获取或提交数据。 - 处理用户的输入并实时反馈结果。 ##### 中间层(SpringBoot 层) - SpringBoot 配置 RestController 来接收来自前端的请求,并返回 JSON 格式的响应数据[^4]。 - 将复杂的业务逻辑抽象为独立的服务类(Service),便于维护测试。 - 可引入 AOP(面向切面编程)、事务控制等功能提升系统的健壮性可靠性。 ##### 数据层(MyBatis-Plus 层) - MyBatis-Plus 自动化生成基础 Mapper 文件及对应的 SQL 方法。 - 支持自动填充字段(如 `create_time` `update_time`)[^2]。 - 提高性能优化插件,帮助开发者快速定位慢查询问题。 --- #### 4. 关键集成点解析 ##### (1) Vue.js SpringBoot 数据通信 - Vue.js 使用 Axios 插件发起 GET、POST 等类型的网络请求至 SpringBoot 控制器中的方法。 - 示例代码如下: ```javascript // Vue.js 调用后端接口示例 axios.get('/api/user/list') .then(response => { console.log('成功:', response.data); }) .catch(error => { console.error('失败:', error); }); ``` ##### (2) SpringBoot 配置 MyBatis-Plus -SpringBoot 项目的 `application.yml` 文件中配置数据库连接参数以及 MP 的全局设置。 - 示例配置片段: ```yaml spring: datasource: url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto logic-delete-value: 1 logic-not-delete-value: 0 ``` ##### (3) Thymeleaf 替代方案 虽然引用提到 Thymeleaf 的相关内容,但在本架构中推荐完全基于 Vue.js 开发前端,因此无需再额外依赖模板引擎。 --- #### 5. 注意事项 - 版本兼容性:确保使用的 MyBatis-Plus 版本 SpringBoot 版本匹配良好,避免因版本差异引发的功能缺失或异常行为。 - 时间戳自动更新:如果发现 `update_time` 字段未正常触发,请检查是否正确实现了 MetaObjectHandler 并注册到了 Spring 容器中。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值