基于vue+springboot+springMVC+mybatis+MySQL

### 技术栈集成方案概述 以下是基于 Vue、Spring Boot、Spring MVC、MyBatis 和 MySQL 的技术栈集成方案的详细说明。该方案涵盖了从前端到后端的整体架构设计和实现。 --- #### 后端部分 (Spring Boot + Spring MVC + MyBatis + MySQL) ##### 1. **项目初始化** 使用 IntelliJ IDEA 创建一个新的 Spring Boot 项目，并引入必要的依赖项，包括 `spring-boot-starter-web`、`mybatis-spring-boot-starter` 和 `mysql-connector-java`[^1]。 在 `pom.xml` 文件中添加如下依赖： ```xml <dependencies> <!-- Spring Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- MyBatis --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3</version> </dependency> <!-- MySQL Connector --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> </dependencies> ``` ##### 2. **数据库配置** 编辑 `application.yml` 或 `application.properties` 文件，完成 MySQL 数据库连接的配置[^4]: ```yaml spring: datasource: url: jdbc:mysql://localhost:3306/your_database_name?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.demo.entity ``` ##### 3. **实体类定义** 创建一个 Java 实体类表示数据表结构。例如，假设有一个名为 `users` 的表，则可以定义如下实体类： ```java package com.example.demo.entity; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableName; @TableName("users") public class User { private Long id; @TableField("username") private String username; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } } ``` ##### 4. **Mapper 接口** 利用 MyBatis 提供的功能，定义 Mapper 接口并与 XML 映射文件关联[^4]: ```java package com.example.demo.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.demo.entity.User; import org.apache.ibatis.annotations.Mapper; @Mapper public interface UserMapper extends BaseMapper<User> {} ``` ##### 5. **Service 层** 封装业务逻辑处理的服务层代码： ```java package com.example.demo.service; import com.example.demo.entity.User; import com.example.demo.mapper.UserMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class UserService { @Autowired private UserMapper userMapper; public List<User> getAllUsers() { return userMapper.selectList(null); } } ``` ##### 6. **Controller 层** 暴露 RESTful API 给前端调用： ```java package com.example.demo.controller; import com.example.demo.entity.User; import com.example.demo.service.UserService; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController @RequestMapping("/api/users") public class UserController { private final UserService userService; public UserController(UserService userService) { this.userService = userService; } @GetMapping public List<User> getUsers() { return userService.getAllUsers(); } } ``` --- #### 前端部分 (Vue.js) ##### 1. **项目初始化** 通过 Vue CLI 工具创建新的 Vue 项目[^3]: ```bash vue create vue-front-end cd vue-front-end npm install axios --save ``` ##### 2. **组件开发** 创建一个用于显示用户列表的组件 `UserList.vue`： ```html <template> <div> <h2>用户列表</h2> <ul> <li v-for="user in users" :key="user.id">{{ user.username }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { users: [] }; }, mounted() { this.fetchUsers(); }, methods: { fetchUsers() { axios.get('http://localhost:8080/api/users') .then(response => { this.users = response.data; }) .catch(error => { console.error(error); }); } } }; </script> ``` ##### 3. **主入口配置** 在 `main.js` 中注册全局组件并启动应用： ```javascript import Vue from 'vue'; import App from './App.vue'; import UserList from './components/UserList.vue'; Vue.config.productionTip = false; Vue.component('user-list', UserList); new Vue({ render: h => h(App), }).$mount('#app'); ``` --- #### 测试与运行 1. 启动 MySQL 数据库服务。 2. 使用 Maven 构建并运行 Spring Boot 应用程序。 3. 执行 `npm run serve` 启动 Vue 开发服务器。 4. 访问浏览器中的 Vue 页面，验证是否成功加载来自后端的数据。 --- ###