案例来源:SYSU SE305 课程大作业。互联网售票软件是比较常见的软件系统。通常由多个零售系统和多个供给系统系统。 机票、酒店房间、电影票似乎是风马牛大相关的系统,但它们之间存在极其相似的业务模型。 以电影票为例,格瓦拉、蜘蛛网、腾讯等等都做类似的电影票分销、推广业务,但票是由各大院线排期提供的。 分销-院线-影院形成了一个完整的生态体系。 本课程以大家熟悉的订票为例,学习分析、设计、开发的方法。
我所在的小组做的是一个叫做MonkeyEye的项目,实现一个简单的电影购票系统,并在项目完成过程中学习系统分析与设计,学习UML建模等技能。本系列文章将会以此项目为案例,总结整个项目的设计、建模与开发过程。
前端项目地址:https://github.com/SYSUMonkeyEye/MonkeyEye-FE
关于项目的功能和项目结构的介绍请查看上一篇博客。
【前端技术框架】
- vue
- vue-router
- vuex
- vue-material
- axios
【构建工具】
- 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属性,可以指定