first assignment

[832301318gzk]

通讯录管理系统 - 项目说明文档
github：前端：https://github.com/wallkell/first-assignment
后端：https://github.com/wallkell/first-assignment-backend
PSP (Personal Software Process) 表格
PSP阶段 预估耗时（分钟） 实际耗时（分钟）
计划
· 估计任务时间 30 30
开发
· 需求分析 70 45
· 生成设计文档 30 30
· 设计复审 25 15
· 代码规范 35 20
· 具体设计 50 50
· 具体编码 350 360
· 代码复审 50 30
· 测试 60 150
记录时间花费
· 测试报告 40 35
· 计算工作量 20 15
· 事后总结 30 25
· 提出过程改进计划 30 20
合计 770 780
本地访问地址
前端访问地址： http://localhost:5173/
后端 API 地址：http://localhost:5165/swagger
项目概述
本项目是一个通讯录管理系统，采用前后端分离架构，实现了联系人的增删改查功能。
技术栈
前端：Vue 3， Vite Axios， Sublime Text ，原生 CSS
后端：ASP.NET Core，Entity Framework Core (EF Core)，SQL Server (LocalDB/SQL Server Express)，Swagger (Swashbuckle)，Visual Studio
功能演示
1.系统主界面

2. 添加联系人功能
3. 联系人列表展示
4. 删除联系人确认
   前端模块设计
   模块名称 功能职责 核心组件 / 逻辑
   联系人列表模块 展示所有联系人、触发编辑 / 删除操作、自动刷新数据 ContactList.vue（列表渲染、API 调用、删除确认框）
   添加 / 编辑模块 输入联系人信息、表单校验、提交数据 表单组件（输入框、按钮）、校验逻辑（必填项判断）、数据回显（编辑场景）
   API 封装模块 统一管理后端 API 接口，提供增删改查方法 api.js（Axios 实例配置、contactAPI 方法封装）
   全局状态模块 存储联系人列表数据，提供数据更新方法 Vue 3 r
   后端模块设计
   模块名称 功能职责 核心代码 / 逻辑
   控制器模块 接收前端请求，映射 API 接口，返回响应结果 ContactsController.cs（GET/POST/PUT/DELETE 接口实现）
   数据上下文模块 定义数据库表与实体映射关系 AppDbContext.cs（DbSet配置）
   实体模型模块 定义联系人数据结构，约束字段属性 Contact.cs（Id、Name、PhoneNumber 等字段定义）
   服务配置模块 配置跨域、Swagger、数据库连接等依赖服务 Program.cs（AddCors、AddSwaggerGen、AddDbContext 配置）

数据库设计
字段名 数据类型 约束条件 说明
Id INT 主键、自增 联系人唯一标识，后端自动生成，前端无需传入
Name NVARCHAR(50) 非空 联系人姓名（必填）
PhoneNumber NVARCHAR(20) 非空、唯一 联系人电话（必填，避免重复）
Email NVARCHAR(100) 可空、唯一 联系人邮箱（可选，支持格式校验）
CreatedAt DATETIME 非空、默认值（当前时间） 联系人创建时间，后端自动赋值，无需前端输入
接口设计
接口功能 请求方法 接口路径 请求参数（示例） 响应结果（示例）
查询所有联系人 GET /api/Contacts 无 200 OK，返回数组：[{"id":1,"name":"测试用户","phoneNumber":"13800000000","email":"[e-mail]","createdAt":"2024-01-01T10:00:00"}]
添加联系人 POST /api/Contacts JSON：{"name":"测试用户","phoneNumber":"13800000000","email":"[e-mail]"} 201 Created，返回新增对象（含 Id 和 CreatedAt）
修改联系人 PUT /api/Contacts/{id} 路径参数：id=1；请求体：{"id":1,"name":"修改后名称","phoneNumber":"13811111111","email":"[e-mail]"} 200 OK，返回修改后对象
删除联系人 DELETE /api/Contacts/{id} 路径参数：id=1 204 No Content（无返回体）
代码说明
后端：

ContactController：

AppDbContext:

Contact:

Program:

前端：
Contactlist:

Api:

Main:

心路历程：
初期，我带着对前后端分离架构的初步认知着手搭建项目，Vue 3 的组件化开发让前端界面模块化清晰，ASP.NET Core 的规整框架也让后端 API 设计有章可循。本以为按部就班就能顺利推进，却在联调阶段遭遇了一连串 “拦路虎”——Network Error 的跨域问题、400 Bad Request 的数据格式不匹配、500 错误的数据库连接失败，每一个报错都让进度陷入停滞。起初面对密密麻麻的错误日志，难免会焦虑急躁，甚至怀疑自己的配置是否存在根本性问题。好在坚持了下来，不断的解决问题，虽然还是有点小瑕疵，但已经让我学会了很多。