news 2026/2/23 5:38:48

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/2/20 23:29:24

字符串特性解析:Python不可变性引发的错误

引言 在Python编程中,字符串是最基础也是最常用的数据类型之一。[1]然而,许多开发者对于字符串的不可变性(immutability)特性理解不足,这导致了各种难以察觉的错误和性能问题。字符串的不可变性看似简单,实…

作者头像 李华
网站建设 2026/2/23 17:36:15

从零开始构建Agentic RAG:结合RAG与AI Agent的大模型新范式实战指南!

简介 本文详细介绍了Agentic RAG这一结合RAG与AI Agent的新范式。首先分别阐述了RAG的检索增强生成原理和AI Agent的感知决策机制,然后通过LangChain和LangGraph框架展示了从文档处理到向量存储,再到智能问答系统的完整实现流程。最后探讨了Agentic RAG…

作者头像 李华
网站建设 2026/2/20 12:52:04

EasyPoi 数据脱敏

结果规则Controller层 CrossOriginGetMapping("/exportStudentsDesensitization")public void exportStudentsDesensitization(HttpServletResponse response) throws IOException {List<Student> studentList studentService.list();List<StudentExportDe…

作者头像 李华