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

spring elementui

2026-03-06 00:01:42前端教程

Spring 与 ElementUI 的整合

Spring 是一个基于 Java 的轻量级企业级开发框架，主要用于后端开发。ElementUI 是一套基于 Vue.js 的前端 UI 组件库，常用于构建现代化的管理后台界面。整合 Spring 和 ElementUI 可以实现前后端分离的开发模式。

后端 Spring 配置

确保 Spring Boot 项目已正确配置 RESTful API，以便前端调用。可以使用 Spring Web 模块处理 HTTP 请求，Spring Security（可选）管理权限。

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

    @PostMapping("/users")
    public User createUser(@RequestBody User user) {
        return userService.save(user);
    }
}

确保后端启用跨域支持（CORS），以便前端能正常访问 API：

spring elementui

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

前端 Vue + ElementUI 配置

创建 Vue 项目并安装 ElementUI：

npm install element-ui -S

在 main.js 中引入 ElementUI：

spring elementui

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

Vue.use(ElementUI);

在组件中使用 ElementUI 组件，并调用 Spring 后端 API：

<template>
  <el-table :data="users" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      fetch('http://localhost:8080/api/users')
        .then(response => response.json())
        .then(data => {
          this.users = data;
        });
    }
  }
};
</script>

前后端联调

启动 Spring Boot 后端服务（默认端口 8080）。
启动 Vue 前端开发服务器（如 npm run serve，默认端口 8081）。
确保前端请求的 API 地址正确，可通过代理或直接调用后端地址。

如果需要代理 API 请求，可以在 Vue 的 vue.config.js 中配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

这样，前端访问 /api/users 时会自动代理到 http://localhost:8080/api/users，避免跨域问题。