VUE+SPRINGBOOT从0-1打造前后端-前后台系统-用户管理

在现代Web应用开发中，前后端分离架构已经成为主流模式。本文将通过一个完整的用户管理系统案例，详细介绍如何使用Vue.js + Element UI构建前端界面，结合Spring Boot实现后端服务，实现前后端分离开发。该系统包含用户信息的增删改查、批量操作、导入导出等常见功能，是一个典型的企业级管理系统模块。

一、技术栈介绍

1.1 前端技术栈

Vue.js：渐进式JavaScript框架，用于构建用户界面
Element UI：基于Vue.js的桌面端组件库，提供丰富的UI组件
Axios：基于Promise的HTTP客户端，用于前后端通信
Vue Router：Vue.js官方的路由管理器

1.2 后端技术栈

Spring Boot：简化Spring应用初始搭建和开发过程的框架
MyBatis-Plus：MyBatis的增强工具，简化CRUD操作
Hutool：Java工具类库，提供Excel导入导出等功能
JWT：用于身份验证的JSON Web Token

二、前端实现详解

2.1 项目结构与配置

前端项目采用Vue CLI搭建，主要目录结构如下：

src/
├── views/
│   └── User.vue       # 用户管理主页面
├── router/            # 路由配置
├── api/               # API请求封装
└── public/config.js   # 全局配置

在public/config.js中配置后端服务地址：

window.WHITE_IP = "your-server-ip:port";

2.2 用户管理页面布局

用户管理页面主要分为以下几个部分：

搜索区域：提供用户名搜索和重置功能
操作按钮区域：新增、批量删除、导入导出等功能按钮
表格展示区域：用户数据列表展示
分页组件：数据分页控制
弹窗表单：新增/编辑用户信息

<div class="User-container"><!-- 搜索区域 --><div style="margin: 10px 0"><el-input v-model="send.name" placeholder="请输入用户名"></el-input><el-button @click="selectListPage">搜索</el-button><el-button @click="reset">重置</el-button><!-- 操作按钮 --><el-button @click="insertWindow">新增</el-button><el-popconfirm @confirm="confirmRemoveIdList"><el-button slot="reference">批量删除</el-button></el-popconfirm><el-button @click="list_export">导出</el-button></div><!-- 表格区域 --><el-table :data="list" @selection-change="onSelectChange"><!-- 表格列定义 --></el-table><!-- 分页组件 --><el-pagination@size-change="onSizeChange"@current-change="onCurrentChange":current-page="send.currentPage":page-size="send.pageSize":total="send.total"></el-pagination><!-- 弹窗表单 --><el-dialog :visible.sync="sendFormFlag"><el-form><!-- 表单字段 --></el-form></el-dialog>
</div>

2.3 核心功能实现

2.3.1 分页查询

分页查询是管理系统的核心功能，前端需要维护当前页码、每页条数等参数：

data() {return {send: {currentPage: 1,pageSize: 10,total: 0,name: ''},list: []}
},
methods: {// 分页查询selectListPage() {this.$http.post("/user/list_page", this.send).then(res => {if (res.data.code === "200") {this.send.total = res.data.object.totalthis.list = res.data.object.data}})},// 分页大小变化onSizeChange(pageSize) {this.send.pageSize = pageSizethis.selectListPage()},// 当前页变化onCurrentChange(currentPage) {this.send.currentPage = currentPagethis.selectListPage()}
}

2.3.2 新增与编辑用户

通过同一个弹窗表单实现新增和编辑功能：

methods: {// 打开新增窗口insertWindow() {this.sendFormFlag = truethis.sendForm = {}},// 打开编辑窗口updateWindow(row) {this.sendFormFlag = truethis.sendForm = JSON.parse(JSON.stringify(row))},// 确认保存confirmInsertOrUpdate() {this.$http.post("/user/insertOrUpdate", this.sendForm).then(res => {if (res.data.code === "200") {this.$message.success('保存成功')this.selectListPage()}})}
}

2.3.3 批量操作

批量操作需要处理表格的多选功能：

methods: {// 多选变化onSelectChange(val) {this.sendForm.removeIdList = val},// 确认批量删除confirmRemoveIdList() {this.sendForm.removeIdList = this.sendForm.removeIdList.map(v => v.id)this.$http.post("user/list_delete", this.sendForm).then(res => {this.selectListPage()})}
}

2.3.4 导入导出功能

导入导出是管理系统常见功能，使用Element UI的Upload组件实现：

methods: {// 导出list_export() {window.open(`https://${WHITE_IP}/user/list_export`)},// 导入成功回调onImportSuccess() {this.$message.success("文件导入成功")this.selectListPage()}
}

三、后端实现详解

3.1 项目结构

后端采用标准的Spring Boot项目结构：

src/main/java/
└── com.black├── controller    # 控制器层├── mapper        # 数据访问层├── pojo          # 实体类└── util         # 工具类

3.2 核心控制器实现

用户控制器处理所有用户相关的请求：

@RestController
@RequestMapping("/user")
public class UserController {@ResourceUserMapper userMapper;// 新增或更新用户@PostMapping("/insertOrUpdate")public Res insertOrUpdate(@RequestBody User user) {if (user.getId() != null) {userMapper.updateById(user);} else {user.setPassword(MyUtils.getSHA256StrJava("123456"));userMapper.insert(user);}return Res.success(null);}// 分页查询@PostMapping("/list_page")public Res list_page(@RequestBody User user) {QueryWrapper<User> queryWrapper = new QueryWrapper<>();if (StringUtils.isNotBlank(user.getName())) {queryWrapper.like("name", user.getName());}int total = userMapper.selectCount(queryWrapper);queryWrapper.last("limit " + user.getStart() + "," + user.getEnd());List<User> dataList = userMapper.selectList(queryWrapper);Map<String, Object> result = new HashMap<>();result.put("total", total);result.put("data", dataList);return Res.success(result);}// 导出Excel@GetMapping("/list_export")public void list_export(HttpServletResponse response) throws Exception {List<User> list = userMapper.selectList(null);ExcelWriter writer = ExcelUtil.getWriter(true);// 设置标题别名writer.addHeaderAlias("id", "ID");writer.addHeaderAlias("name", "用户名");// ...其他字段writer.write(list, true);response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");String fileName = URLEncoder.encode("用户信息", "UTF-8");response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");ServletOutputStream out = response.getOutputStream();writer.flush(out, true);out.close();writer.close();}
}

3.3 分页查询实现

后端分页查询使用MyBatis-Plus实现：

@PostMapping("/list_page")
public Res list_page(@RequestBody User user) {// 1. 构建查询条件QueryWrapper<User> queryWrapper = new QueryWrapper<>();if (StringUtils.isNotBlank(user.getName())) {queryWrapper.like("name", user.getName());}// 2. 获取总数int total = userMapper.selectCount(queryWrapper);// 3. 计算分页参数int start = (user.getCurrentPage() - 1) * user.getPageSize();int end = user.getPageSize();// 4. 执行分页查询queryWrapper.last("limit " + start + "," + end);List<User> dataList = userMapper.selectList(queryWrapper);// 5. 返回结果Map<String, Object> result = new HashMap<>();result.put("total", total);result.put("data", dataList);return Res.success(result);
}

3.4 Excel导出实现

使用Hutool工具库实现Excel导出：

@GetMapping("/list_export")
public void list_export(HttpServletResponse response) throws Exception {// 1. 查询数据List<User> list = userMapper.selectList(null);// 2. 创建Excel写入器ExcelWriter writer = ExcelUtil.getWriter(true);// 3. 设置标题别名writer.addHeaderAlias("id", "ID");writer.addHeaderAlias("name", "用户名");writer.addHeaderAlias("nick", "昵称");// ...其他字段// 4. 写入数据writer.write(list, true);// 5. 设置响应头response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");String fileName = URLEncoder.encode("用户信息", "UTF-8");response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");// 6. 输出流ServletOutputStream out = response.getOutputStream();writer.flush(out, true);out.close();writer.close();
}

四、前后端交互设计

4.1 API接口规范

系统采用RESTful风格设计API，主要接口如下：

请求方法	路径	描述
POST	/user/list_page	分页查询用户列表
POST	/user/insertOrUpdate	新增或更新用户
POST	/user/delete	删除用户
POST	/user/list_delete	批量删除用户
GET	/user/list_export	导出用户数据到Excel

4.2 数据格式约定

前后端统一使用JSON格式交互，响应数据格式如下：

成功响应：

{"code": "200","message": "成功","object": {"total": 100,"data": [...]}
}

错误响应：

{"code": "500","message": "服务器错误"
}

4.3 Axios封装

对Axios进行统一封装，处理请求和响应：

import axios from 'axios'
import router from '../router'// 创建axios实例
const service = axios.create({baseURL: process.env.BASE_API,timeout: 5000
})// 请求拦截器
service.interceptors.request.use(config => {// 在请求头中添加tokenif (localStorage.token) {config.headers['Authorization'] = localStorage.token}return config},error => {return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {const res = response.dataif (res.code !== '200') {// token过期处理if (res.code === '401') {router.push('/login')}return Promise.reject(res)} else {return res.object}},error => {return Promise.reject(error)}
)export default service

五、系统安全考虑

5.1 密码安全

用户密码使用SHA256加密存储：

public class MyUtils {public static String getSHA256StrJava(String str) {try {MessageDigest digest = MessageDigest.getInstance("SHA-256");byte[] hash = digest.digest(str.getBytes(StandardCharsets.UTF_8));StringBuilder hexString = new StringBuilder();for (byte b : hash) {String hex = Integer.toHexString(0xff & b);if (hex.length() == 1) hexString.append('0');hexString.append(hex);}return hexString.toString();} catch (NoSuchAlgorithmException e) {e.printStackTrace();}return null;}
}

5.2 接口权限控制

使用JWT进行接口权限验证：

public class JwtInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {String token = request.getHeader("Authorization");if (token == null) {throw new RuntimeException("无token，请重新登录");}// 验证tokenClaims claims = JwtUtil.parseToken(token);if (claims == null) {throw new RuntimeException("token不合法");}// 将用户信息存入requestrequest.setAttribute("userInfo", claims.get("userInfo"));return true;}
}

5.3 XSS防护

对用户输入进行过滤，防止XSS攻击：

public class XssFilter implements Filter {@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {HttpServletRequest httpRequest = (HttpServletRequest) request;XssHttpServletRequestWrapper xssRequest = new XssHttpServletRequestWrapper(httpRequest);chain.doFilter(xssRequest, response);}
}public class XssHttpServletRequestWrapper extends HttpServletRequestWrapper {public XssHttpServletRequestWrapper(HttpServletRequest request) {super(request);}@Overridepublic String getParameter(String name) {String value = super.getParameter(name);return cleanXSS(value);}private String cleanXSS(String value) {if (value == null) return null;return HtmlUtils.htmlEscape(value);}
}

六、性能优化实践

6.1 前端性能优化

组件懒加载：路由组件按需加载
表格虚拟滚动：大数据量表格使用虚拟滚动
请求防抖：搜索框输入使用防抖处理

// 防抖处理
debounceSelectListPage: _.debounce(function() {this.selectListPage()
}, 500)

6.2 后端性能优化

MyBatis二级缓存：启用MyBatis二级缓存减少数据库查询
分页优化：使用更高效的分页查询方式
批量操作：使用批量插入代替循环单条插入

// 批量插入示例
public void batchInsert(List<User> userList) {SqlSession session = sqlSessionTemplate.getSqlSessionFactory().openSession(ExecutorType.BATCH, false);UserMapper mapper = session.getMapper(UserMapper.class);for (User user : userList) {mapper.insert(user);}session.commit();session.clearCache();session.close();
}