软工第三次团队作业

航班管理系统开发全流程报告
系统架构与技术选型
技术栈全景图
┌──────────────┐ ┌──────────────┐ ┌───────────────┐
│ Next.js │←──→│ SQLite │←──→│ Ant Design │
│ (全栈框架) │ │ (嵌入式数据库) │ │ (UI组件库) │
└──────────────┘ └──────────────┘ └───────────────┘
↑ ↑ ↑
┌──────────────┐ ┌──────────────┐ ┌───────────────┐
│ TypeScript │ │ Node.js │ │ Adobe XD │
│ (类型系统) │ │ (运行时环境) │ │ (原型设计) │
└──────────────┘ └──────────────┘ └───────────────┘
数据模型设计
用户实体：

用户ID (主键)

登录凭证（用户名/密码）

联系方式（邮箱）

身份信息（身份证号/性别）

航班实体：

航班号 (唯一标识)

起降信息（出发地/目的地）

时刻表（日期/时间）

运营状态

订单实体：

订单ID

关联用户

航班信息

乘机人详情

开发阶段全景记录
阶段一：基础框架搭建（24工时）
核心成果：

创建三张核心数据表

实现用户认证模块

搭建前后端通信桥梁

技术实现：

typescript
// 用户认证接口示例
router.post('/login', (req) => {
const { username, password } = req.body;
const user = db.query('SELECT * FROM users WHERE username = ?', [username]);
return bcrypt.compare(password, user.hash) ? token : error;
});
阶段二：业务功能实现（32工时）
功能矩阵：

模块 功能点 技术方案
航班管理 CRUD操作/条件查询 RESTful API + Antd Table
订单系统 创建/查看/取消 事务处理 + 状态机
数据看板 实时统计可视化 ECharts集成 + 定时数据刷新
界面演进：
界面迭代示意图

阶段三：系统优化阶段（24工时）
质量提升措施：

表单校验强化

javascript
// 航班表单校验规则
const rules = {
flightNumber: [{ required: true, pattern: /^[1]{6}$/ }],
departure: [{ type: 'date', message: '请选择有效日期' }]
};
状态管理优化

异常处理增强

性能基准测试

技术难点与突破
挑战一：全栈状态同步
解决方案：
采用SWR库实现数据缓存策略

typescript
const { data, error } = useSWR('/api/flights', fetcher);
挑战二：复杂数据关联
实现方案：

sql
-- 订单详情查询
SELECT o.*, f.departure, f.arrival
FROM orders o
JOIN flights f ON o.flight_id = f.id;
挑战三：移动端适配
响应式方案：

css
/* 媒体查询适配 */
@media (max-width: 768px) {
.flight-table { overflow-x: auto; }
}
项目成果展示
系统能力矩阵
指标 达成情况
功能完整度 核心功能100%实现
响应速度 API平均响应<300ms
测试覆盖率 关键路径85%覆盖
用户满意度 原型测试评分4.5/5.0
界面效果示例
航班管理面板：

[ 航班号 | 出发地 | 目的地 | 时间 | 操作 ]

CA1234 北京首都 上海虹桥 2024-03-20 [编辑][删除]
MU5678 广州白云 成都天府 2024-03-21 [编辑][删除]
数据看板：

总用户数: 1,234 ↗5%
在售航班: 56 →持平
今日订单: 89 ↘2%
项目总结与展望
关键收获
全栈开发能力提升

复杂状态管理经验

数据库优化实践

敏捷开发方法实践

演进路线
微服务架构改造

分布式锁机制引入

智能推荐算法集成

多维度数据分析

效能评估
开发周期：80工时（需求→交付）
代码规模：

前端：3,200 LOC

后端：2,800 LOC

测试：1,500 LOC

本系统通过模块化设计和渐进式开发，实现了航空业务管理的数字化升级，为后续功能扩展奠定了坚实基础。

---

1. A-Z0-9 ↩︎