832301317高炜翔_832301321黄林哿通讯录管理系统开发与部署作业

832301321黄林哿 2025-12-12 17:57:27

通讯录管理系统开发与部署作业

本作业对应课程	软件工程
团队名称	AAA软工小分队
作业要求	实现通讯录管理系统（含联系人收藏、多联系方式、Excel导入导出），团队协作开发并部署至云服务器，发布博客记录开发流程
本作业目标	掌握Web全栈开发流程、Git团队协作、云服务器部署，实现通讯录核心功能与附加功能
其他参考资料	Flask官方文档、Nginx部署教程、pandas Excel操作指南、阿里云服务器使用手册

一、项目概述

本次作业基于Flask（后端）+ HTML/CSS/JavaScript（前端）技术栈开发了一套通讯录管理系统，核心实现联系人收藏、多联系方式管理、Excel导入导出三大基础功能，并完成选做的阿里云服务器部署（支持公网访问）。项目全程采用团队协作模式，严格遵循统一代码规范，所有基础功能均落地实现，云部署功能也已验证可用，符合作业要求。

项目地址

GitHub团队仓库地址：https://github.com/SEAN1DIUDIU/832301317_GAO_WEIXIANG_832301321_HUANG_LINGE_SE_AS4
系统公网访问地址： http://120.78.238.3/

二、GitHub协作

1. 协作规范

分支管理：主分支main（仅合并测试通过的代码）、开发分支dev（日常开发），成员基于dev创建个人功能分支（如feature/favorite-contact、feature/excel-import）；
代码规范：Python遵循PEP8、JavaScript遵循ESLint；
代码审核：提交Pull Request后，需经另一位成员审核通过方可合并至dev分支。

三、功能实现思路

3.1 联系人收藏功能

实现思路

数据库层：在contacts表新增is_favorite布尔型字段（默认False），用于标记联系人收藏状态；
后端接口：新增PUT /api/contacts/{id}/favorite接口更新收藏状态，查询接口GET /api/contacts新增?favorite=true参数筛选收藏联系人；
前端交互：联系人条目添加星星图标收藏按钮（空心/实心区分状态），点击调用后端接口实时更新，新增“仅看收藏”筛选按钮。

核心代码片段（后端）

# models.py
class Contact(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50), nullable=False)
    phone = db.Column(db.String(20))
    email = db.Column(db.String(50))
    social_media = db.Column(db.String(50))  # 社交媒体账号
    address = db.Column(db.String(100))      # 物理地址
    is_favorite = db.Column(db.Boolean, default=False)  # 收藏标记

# controller/contact.py
@bp.route('/<int:id>/favorite', methods=['PUT'])
def update_favorite(id):
    contact = Contact.query.get_or_404(id)
    data = request.get_json()
    contact.is_favorite = data.get('is_favorite', False)
    db.session.commit()
    return jsonify({'message': '收藏状态更新成功'}), 200

3.2 多种联系方式添加功能

实现思路

数据库层：扩展contacts表，新增social_media（社交媒体账号）、address（物理地址）字段，与原有phone、email字段适配多联系方式存储；
前端表单：扩展新增/编辑联系人表单，添加社交媒体、物理地址输入框，提交时校验手机号、邮箱等格式合法性；
后端接口：接收所有联系方式字段，统一入库并在查询时完整返回。

核心代码片段（前端）

<!-- index.html 新增联系人表单 -->
<div class="form-group">
    <label>电话号码</label>
    <input type="tel" id="phone" class="form-control" placeholder="请输入电话号码">
</div>
<div class="form-group">
    <label>电子邮箱</label>
    <input type="email" id="email" class="form-control" placeholder="请输入电子邮箱">
</div>
<div class="form-group">
    <label>社交媒体账号</label>
    <input type="text" id="socialMedia" class="form-control" placeholder="如微信/QQ/微博">
</div>
<div class="form-group">
    <label>物理地址</label>
    <input type="text" id="address" class="form-control" placeholder="请输入联系地址">
</div>

3.3 Excel导入与导出功能

实现思路

导出功能：后端通过pandas读取数据库联系人数据，转换为DataFrame后生成Excel文件流，前端调用GET /api/contacts/export接口触发浏览器下载；
导入功能：后端新增POST /api/contacts/import接口，解析上传的Excel文件，校验字段合法性后批量入库，前端提供文件上传控件并反馈导入结果。

核心代码片段（后端导出）

# controller/contact.py
@bp.route('/export', methods=['GET'])
def export_contacts():
    contacts = Contact.query.all()
    # 构造数据列表
    data = [{
        '姓名': c.name,
        '电话号码': c.phone,
        '电子邮箱': c.email,
        '社交媒体账号': c.social_media,
        '物理地址': c.address,
        '是否收藏': '是' if c.is_favorite else '否'
    } for c in contacts]
    # 生成Excel
    df = pd.DataFrame(data)
    output = BytesIO()
    with pd.ExcelWriter(output, engine='openpyxl') as writer:
        df.to_excel(writer, sheet_name='通讯录', index=False)
    output.seek(0)
    # 返回文件流
    return send_file(
        output,
        mimetype='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        as_attachment=True,
        download_name='通讯录导出.xlsx'
    )

3.4 网页云部署

实现思路

服务器准备：采购阿里云ECS（Ubuntu系统），开放80、5000端口；
后端部署：高炜翔负责将Flask项目上传至服务器，创建虚拟环境安装依赖，通过systemd配置后端服务实现开机自启；
前端部署：黄林哿负责配置Nginx反向代理，将静态文件部署至/usr/share/nginx/html，同步修改前端接口地址为服务器公网IP；
联合验证：两人协作完成公网访问测试，确保所有功能正常响应。

四、程序运行效果

1. 运行截图

截图1: 系统首页

截图2：新增联系人表单

截图3：Excel导出成功

截图4：Excel导入功能（文件上传与导入成功提示）

截图5：云服务器访问验证

2. 完整运行视频

视频地址：https://live.csdn.net/v/505419

五、团队分工与贡献占比

1. 成员分工

成员	负责模块
成员1（高炜翔）	后端核心开发：数据库设计、联系人CRUD接口、Excel导入导出逻辑、后端服务配置、云服务器部署
成员2（黄林哿）	前端开发：页面布局与样式、收藏功能交互、Nginx配置、Flask配置、博客撰写

2. 贡献占比（总分100分）

成员1（高炜翔）：50分（后端核心功能与部署工作是系统可用的基础，涉及数据库设计、接口开发、服务器配置等关键环节，逻辑复杂度与操作难度较高）
成员2（黄林哿）：50分（前端交互与配置工作直接影响用户体验，涵盖页面开发、功能交互、环境配置及文档整理，覆盖系统交付全流程，工作量与重要性均等）

六、协作中遇到的问题及解决方案

成员1（高炜翔）遇到的问题

问题：Excel导出时中文乱码
解决方案：指定Excel引擎为openpyxl，确保文件编码为UTF-8，统一DataFrame中文字段名，同时协作测试前端下载后的文件编码兼容性，确认无乱码问题；
问题：新增is_favorite字段后，后端重启数据库表结构不兼容
解决方案：删除旧SQLite数据库文件，重启后端自动生成含新字段的数据表，同步告知更新前端查询参数，确保前后端字段匹配；
问题：云服务器部署后后端服务频繁断开
解决方案：通过systemd重新配置服务自启脚本，添加日志输出功能排查报错原因，发现是依赖包缺失导致，重新安装虚拟环境依赖并设置服务重启策略，最终实现稳定运行。

成员2（黄林哿）遇到的问题

问题：Nginx部署后显示默认欢迎页，无法加载前端文件
解决方案：清空Nginx默认目录并重新上传前端文件，修正配置文件路径（root /usr/share/nginx/html），赋予www-data用户文件读取权限，同时与成员确认服务器端口开放状态，确保Nginx服务正常监听80端口；
问题：前端调用后端接口出现跨域报错
解决方案：在Flask后端集成CORS扩展，协作配置跨域规则，放行前端服务器地址，测试后确认跨域问题解决；
问题：Flask配置文件中数据库连接地址错误导致前端无法获取数据
解决方案：检查config.py中数据库连接字符串，发现是本地路径配置未改为服务器路径，确认服务器端数据库存储路径后修正配置，重启服务后数据交互正常。

七、个人PSP表格

成员1（高炜翔）的PSP表格

阶段	预估耗时（分钟）	实际耗时（分钟）	备注
计划	30	25	制定后端开发与部署计划，明确与前端协作节点
需求分析	40	45	梳理接口、数据库及部署需求，确认前后端交互逻辑
数据库设计	60	70	设计表结构及字段属性，确保适配多联系方式与收藏功能
后端接口开发	240	270	实现CRUD、Excel导入导出接口，配合前端调试
云服务器部署	90	120	服务器采购、后端服务配置、系统自启设置
测试	60	80	接口单元测试、部署后功能验证、跨端兼容性测试
总结与文档	30	35	整理后端开发文档、部署步骤，协助博客素材收集
总计	550	645	-

成员2（黄林哿）的PSP表格

阶段	预估耗时（分钟）	实际耗时（分钟）	备注
计划	20	20	制定前端开发与配置计划，同步后端开发进度
需求分析	30	35	梳理前端交互、页面布局需求，确认与后端接口适配规则
前端页面开发	200	220	实现页面布局、收藏功能交互、导入导出文件上传控件
环境配置	60	90	Nginx反向代理配置、Flask跨域与数据库连接配置
测试	40	60	前端功能测试、跨浏览器验证、部署后全流程测试
博客撰写	80	100	整理项目内容、处理截图/视频、撰写完整博客
总结	20	25	复盘开发过程与协作问题，整理优化建议
总计	450	550	-

八、总结

本次作业通过双人团队紧密协作，完整落地了通讯录管理系统从需求分析、架构设计、编码开发到云服务器部署的全流程。系统采用Flask作为后端框架，搭配HTML/CSS/JavaScript构建前端界面，核心实现了联系人收藏、多联系方式管理、Excel导入导出三大基础功能，同时完成选做的阿里云服务器部署，公网访问稳定可靠，完全满足作业要求。

开发过程中，我们系统掌握了Web全栈开发关键技能：后端层面，熟练运用Flask搭建RESTful API，通过SQLAlchemy完成数据库建模与CRUD操作，借助pandas库实现Excel文件的解析与生成；前端层面，独立完成页面布局、交互逻辑编写，实现收藏状态实时切换、表单格式校验等功能；协作与部署层面，深入实践Git分支管理、Pull Request审核规范，成功配置Nginx反向代理与服务自启。

后续优化方向主要有三点：
1、新增用户登录模块，通过账号密码验证实现多用户数据隔离，满足多人使用场景；
2、完善Excel导入的错误处理机制，增加重复联系人提示、字段格式错误反馈等功能，提升用户操作体验；
3、优化前端响应式设计，适配移动端访问场景，让系统使用更加灵活便捷。

本次极限编程小组实践期间，我们针对性解决了数据库字段同步、Nginx路径配置错误、Excel中文乱码、跨域访问等多个实际问题，在协作排查中深化了技术理解与团队配合意识，不仅达成了掌握全栈开发与部署技能的核心目标，也积累了宝贵的实战经验。

...全文