news 2026/8/1 17:49:22

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/8/2 1:34:02

定制开发不踩雷:评估上位机软件定制公司的5个核心问题与答案

一、调研背景与选型方法论1.1 行业背景:工业智能化催生定制化需求分化据《2025年中国智能制造发展报告》数据显示,超过68%的制造企业存在设备数据孤岛、生产可视性不足等问题,上位机软件作为连接设备层与管理层的核心枢纽,其定制开…

作者头像 李华
网站建设 2026/8/1 18:41:49

光刻胶增感剂用4,4-二(N,N′-二甲基-氨基)苯甲酮(EMK)

4,4-二(N,N′-二甲基-氨基)苯甲酮EMK1 化学概述与重要性4,4-二(N,N′-二甲基-氨基)苯甲酮(EMK),也被称为米蚩酮(Michlers Ketone),是一种具有重要工业价值的光…

作者头像 李华
网站建设 2026/8/1 5:24:57

一物一码源头常见有哪些?认准这类优质源头少走弯路

随着一物一码技术在防伪、营销、渠道管控等场景的普及,越来越多企业开始布局相关业务,但第一步就犯了难:市面上的一物一码源头五花八门,该怎么选?选不对源头,不仅后续系统不稳定、服务没保障,还…

作者头像 李华
网站建设 2026/8/2 1:05:56

企业资产管理(EAM)围绕“让设备在正确的时间、以最低的总成本、发挥最大价值”这一核心目标,把预防性维护计划、工单管理和设备生命周期跟踪三大模块做成闭环

企业资产管理(EAM)围绕“让设备在正确的时间、以最低的总成本、发挥最大价值”这一核心目标,把预防性维护计划、工单管理和设备生命周期跟踪三大模块做成闭环。下面用“流程功能落地要点”的结构,把三者的逻辑关系与最佳实践一次讲…

作者头像 李华
网站建设 2026/8/1 17:36:32

从并网到离网,尽在掌握:分布式储能微网智能监控与能量管理系统

在 “双碳” 目标与能源转型的双重驱动下,分布式储能微网已成为工业园区、工商业企业、偏远矿区实现能源自主可控的核心载体,而智能监控与能量管理系统则是决定微网高效运行、灵活切换的 “智慧大脑”。无论是并网模式下的峰谷套利、需求响应&#xff0c…

作者头像 李华