作者:
陈泓宇(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界面,实现样式,开发事件处理和用户交互功能 |
6. 贡献比例评估
| 成员 | 贡献比例 |
|---|---|
| 陈泓宇 | 50% |
| 张志凯 | 50% |
7. 合作中遇到的困难和解决方案
7.1 成员A(陈泓宇)遇到的困难
困难:Excel导入导出功能实现复杂,需要处理多种数据格式和边界情况
解决方案:
- 研究SheetJS库的文档和示例
- 先实现基本功能,再逐步优化
- 编写测试用例验证各种数据格式
7.2 成员B(张志凯)遇到的困难
困难:动态添加多种联系方式的UI交互设计复杂
解决方案:
- 参考其他优秀应用的设计
- 使用Flex布局实现灵活的界面
- 添加明确的添加/删除按钮,提高用户体验
8. PSP表格
8.1 成员A(陈泓宇)的PSP表格
| 阶段 | 预估时间(小时) | 实际时间(小时) |
|---|---|---|
| 计划 | 1 | 1.5 |
| 需求分析 | 2 | 2 |
| 设计 | 3 | 2.5 |
| 编码 | 8 | 10 |
| 测试 | 2 | 3 |
| 文档 | 2 | 1.5 |
| 总计 | 18 | 20.5 |
8.2 成员B(张志凯)的PSP表格
| 阶段 | 预估时间(小时) | 实际时间(小时) |
|---|---|---|
| 计划 | 1 | 1 |
| 需求分析 | 1.5 | 1.5 |
| 设计 | 4 | 5 |
| 编码 | 7 | 8 |
| 测试 | 2 | 2 |
| 文档 | 2 | 1.5 |
| 总计 | 17.5 | 19 |
9. 项目总结
本项目实现了一个功能完整的通讯录管理系统,包含了收藏联系人、添加多种联系方式、导入导出等核心功能。项目采用模块化设计,代码结构清晰,易于维护和扩展。通过团队协作,我们成功完成了所有要求的功能,并解决了开发过程中遇到的各种问题。
在开发过程中,我们学习了如何进行模块化设计、如何实现本地存储、如何处理Excel文件等技术。同时,我们也提高了团队协作能力,学会了如何分工合作、如何解决冲突、如何进行代码审查等。
虽然项目已经完成,但仍有一些可以改进的地方,比如添加更多的联系方式类型、实现搜索功能、优化界面设计等。我们会继续学习和提高,不断完善这个项目。