当前位置：首页 > news >正文

Extreme Programming

news 2026/8/17 8:31:34

作者：
陈泓宇（FZU ID：832301210 MU ID：23126221）
张志凯（FZU ID：832301205 MU ID：23126469）

Course for This Assignment	EE308FZ
Team Name	脱氧核苷酸
Assignment Requirements	核心围绕通讯录系统的开发与协作交付，支持用户将重要或高频联系人标记为收藏、多联系方式管理、Excel导入导出等功能
Objectives of This Assignment	使用了HTML5 ，用于构建页面结构和表单元素；同时还使用了 CSS3 ，用于样式设计和响应式布局
Other References	Vercel进行云端部署

一、项目相关地址

GitHub 团队仓库地址：【https://github.com/Witcher123-AI/xp-contacts-system】
项目 Web 访问地址：【https://xp-contacts-system.vercel.app/】
代码规范文档地址：【https://github.com/Witcher123-AI/xp-contacts-system/blob/main/README.md】

二、GitHub 提交记录与成员贡献统计

2.1 提交日志截图

2.2 成员提交次数统计

团队成员	提交次数
陈泓宇	6次
张志凯	5次

3. 功能实现思路

3.1 整体架构设计

本项目采用模块化设计，主要分为以下几个模块：

数据模型层：定义联系人数据结构（models/Contact.js）
服务层：处理数据存储和业务逻辑（services/目录）
- contactService.js：联系人CRUD操作
- storageService.js：本地存储管理
- importExportService.js：导入导出功能
视图层：用户界面展示（styles/目录）
控制层：事件处理和业务逻辑控制（script.js和scripts/app.js）

3.2 核心功能实现

3.2.1 收藏联系人功能

实现思路：

在联系人数据模型中添加isFavorite字段标识收藏状态
提供toggleFavorite函数切换收藏状态
收藏按钮使用星形图标，点击时切换样式和状态
在联系人列表中优先显示收藏的联系人

关键代码：

// 切换收藏状态functiontoggleFavorite(contactId){constcontact=contactService.getContactById(contactId);if(contact){contact.isFavorite=!contact.isFavorite;contactService.updateContact(contact);renderContacts();showContactDetails(contactId);}}

3.2.2 添加多种联系方式

实现思路：

使用数组存储联系人的多种联系方式
每种联系方式包含类型（手机、邮箱、地址等）和值
提供添加、删除联系方式的功能
在界面上动态渲染联系方式列表

关键代码：

// 联系人模型classContact{constructor(name,contactMethods=[]){this.id=generateId();this.name=name;this.contactMethods=contactMethods;this.isFavorite=false;}}

3.2.3 导入导出功能

实现思路：

使用SheetJS库（xlsx.js）处理Excel文件
导出功能：将联系人数据转换为Excel工作表格式并下载
导入功能：读取Excel文件，解析数据并添加到联系人列表

关键代码：

// 导出联系人到ExcelexportfunctionexportToExcel(contacts){constworksheet=XLSX.utils.json_to_sheet(contacts);constworkbook=XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook,worksheet,"联系人");XLSX.writeFile(workbook,"通讯录.xlsx");}// 从Excel导入联系人exportfunctionimportFromExcel(file){returnnewPromise((resolve,reject)=>{constreader=newFileReader();reader.onload=(e)=>{constdata=newUint8Array(e.target.result);constworkbook=XLSX.read(data,{type:'array'});constworksheet=workbook.Sheets[workbook.SheetNames[0]];constcontacts=XLSX.utils.sheet_to_json(worksheet);resolve(contacts);};reader.readAsArrayBuffer(file);});}

4. 程序运行截图

4.1 主界面

4.2 添加联系人

4.3 联系人详情

4.4 导入导出

文件导出：

文件导入：

4.5云端部署

5. 团队成员分工

成员	负责模块	具体工作
陈泓宇	数据层和服务层	设计联系人数据模型，实现本地存储，开发导入导出功能
张志凯	视图层和控制层	设计UI界面，实现样式，开发事件处理和用户交互功能