MonkeyEye电影售票系统--前端项目结构和协作规范

案例来源：SYSU SE305 课程大作业。互联网售票软件是比较常见的软件系统。通常由多个零售系统和多个供给系统系统。 机票、酒店房间、电影票似乎是风马牛大相关的系统，但它们之间存在极其相似的业务模型。 以电影票为例，格瓦拉、蜘蛛网、腾讯等等都做类似的电影票分销、推广业务，但票是由各大院线排期提供的。 分销-院线-影院形成了一个完整的生态体系。 本课程以大家熟悉的订票为例，学习分析、设计、开发的方法。

我所在的小组做的是一个叫做MonkeyEye的项目，实现一个简单的电影购票系统，并在项目完成过程中学习系统分析与设计，学习UML建模等技能。本系列文章将会以此项目为案例，总结整个项目的设计、建模与开发过程。

前端项目地址：https://github.com/SYSUMonkeyEye/MonkeyEye-FE

一、基本功能

1. 电影资讯
2. 购票
3. 用户信息
4. 收藏
5. 评论

用户使用该可以实现查看和搜索正在热映和即将上映的电影资讯，对感兴趣的电影可以进行收藏。想要观看某部电影，可以进行下单购票操作。对于已经放映的电影订单，用户可以对该订单对应的电影进行评分评价的操作。另外，用户还可以更新自己的个人信息。下面是整个应用的界面逻辑概要图，方便对应用有个直观的理解。

二、项目结构

1、顶层结构

整个项目最顶层的包（文件夹）主要有以下4个。

1. build：运行提供开发环境和构建项目的代码
2. config：项目的webpack打包配置、http代理配置
3. src：项目的源代码，主要都在src里面进行开发
4. dist：项目构建后的产品文件

无论是开发或者构建，都需要依赖到config里面的配置和src里面的源码。本项目使用webpack进行打包，build里面的代码会根据config的配置来调整webpack的打包规则，例如是否开启gzip、构建产品目标路径、HTTP代理规则等。调整好配置之后会将src里面的源码进行打包，如果是构建的话，由于config里面进行了设置，最终的产品文件都会存放到dist里面。

2、src目录结构

src里面主要分为components、common、assets、router和store这5个模块。本应用是一个前端单页应用，所以界面渲染、路由控制等操作都是在前端完成。每个页面抽象为一个组件，当然，界面中也可以包含它的子组件。这样，我们可以通过组件来定位每个界面的代码，方便管理。整个应用的数据都抽象到位于全局位置的store进行管理，实现界面和数据的分离