news 2026/4/15 17:54:10

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/4/13 13:55:59

售前报价Agent落地案例拆解:检索优先 vs 生成优先

"数据比算法更重要,业务比技术更重要。" 这句话我以前也常说,但真正理解还是最近几个月接触了很多中小企业的大模型应用项目之后。 今天来讲个很有代表性的售前报价 Agent 项目:一家年产值 2000 万的设备集成商,7000份…

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

联想Yoga是什么档次?一篇文章讲清其高端定位与智能查询新方式

当你想了解一款笔记本的定位时,联想乐享智能体可以像一位专业顾问,将复杂的参数对比转化为清晰易懂的档次分析。打开联想官网或相关电商平台,琳琅满目的笔记本电脑系列常常让人眼花缭乱。在众多系列中,联想Yoga以其独特的设计和卓…

作者头像 李华
网站建设 2026/4/15 14:45:57

“互联网+”智慧养老新模式:传统智慧与现代科技的深度融合

人口老龄化加速的今天,养老需求日益多元化,传统养老模式面临巨大挑战。中医药作为中华文明的瑰宝,其“治未病”“整体观”“辨证施治”等理念与智慧养老的核心需求高度契合。借助“互联网”技术,中医药正从“经验医学”走向“智慧…

作者头像 李华
网站建设 2026/4/15 14:06:33

SM7033PK_LED照明驱动芯片分析

SM7033PK 是 SOP8 封装小功率恒压控制芯片,核心优势在于 85Vac-265Vac 宽输入、3% 恒压精度、外围元件少、多重自恢复保护,适配 BUCK/FLYBACK/BUCK‑BOOST 拓扑,输出 3.3V‑18V、最大 150mA,主打低成本小功率恒压供电场景。以下是…

作者头像 李华
网站建设 2026/4/16 10:43:33

FTXUI动态布局构建:ResizableSplit组件深度解析

FTXUI动态布局构建:ResizableSplit组件深度解析 【免费下载链接】FTXUI :computer: C Functional Terminal User Interface. :heart: 项目地址: https://gitcode.com/gh_mirrors/ft/FTXUI 在现代化终端应用开发中,灵活可调的界面布局已成为提升用…

作者头像 李华