EE308FZ 软件工程课程 Extreme Programming 任务

阶段	内容描述	计划时间（min）	实际时间（min）	差异分析
Planning（计划）	• 理解需求 • 确定技术栈（Flask + MySQL + HTML） • 制定开发计划	30	40	需求细节考虑不足，额外花时间确认数据库设计
Analysis（分析）	• 设计数据库表结构 • 规划 API 接口 • 明确前后端交互逻辑	40	50	电话号码唯一性约束需反复验证
Design（设计）	•编写`models.py`和`config.py` • 设计前端页面布局 • 定义错误处理机制	50	60	前端样式调整耗时略超预期
Coding（编码）	• 实现后端 CRUD 接口 • 编写前端 JS 交互逻辑 • 集成 `fetch` 请求与 DOM 操作	120	150	调试 CORS 和 `Failed to fetch` 问题占用较多时间
Test（测试）	• 手动测试增删改查功能 • 检查浏览器兼容性与错误提示	60	70	发现并修复一个删除后未刷新列表的 bug
Reporting（报告）	• 编写项目文档README • 整理 SQL 初始化脚本 • 填写 PSP 表格	40	50	文档撰写力求清晰，耗时稍长
总计		340	420	+80 分钟（+23.5%）

3.功能设计思路

3.1整体设计目标

轻量级：无需复杂云服务，无需公网 IP 或域名，单机即可运行

全功能：支持书签、多联系方式、Excel 导入导出等功能

前后端分离：前端 HTML + 后端 Python API，便于维护和扩展

3.2系统架构设计

bash 复制代码

+---------------------+
|     前端 (Frontend) |
|  contacts.html      | ← 用户界面（浏览器打开）
+----------+----------+
           |
    HTTP (localhost:5000)
           |
+----------v----------+
|     后端 (Backend)  |
|  Flask + SQLAlchemy |
+----------+----------+
           |
   SQLite / MySQL (本地数据库)

3.3技术选型

模块	技术	分析
前端	HTML	无框架依赖，直接双击 `contacts.html` 可预览（但 API 需后端）
后端	Python + Flask	轻量、易写、适合小型应用
数据库	MySQL	单文件存储，完美适配本地场景
Excel 处理	前端使用 SheetJS（xlsx）	避免后端依赖 `pandas/openpyxl`，减轻环境配置负担

3.4核心功能模块设计

3.4.1. 联系人管理

字段：
- name（必填）
- phone_numbers: list[str]（至少1个）
- emails: list[str]
- addresses: list[str]
- socials: list[str]
- is_bookmarked: bool（默认 False）

3.4.2. 书签（收藏）功能

点击 ★ 切换 is_bookmarked 状态
支持"仅显示收藏"筛选
前端实时更新，无需刷新页面

3.4.3. 多联系方式

每类联系方式可动态添加/删除
存储为 JSON 数组（SQLite 使用 TEXT + JSON 序列化）

3.4.4. Excel 导入/导出

导出：前端将联系人列表转为 Excel 并下载（.xlsx）
导入：用户选择 Excel 文件 → 前端解析 → 调用后端批量创建接口

4.github repository commit

5.项目展示

5.1代码截图

部分后端代码截图

部分数据库代码截图

部分前端代码截图

5.2运行视频

软件工程Extreme Programming任务演示

6.项目总结

6.1遇到的困难与解决方法

为了简化本地使用，我希望用户只需双击 contacts.html 文件即可打开前端界面（即通过 file://C:/.../contacts.html 访问）。但当页面尝试向 http://localhost:5000/api/contacts 发送 AJAX 请求时，浏览器控制台报错。经查询，这是因为现代浏览器出于安全策略，禁止从 file:// 页面发起网络请求（如 fetch/XHR），即使目标是 localhost，这导致前端无法与本地运行的 Flask 后端通信。

我们的解决方案是，将前端嵌入 Flask（简化架构），直接让 Flask 同时提供 API 和前端页面，避免两个服务：

python 复制代码

# app.py 
@app.route('/')
def index():
    return send_from_directory('.', 'contacts.html')

@app.route('/<path:filename>')
def static_files(filename):
    return send_from_directory('.', filename)

然后用户只需访问 http://localhost:5000 即可，完全无需额外 HTTP 服务器。

6.2成员贡献评价

|------------|----------------|-----------|-----------|-----------|
| 成员 | 分工 | 完成度（合计50） | 贡献度（合计50） | 总计（合计100） |
| LinQixuan | 后端，数据库，git仓库管理 | 25 | 25 | 50 |
| LinJuntian | 前端，测试，博客撰写 | 25 | 25 | 50 |