EE308FZ 软件工程课程 Extreme Programming 任务

Course for This Assignment：EE308FZ

Team Members：LinQixuan | LinJuntian

MU ID：23126302 | 23125543

Repository Address: LinQixuan1985/Extreme-Programming

目录

1.任务要求 Requirements

2.PSP table

3.功能设计思路

3.1整体设计目标

3.2系统架构设计

3.3技术选型

3.4核心功能模块设计

3.4.1. 联系人管理

3.4.2. 书签（收藏）功能

3.4.3. 多联系方式

3.4.4. Excel 导入/导出

4.github repository commit

5.项目展示

5.1代码截图

5.2运行视频

6.项目总结

6.1遇到的困难与解决方法

6.2成员贡献评价

1.任务要求 Requirements

1.1 书签

实现的关键功能之一是允许用户收藏/收藏联系人。这应允许用户将某些联系人标记为重要或频繁联系，以便他们未来快速访问这些联系人。
1.2. 添加多个联系方式

在你的申请中，你应该允许用户将多个联系方式关联到一个联系人。这可能包括但不限于电话号码、电子邮件地址、社交媒体账号和实体地址。
1.3. 导入导出

导出：将每个联系人及其地址簿中的所有信息导出到Excel表格。正确格式化电子表格，将每个联系人的信息放在单独行，每种信息类型（例如姓名、电话号码）放在单独列。
导入：能够读取并添加格式正确Excel文件中的信息到通讯录中。
1.4. 网页部署（可选）

将通讯录部署到云服务器上。该项目部署在华为云或阿里云等服务器上，且与localhost的链接不算作云部署

2.PSP table

3.功能设计思路

3.1整体设计目标

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

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

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

3.2系统架构设计

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

3.3技术选型

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运行视频

6.项目总结

6.1遇到的困难与解决方法

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

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

# 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成员贡献评价