MonkeyEye电影售票系统--前端技术要点总结

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

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

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

关于项目的功能和项目结构的介绍请查看上一篇博客。

【前端技术框架】

1. vue
2. vue-router
3. vuex
4. vue-material
5. axios

【构建工具】

1. webpack

一、预编译语言(预处理语言)

项目中使用pug预处理语言来编写前端的HTML，非常简洁和方便。用pug来编写HTML结构，编写完后经过处理器处理之后会变成标准的HTML，代码上少了很多闭合标签显得更加简洁，而且结构也很清晰。类名和id的写法或者其他HTML标签属性的写法也很简洁。

至于编写样式的CSS，则是使用了sass。缩进嵌套选择器，不用打花括号等特性用起来都特别爽。

pug和sass支持的功能还有很多，例如pug的mixin，sass的模块化样式等等，此处不作介绍，官方文档已经有了详细的描述。

二、Vue 组件化

Vue支持前端组件化，可以将前端界面或者界面中的某些模块划分为组件，每个组件可以使用一个Vue文件来实现，也可以将代码分散在html/css/js文件中。我们这里都是采取Vue文件的方式，每个Vue文件实现一个组件。Vue文件通过template、script、style三种标签将HTML、js、css三种类型的代码进行划分，三种放在同一个文件里，根据组件定位到代码，很方便进行代码管理。通过在标签中指定lang属性，可以指定