SpringBoot+Vue构建地址管理系统：从基础CRUD到Excel数据批处理

2026年3月6日 互联网

一、项目背景与技术选型

在现代化企业管理系统中，地址数据管理是高频且关键的功能模块。本方案采用前后端分离架构，前端基于Vue.js构建动态交互界面，后端使用SpringBoot框架提供RESTful API服务，通过MyBatis-Plus简化数据库操作。该技术栈具有开发效率高、扩展性强、维护成本低等优势，特别适合作为毕业设计或实训项目的技术原型。

1.1 技术栈组成

  • 前端框架：Vue 3 + Element Plus（UI组件库）
  • 后端框架：SpringBoot 2.7 + MyBatis-Plus
  • 数据库：MySQL 8.0
  • 数据交换：Excel处理（Apache POI）、JSON格式API
  • 构建工具：Maven（后端）、Vite（前端）

1.2 核心功能规划

功能模块 技术实现要点 适用场景
地址CRUD RESTful API + 通用Mapper 单条数据增删改查
分页查询 PageHelper分页插件 大数据量分批次加载
Excel导入 POI解析Excel文件 批量数据初始化
Excel导出 动态生成Excel模板 数据备份与离线分析

二、数据库设计与实现

2.1 表结构设计

  1. CREATE TABLE `sys_address` (
  2.   `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  3.   `receiver_name` varchar(50) NOT NULL COMMENT '收件人姓名',
  4.   `phone` varchar(20) NOT NULL COMMENT '联系电话',
  5.   `province` varchar(50) NOT NULL COMMENT '省份',
  6.   `city` varchar(50) NOT NULL COMMENT '城市',
  7.   `district` varchar(50) NOT NULL COMMENT '区县',
  8.   `detail_address` varchar(200) NOT NULL COMMENT '详细地址',
  9.   `is_default` tinyint DEFAULT '0' COMMENT '是否默认地址',
  10.   `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  11.   `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  12.   PRIMARY KEY (`id`),
  13.   KEY `idx_receiver` (`receiver_name`,`phone`)
  14. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='地址信息表';

2.2 MyBatis-Plus实体类

  1. @Data
  2. @TableName("sys_address")
  3. public class Address {
  4.     @TableId(type = IdType.AUTO)
  5.     private Long id;
  7.     private String receiverName;
  8.     private String phone;
  9.     private String province;
  10.     private String city;
  11.     private String district;
  12.     private String detailAddress;
  14.     @TableLogic
  15.     private Integer isDeleted;
  17.     // 省略getter/setter...
  18. }

三、后端API开发实战

3.1 基础CRUD实现

  1. @RestController
  2. @RequestMapping("/api/address")
  3. public class AddressController {
  5.     @Autowired
  6.     private AddressService addressService;
  8.     @GetMapping("/{id}")
  9.     public Result<Address> getById(@PathVariable Long id) {
  10.         return Result.success(addressService.getById(id));
  11.     }
  13.     @PostMapping
  14.     public Result<Void> save(@RequestBody Address address) {
  15.         addressService.saveOrUpdate(address);
  16.         return Result.success();
  17.     }
  19.     @DeleteMapping("/{id}")
  20.     public Result<Void> delete(@PathVariable Long id) {
  21.         addressService.removeById(id);
  22.         return Result.success();
  23.     }
  24. }

3.2 Excel导入导出实现

导入处理逻辑

  1. @PostMapping("/import")
  2. public Result<Void> importExcel(@RequestParam("file") MultipartFile file) {
  3.     try {
  4.         List<Address> addressList = EasyExcel.read(file.getInputStream())
  5.             .head(Address.class)
  6.             .sheet()
  7.             .doReadSync();
  9.         // 数据校验
  10.         List<String> errorMessages = new ArrayList<>();
  11.         for (Address address : addressList) {
  12.             if (StringUtils.isBlank(address.getReceiverName())) {
  13.                 errorMessages.add("第" + (addressList.indexOf(address)+1) + "行：收件人不能为空");
  14.             }
  15.             // 其他校验...
  16.         }
  18.         if (!errorMessages.isEmpty()) {
  19.             throw new BusinessException("导入失败：" + String.join("；", errorMessages));
  20.         }
  22.         addressService.saveBatch(addressList);
  23.         return Result.success();
  24.     } catch (Exception e) {
  25.         throw new BusinessException("导入异常：" + e.getMessage());
  26.     }
  27. }

导出处理逻辑

  1. @GetMapping("/export")
  2. public void exportExcel(HttpServletResponse response) throws IOException {
  3.     List<Address> addressList = addressService.list();
  5.     response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
  6.     response.setCharacterEncoding("utf-8");
  7.     String fileName = URLEncoder.encode("地址列表", "UTF-8").replaceAll("\\+", "%20");
  8.     response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
  10.     EasyExcel.write(response.getOutputStream(), Address.class)
  11.         .sheet("地址信息")
  12.         .doWrite(addressList);
  13. }

四、前端界面开发指南

4.1 Vue组件结构

  1. src/
  2. ├── views/
  3. │   └── address/
  4. │       ├── AddressList.vue  # 主列表页面
  5. │       ├── AddressForm.vue  # 表单对话框
  6. │       └── ImportDialog.vue # 导入对话框
  7. ├── api/
  8. │   └── address.js          # API接口封装
  9. └── utils/
  10.     └── excel.js            # Excel处理工具

4.2 核心代码示例

表格组件配置

  1. <template>
  2.   <el-table :data="tableData" border>
  3.     <el-table-column prop="receiverName" label="收件人" width="120"/>
  4.     <el-table-column prop="phone" label="电话" width="150"/>
  5.     <el-table-column prop="fullAddress" label="完整地址">
  6.       <template #default="{row}">
  7.         {{ row.province }}{{ row.city }}{{ row.district }}{{ row.detailAddress }}
  8.       </template>
  9.     </el-table-column>
  10.     <el-table-column label="操作" width="180">
  11.       <template #default="{row}">
  12.         <el-button size="small" @click="handleEdit(row)">编辑</el-button>
  13.         <el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
  14.       </template>
  15.     </el-table-column>
  16.   </el-table>
  17. </template>

Excel导入实现

  1. <script setup>
  2. import { ref } from 'vue';
  3. import { importAddress } from '@/api/address';
  4. import { ElMessage } from 'element-plus';
  6. const fileRef = ref(null);
  8. const handleImport = async () => {
  9.   const file = fileRef.value.files[0];
  10.   if (!file) {
  11.     ElMessage.warning('请选择文件');
  12.     return;
  13.   }
  15.   const formData = new FormData();
  16.   formData.append('file', file);
  18.   try {
  19.     await importAddress(formData);
  20.     ElMessage.success('导入成功');
  21.     // 刷新表格数据...
  22.   } catch (error) {
  23.     ElMessage.error(error.message || '导入失败');
  24.   }
  25. };
  26. </script>
  28. <template>
  29.   <el-upload
  30.     ref="fileRef"
  31.     :show-file-list="false"
  32.     :auto-upload="false"
  33.     accept=".xlsx,.xls"
  34.   >
  35.     <el-button type="primary">选择文件</el-button>
  36.     <template #tip>
  37.       <div class="el-upload__tip">仅支持Excel文件</div>
  38.     </template>
  39.   </el-upload>
  40.   <el-button @click="handleImport" type="success">开始导入</el-button>
  41. </template>

五、项目部署与优化建议

5.1 部署方案

  • 开发环境：前后端分离部署，前端使用Vite开发服务器，后端使用SpringBoot内嵌Tomcat
  • 生产环境：
    • 前端：打包生成dist目录，部署至Nginx静态资源服务器
    • 后端：打包为JAR文件，使用Java命令启动
    • 数据库：建议使用云数据库服务或独立MySQL实例

5.2 性能优化

  1. 接口优化：

    • 对地址查询接口添加缓存（如Redis）
    • 实现分页查询避免全量数据加载

  2. Excel处理优化：

    • 大文件导入采用分片读取
    • 导出时添加进度提示

  3. 前端优化：

    • 表格数据虚拟滚动
    • 组件按需加载

六、扩展功能建议

  1. 地址智能解析：集成第三方地址解析API，自动拆分省市区
  2. 地图可视化：结合Web地图API展示地址分布
  3. 数据校验增强：电话号码格式校验、敏感词过滤
  4. 操作日志：记录地址变更历史

本方案完整实现了地址管理系统的核心功能，通过模块化设计和清晰的代码结构，既适合作为毕业设计项目，也可直接应用于企业级系统开发。开发者可根据实际需求进一步扩展功能模块，如添加权限控制、多语言支持等高级特性。

最新文章