elementui springmvc
ElementUI 与 Spring MVC 整合方案
ElementUI 是一套基于 Vue.js 的桌面端组件库，而 Spring MVC 是 Java 后端的 Web 框架。整合两者需要前后端分离的架构设计。
前端项目搭建
使用 Vue CLI 创建项目并引入 ElementUI：
vue create frontend
cd frontend
vue add element在 main.js 中配置：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)后端 Spring MVC 配置
创建 Spring Boot 项目并添加 Web 依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>配置跨域支持：
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/")
.allowedOrigins("*")
.allowedMethods("GET", "POST");
}
}前后端交互实现
前端 Axios 示例：
axios.post('/api/login', this.formData)
.then(response => {
this.$message.success(response.data.message)
})后端 Controller 示例：
@RestController
@RequestMapping("/api")
public class ApiController {
@PostMapping("/login")
public Map<String, Object> login(@RequestBody User user) {
Map<String, Object> result = new HashMap<>();
result.put("success", true);
result.put("message", "登录成功");
return result;
}
}部署方案
开发环境：
- 前端运行在
http://localhost:8080 - 后端运行在
http://localhost:8081
生产环境：
- 前端打包静态文件部署到 Nginx
npm run build - 后端打包为 JAR 运行
mvn package java -jar backend.jar
常见问题解决
跨域问题：
- 确保后端配置了 CORS
- 前端配置代理：
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true } } } }
请求 404 问题：
- 检查后端接口路径是否匹配
- 确认请求方法（GET/POST）是否正确
