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

springboot elementui

2026-03-05 21:58:57前端教程

集成 Spring Boot 与 Element UI 的方法

Spring Boot 是一个用于快速构建 Java 后端应用的框架，而 Element UI 是一个基于 Vue.js 的前端组件库。将两者结合可以构建现代化的全栈应用。

后端配置（Spring Boot）

确保 Spring Boot 项目已配置为支持前后端分离。可以通过 @RestController 提供 API 接口，并使用 @CrossOrigin 处理跨域问题：

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*")
public class ApiController {
    @GetMapping("/data")
    public ResponseEntity<List<String>> getData() {
        return ResponseEntity.ok(Arrays.asList("Element", "UI", "Spring Boot"));
    }
}

前端配置（Vue + Element UI）

在 Vue 项目中安装 Element UI：

npm install element-ui -S

在 main.js 中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

前后端交互示例

使用 Axios 调用 Spring Boot API 并渲染 Element UI 表格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="value" label="Data"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return { tableData: [] };
  },
  created() {
    axios.get('http://localhost:8080/api/data')
      .then(response => {
        this.tableData = response.data.map(item => ({ value: item }));
      });
  }
};
</script>

部署注意事项

Spring Boot 打包为 JAR 文件时，前端静态资源（Vue 项目）需编译后放入 resources/static 目录。
开发阶段建议分别运行前端（Vue CLI 服务）和后端（Spring Boot 应用），通过代理解决跨域：
```
// vue.config.js
module.exports = {
devServer: { proxy: 'http://localhost:8080' }
};
```