832301318郭子锴_832301301欧扬

832301318gzk 2025-12-12 23:31:16

通讯录管理系统开发与部署作业

本作业对应课程	软件工程
团队名称	666小组
作业要求	实现通讯录管理系统（含联系人收藏、多联系方式、Excel导入导出），团队协作开发，发布博客记录开发流程
本作业目标	掌握Web全栈开发流程、Git团队协作、云服务器部署，实现通讯录核心功能与附加功能

一、项目概述

本次作业基于visual studio（后端）+ HTML/JavaScript（前端）技术栈开发了一套通讯录管理系统，实现了联系人收藏、多联系方式管理、Excel导入导出三大基础功能。项目所有基础功能均落地实现，符合作业要求。

项目地址

GitHub团队仓库地址：https://github.com/oy20050623/mu-se-work

功能实现思路

后端（.NET 8 Web API + EF Core + SQLite）

数据层设计：
- 核心实体：Contact（联系人主表，含收藏字段IsBookmarked）、ContactDetail（联系方式明细表，关联联系人 ID，支持多类型 / 多值）；
- 用 EF Core + SQLite 实现数据持久化，配置一对多关系（联系人 - 联系方式），级联删除保证数据一致性。
接口开发：
- 基础 CRUD：联系人增删查改、联系方式单 / 批量添加；
- 收藏功能：切换联系人收藏状态、查询收藏列表；
- Excel 处理：导出（EPPlus 生成 Excel 流）、导入（解析 Excel 文件，批量创建 / 更新联系人 + 联系方式）；
- 跨域配置：允许前端跨域请求，保证前后端通信。
数据库迁移：
- 自动 / 手动迁移生成数据库表，无需手动建表
- 核心代码

前端（Vue3 + Vite + Element Plus + Axios）

环境配置：
- 封装 Axios 统一请求，通过环境变量区分后端接口地址；
- 全局注册 Element Plus，快速实现表单、表格、文件上传等 UI 组件。
核心功能实现：
- 联系人管理：表单创建联系人，表格展示列表，关联多联系方式；
- 收藏操作：按钮切换收藏状态，筛选展示收藏列表；
- Excel 交互：导出（接收后端文件流下载）、导入（上传 Excel 文件，FormData 格式提交）；
- 交互优化：全局消息提示、热更新、错误统一处理。
- 核心代码：

三、程序运行效果

1. 运行截图

四、团队分工与贡献占比

1. 成员分工

成员	负责模块
成员1（郭子锴）	后端核心开发：数据实体模块，数据库访问模块，核心业务接口模块，配置模块
成员2（欧扬）	前端开发：页面布局与样式，收藏功能交互，博客撰写

2. 贡献占比（总分100分）

郭子锴：50分
欧扬：50分

六、协作中遇到的问题及解决方案

成员1（郭子锴）遇到的问题

数据库迁移命令无法识别

原因：未安装EF Core全局工具，缺失Microsoft.EntityFrameworkCore.Design包

数据库连接失败/表未自动创建

原因：连接字符串路径错误，自动迁移代码未执行

成员2（欧扬）遇到的问题

环境变量读取失败

原因：文件命名错误，变量未加vite前缀

端口冲突

原因：5173端口被占用，代理协议不匹配

七、个人PSP表格

郭子锴的PSP表格

阶段	预估耗时（分钟）	实际耗时（分钟）
计划	30	30
需求分析	40	30
数据库设计	60	60
后端接口开发	200	300
测试	50	50
总结与文档	20	30
总计	400	500

欧扬的PSP表格

阶段	预估耗时（分钟）	实际耗时（分钟）
计划	30	20
需求分析	40	30
前端页面开发	210	250
环境配置	50	100
测试	40	70
博客撰写	30	80
总结	20	30
总计	420	580

总结

项目启动初期，虽然明确了核心功能，但对技术细节的把控严重不足。比如后端一开始执着于用 Visual Studio 的 PMC 执行 EF Core 迁移，反复遇到 “命令未识别” 的报错，一度陷入焦虑；前端创建项目后，因未正确进入项目目录执行npm install，导致依赖缺失，启动后页面空白，甚至不清楚 “环境变量” 的作用，直接硬编码后端地址，后续联调时频繁修改代码。

这一阶段的核心问题是 “重功能、轻配置”，忽略了项目基础环境搭建的重要性，总想着快速实现业务逻辑，却因基础配置问题停滞不前。现在回头看，初期的迷茫本质是对技术工具（EF Core CLI、Vite、npm）的核心逻辑不理解，只机械照搬命令，遇到报错就手足无措。

完成项目的那一刻，除了成就感，更多的是一种 “豁然开朗”：原来前后端分离架构的核心是 “各司其职”。

...全文