企业官网建设流程全解析

作者：
陈泓宇（FZU ID：832301210 MU ID：23126221）
张志凯（FZU ID：832301205 MU ID：23126469）

一、项目相关地址

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 成员提交次数统计

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. 团队成员分工

6. 贡献比例评估

7. 合作中遇到的困难和解决方案

7.1 成员A（陈泓宇）遇到的困难

困难：Excel导入导出功能实现复杂，需要处理多种数据格式和边界情况

解决方案：

• 研究SheetJS库的文档和示例
• 先实现基本功能，再逐步优化
• 编写测试用例验证各种数据格式

7.2 成员B（张志凯）遇到的困难

困难：动态添加多种联系方式的UI交互设计复杂

解决方案：

• 参考其他优秀应用的设计
• 使用Flex布局实现灵活的界面
• 添加明确的添加/删除按钮，提高用户体验

8. PSP表格

8.1 成员A（陈泓宇）的PSP表格

8.2 成员B（张志凯）的PSP表格

9. 项目总结

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

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

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