news 2026/6/10 12:28:57

Extreme Programming

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Extreme Programming

作者:
陈泓宇(FZU ID:832301210 MU ID:23126221)
张志凯(FZU ID:832301205 MU ID:23126469)

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

一、项目相关地址

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表格

阶段预估时间(小时)实际时间(小时)
计划11.5
需求分析22
设计32.5
编码810
测试23
文档21.5
总计1820.5

8.2 成员B(张志凯)的PSP表格

阶段预估时间(小时)实际时间(小时)
计划11
需求分析1.51.5
设计45
编码78
测试22
文档21.5
总计17.519

9. 项目总结

本项目实现了一个功能完整的通讯录管理系统,包含了收藏联系人、添加多种联系方式、导入导出等核心功能。项目采用模块化设计,代码结构清晰,易于维护和扩展。通过团队协作,我们成功完成了所有要求的功能,并解决了开发过程中遇到的各种问题。

在开发过程中,我们学习了如何进行模块化设计、如何实现本地存储、如何处理Excel文件等技术。同时,我们也提高了团队协作能力,学会了如何分工合作、如何解决冲突、如何进行代码审查等。

虽然项目已经完成,但仍有一些可以改进的地方,比如添加更多的联系方式类型、实现搜索功能、优化界面设计等。我们会继续学习和提高,不断完善这个项目。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 1:44:35

MCP协议优势全解析:一文了解其在AI应用中的关键作用!

简介 微软Teams通过MCP协议实现与第三方应用深度集成,MCP通过统一接口、跨平台兼容和协议解耦三大优势,打破不同厂商生态壁垒,实现大模型、工具与平台的互联互通,让开发者能够灵活选择最佳技术组合而不必重构业务逻辑。 2025 年 …

作者头像 李华
网站建设 2026/6/9 14:11:33

小锅米线的昆明流派:一锅一煮的仪式感与酸腌菜灵魂

在昆明,米线有无数种演绎方式,但“小锅米线”以其独特的烹饪仪式和鲜明的味觉个性,牢牢占据着许多本地人心中的头把交椅。它的精髓,在于“小锅”与“单煮”——每碗米线,都必须在一口小巧的铜锅或搪瓷锅里单独完成&…

作者头像 李华
网站建设 2026/6/10 9:50:13

数据可视化工具核心技巧快速上手完整手册

数据可视化工具核心技巧快速上手完整手册 【免费下载链接】cheatsheets Posit Cheat Sheets - Can also be found at https://posit.co/resources/cheatsheets/. 项目地址: https://gitcode.com/gh_mirrors/chea/cheatsheets 欢迎来到数据可视化工具的完整指南&#xff…

作者头像 李华
网站建设 2026/6/10 15:51:55

收藏必备!大模型微调完全指南:16种主流方法详解,从入门到精通,小白也能轻松掌握LLM微调技术

文章系统介绍大语言模型(LLM)微调的16种主流方法,分为参数高效微调(如LoRA、QLoRA)、行为塑造方法(如指令微调、RLHF)和能力扩展方法(如多任务微调、联邦微调)。详细解析各方法原理、优势、适用场景和实战建议,针对不同资源情况提供决策框架,…

作者头像 李华
网站建设 2026/6/10 15:53:23

13、*NIX系统设置与配置指南

*NIX系统设置与配置指南 在*NIX系统的使用过程中,合理的设置和配置对于系统的稳定运行和高效管理至关重要。本文将详细介绍系统库设置、 syslog.conf 配置以及网络中通用文件的相关内容。 1. 系统库设置 部分程序需要特定的库文件,这些库文件的位置设置通常由 ldconfig…

作者头像 李华