当前位置：首页 > 前端教程

elementui spring

2026-03-05 17:21:07前端教程

ElementUI 与 Spring 集成方案

ElementUI 是前端 Vue.js 的组件库，Spring 是后端 Java 框架。两者结合需要明确前后端分离的架构，通过 RESTful API 或 GraphQL 通信。

前端配置（Vue + ElementUI）

初始化 Vue 项目
使用 Vue CLI 创建项目并安装 ElementUI：

vue create frontend
cd frontend
vue add element-plus  # 或手动安装：npm install element-plus

配置 API 请求
使用 Axios 调用 Spring 后端接口，示例配置：

import axios from 'axios';
const api = axios.create({ baseURL: 'http://localhost:8080/api' });
export default api;

调用后端接口
在 Vue 组件中发起请求：

api.get('/users').then(response => {
  this.users = response.data;
}).catch(error => {
  this.$message.error('加载失败');
});

后端配置（Spring Boot）

创建 RESTful API
使用 @RestController 提供接口：

@RestController
@RequestMapping("/api/users")
public class UserController {
    @GetMapping
    public List<User> getUsers() {
        return userService.findAll();
    }
}

跨域支持
添加全局 CORS 配置（或使用 @CrossOrigin 注解）：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/")
                .allowedOrigins("http://localhost:8081")  // Vue 开发服务器端口
                .allowedMethods("*");
    }
}

数据返回格式
统一响应结构（示例）：

public class Result<T> {
    private int code;
    private String message;
    private T data;
    // 构造方法、Getter/Setter
}

部署注意事项

生产环境代理
通过 Nginx 配置反向代理，避免跨域问题：
```
location /api {
    proxy_pass http://spring-server:8080;
}
```
静态资源分离
Spring 打包时排除前端资源，Vue 项目单独部署到 CDN 或静态服务器。