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

srpingboot elementui

2026-03-06 00:55:37前端教程

Spring Boot 集成 Element UI 的方法

Spring Boot 是一个用于构建 Java 后端应用的框架，而 Element UI 是一个基于 Vue.js 的前端组件库。要将两者结合使用，通常需要在前端项目中引入 Element UI，并通过 REST API 与 Spring Boot 后端进行通信。

前端项目配置 Element UI

在 Vue.js 项目中安装 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);

Spring Boot 后端开发

创建一个简单的 Spring Boot 项目，提供 REST API 供前端调用。示例控制器：

srpingboot elementui

@RestController
@RequestMapping("/api")
public class DemoController {
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Data from Spring Boot");
    }
}

确保启用跨域支持（如果前端和后端分离部署）：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

前后端交互示例

在 Vue 组件中使用 Element UI 的表格组件，并通过 Axios 调用 Spring Boot 接口：

srpingboot elementui

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

<script>
import axios from 'axios';

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