未分类

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

Web

案例来源：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进行管理，实现界面和数据的分离，并且应用单向数据流的思想（后面介绍）。

  1. components：所有界面组件
  2. common：公共样式、组件或者工具函数
  3. assets：图标、图片等静态资源
  4. router：前端路由
  5. store：应用数据状态

结构和依赖关系

界面会引用到common里面的样式或工具，也可能引用assets的资源，例如引用某个图标。界面的路由配置和跳转控制需依赖router，而应用数据则是存储在store之中，因此也需要依赖到store。

3、细分目录结构

根据设计图确定下来的应用界面，根据业务逻辑关联性大致可以分为6个部分，即前面【一】中展示的界面关系图中用红色框框起来的6个部分。电影资讯界面和个人中心界面分为同个部分的主要原因是它们作为进入应用之后的两个依赖tab切换的主界面，从代码上还是有所关联的，将它们的代码划分在同一个包中比较方便管理。

公共包common的内容主要有公用的样式和工具函数，所以需要有css、sass、utils这几个包。assets由于目前只有少量静态图片资源，其他资源多数是从服务器动态加载，所以这里只需要一个images包。router里面已经不需要继续细分了，直接对前端路由规则进行配置即可。store里面可以根据数据继续划分为模块，每个模块对应一个js文件，存放在module包中，例如可以划分为电影模块、评论模块、订单模块等等。

结构和依赖关系

4、项目详细结构描述

最后，结合各种入口文件和项目的技术框架需要的文件，可以确定项目需要的文件结构如下所示（具体到每个文件的详细描述）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
├─build：存放构建用到的相关文件
├─config：存放配置文件
├─data：存放伪数据以及数据生成器供前端开发使用；也可以存放图片等静态资源
├─src：前端开发的源码
│   ├─assets：图片等静态资源
│   ├─common：公共样式或js文件
│   │    ├─css：字体和图标文件
│   │    │  ├─font.css：字体文件
│   │    │  └─icon.css：图标文件
│   │    ├─sass：公共样式文件
│   │    └─utils：公共工具函数库
│   │       ├─DateUtils.js：处理时间日期的工具函数
│   │       ├─Form.js：表单工具函数
│   │       └─LazyLoad.js：实现图片懒加载
│   ├─components：前端组件
│   │    ├─auth：登录注册相关界面
│   │    │   ├─Load.vue：加载控件
│   │    │   ├─Signin.vue：登录界面
│   │    │   └─Signup.vue：注册界面
│   │    ├─comment：电影评论评分相关界面
│   │    │   └─MovieComment.vue：对电影进行评论评分界面
│   │    ├─main：应用的主体界面
│   │    │   ├─Main.vue：主体界面外层容器
│   │    │   ├─Me.vue：个人中心界面
│   │    │   └─Movies.vue：电影资讯界面
│   │    ├─movie：电影相关界面
│   │    │   ├─MovieDetail.vue：电影详情界面
│   │    │   └─MovieSearch.vue：电影搜索界面
│   │    ├─order：订单相关界面与组件
│   │    │   ├─MyOrders.vue：全部/待付款/待放映/已放映订单列表界面
│   │    │   ├─OrderDetail.vue：订单详情界面
│   │    │   ├─OrderPay.vue：付款界面
│   │    │   ├─PasswordInput.vue：支付密码输入控件
│   │    │   ├─Reservation.vue：确认下单界面
│   │    │   ├─SelectCoupon.vue：选优惠券界面
│   │    │   ├─SelectScreen.vue：选场次界面
│   │    │   └─SelectSeat.vue：选座位界面
│   │    └─profile：用户中心相关界面
│   │        ├─ChangeInfo.vue：修改个人信息界面
│   │        ├─Coupon.vue：优惠券组件
│   │        ├─Coupons.vue：优惠券列表界面
│   │        ├─MovieCollection.vue：收藏/想看/已看电影列表界面
│   │        └─UserInfo.vue：用户个人信息界面
│   ├─router：前端路由
│   │    └─index.js：前端路由信息配置文件
│   ├─store：应用的全局数据状态管理
│   │    ├─modules：数据状态模块
│   │    │   ├─auth.js：登录注册相关接口与数据状态
│   │    │   ├─comment.js：电影评价相关接口与数据状态
│   │    │   ├─coupon.js：优惠券相关接口与数据状态
│   │    │   ├─favorite.js：电影收藏相关接口与数据状态
│   │    │   ├─movies.js：电影相关接口与数据状态
│   │    │   ├─order.js：订单相关接口与数据状态
│   │    │   └─screen.js：场次相关接口与数据状态
│   │    └─index.js：数据状态模块配置文件
│   ├─App.vue：应用的最外层结构
│   └─entry.js：应用的入口文件；第三方组件和公共文件在此引入
└─app-server.js：应用服务器，提供构建后的前端静态资源，并进行接口代理

三、协作规范

该项目使用git和GitHub进行协作开发和代码管理，GitHub上的代码仓库由我进行管理，其他成员需要fork项目然后通过在GitHub发起pull request的方式提交他们的代码。本仓库有2个分支，master和dev。主要在dev分支上进行开发和测试，功能完善之后再合并到master。GitHub上的代码量和提交次数统计只会统计master分支上的提交，所以有时候可能因为要统计成员活跃度的关系也需要合并一下dev的内容到master分支。

1
2
├─master
└─dev

首先需要在github上fork本仓库到他们自己的github，将fork之后的远程仓库克隆到本地，并在本地仓库上添加上游仓库，即源仓库。fork一般是fork了仓库的master分支，所以可能还需要自己去切出dev分支然后拉取源仓库dev分支上的内容。

1
2
3
4
5
6
git clone https://github.com/{你的github}/MonkeyEye-FE
# 上游的源仓库地址只需添加一次
git remote add upstream https://github.com/SYSUMonkeyEye/MonkeyEye-FE
# 切出dev分支并拉取源仓库dev分支上的内容
git checkout -b dev
git pull upstream dev

完成之后便有了以下两种方式可以进行协作开发贡献代码。

方式一

要开发某个模块某个功能的时候，在你的本地仓库创建一个分支，例如mydev。

1
git checkout -b mydev

切换之后你的本地仓库上就有3个分支了，如下所示。checkout之后会自动切换到mydev分支。

1
2
3
├─master
├─dev
└─mydev

在mydev分支上进行开发和测试，完成相应的功能或者模块，完成之后再切回到dev分支将mydev的内容合并到dev。

1
2
3
4
5
# mydev分支上提交你的更新
git add *
git commit -m "add something"
# 切换到dev分支
git checkout dev

由于在你开发过程中，我也可能在开发并且更新了仓库，为了避免冲突，在合并分支之前你还需要更新你本地仓库的dev分支。先在本地仓库上添加上游仓库upstream，上游仓库即我的仓库，然后使用pull命令从上游仓库拉取更新。

1
2
# 拉取上游的源仓库dev分支上的更新
git pull upstream dev

更新完dev之后，将mydev分支合并到dev分支并提交到你自己的远程仓库。完成之后，mydev分支就可以删除了，你也可以继续留着。

1
2
3
4
5
6
# 将mydev分支合并到dev，可能会有冲突需要自行解决
git merge mydev
# 推送到你自己的远程仓库，注意这里是push到origin dev，不是upstream dev
git push origin dev
# 删除mydev分支
git branch -d mydev

推送到自己的远程仓库后，就可以到Github上面给我发Pull Request了，然后等待我合并你的代码。

方式二

方式二相对更简单一些，不用多次切换分支。可以直接在fork之后的的dev分支上面进行开发，然后在发送PR之前先从源仓库拉取更新。

1
2
3
4
5
6
7
# 提交你的代码
git add *
git commit -m "add something"
# 拉取上游的源仓库dev分支上的更新，可能会有冲突需要自行解决
git pull upstream dev
# 推送到你自己的远程仓库，注意这里是push到origin dev，不是upstream dev
git push origin dev

分享到