ssm+vue

### 整合 SSM 框架与 Vue.js 的方法 #### 1. 前后端分离的概念 前后端分离是指前端和后端分别独立开发，前端负责页面展示逻辑，而后端提供数据接口。这种模式下，Vue.js 被用来构建单页应用（SPA），而 SSM 则作为后端服务框架处理业务逻辑。 --- #### 2. 后端 SSM 配置 SSM 是由 Spring、Spring MVC 和 MyBatis 组成的经典 Java Web 开发框架组合。以下是其基本配置流程： - **创建 Maven 工程** 创建一个新的 Maven 项目，并在 `pom.xml` 文件中引入必要的依赖项[^2]。 ```xml <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>5.3.9</version> </dependency> <!-- Spring MVC --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.9</version> </dependency> <!-- MyBatis --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.0</version> </dependency> ``` - **配置数据库连接** 修改 `jdbc.properties` 或者直接在 `application.yml` 中设置数据库参数[^3]。 ```yaml spring.datasource.url=jdbc:mysql://localhost:3306/ssm_vue?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=password spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver ``` - **编写 Controller 层** 定义 RESTful API 接口供前端调用。例如： ```java @RestController public class UserController { @GetMapping("/users") public List<User> getUsers() { // 返回用户列表 return userService.getAllUsers(); } } ``` --- #### 3. 前端 Vue.js 配置 Vue.js 可以通过脚手架工具 Vue CLI 快速初始化项目结构。以下是主要步骤： - **安装 Vue CLI 并创建新项目** ```bash npm install -g @vue/cli vue create my-vue-app cd my-vue-app ``` - **请求后端接口** 使用 Axios 库发起 HTTP 请求获取数据[^1]。 ```javascript import axios from 'axios'; export default { data() { return { users: [] }; }, methods: { async fetchUsers() { try { const response = await axios.get('http://localhost:8080/users'); this.users = response.data; } catch (error) { console.error(error); } } }, mounted() { this.fetchUsers(); } }; ``` --- #### 4. 解决跨域问题 由于前后端部署在不同的服务器上，默认情况下会遇到跨域问题。可以通过以下方式解决： - **后端配置 CORS 支持** 在 Spring Boot 中启用全局 CORS 设置。 ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 所有路径都允许跨域访问 .allowedOrigins("*") // 允许所有域名访问 .allowedMethods("GET", "POST", "PUT", "DELETE"); // 允许的方法类型 } } ``` - **代理转发** 如果不想修改后端代码，也可以在 Vue 项目的 `vue.config.js` 中配置代理规则。 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` --- #### 5. 数据库设计与 SQL 导入 为了使整个系统正常工作，需提前准备好数据库表结构并导入初始数据。 - **使用 Navicat 或其他工具建库** ```sql CREATE DATABASE ssm_vue CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE ssm_vue; CREATE TABLE user ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50), email VARCHAR(100) ); ``` - **插入测试记录** ```sql INSERT INTO user(name, email) VALUES ('Alice', '[email protected]'), ('Bob', '[email protected]'); ``` --- ### 总结 以上介绍了如何利用 SSM 框架配合 Vue.js 构建一个完整的前后端分离项目。重点在于合理划分职责范围，确保双方能够高效协作完成目标功能。