首页 » 技术分享 » 电影售票系统项目介绍

电影售票系统项目介绍

 

电影售票系统项目介绍

电影售票系统是基于web的电影购票网站,注册登录用户可在线浏览热映电影信息,电影排行榜,查看附近影院,支持在线购票,实时支付等。该系统UI界面简洁大方,操作简单,实时更新电影影院数据。

一.项目团队组建

我们的项目小组由6人组成,分别担任项目经理,技术经理,客户经理,测试工程师,质量保证经理,配置经理。因为这个项目是我们的课程作业,所以我们每个人都参与项目的开发,其中两人负责后端和数据库整合,一人负责设计UI界面,三人负责前端实现。并定期开展项目进展会议,测试项目会议等,我们项目从前期需求分析,项目设计到最后的开发,测试一共历时2个月。

二.项目整体设计

我们的项目实现了前后端分离,前端使用了vue框架,后端使用的是express框架。我们的电影售票网站主要由8个页面组成,分别是注册页面,用户登录页面,首页,电影页面,电影介绍页面,影院介绍页面,选座页面,支付页面。新用户通过输入手机号获取验证码进行注册,用户可以浏览热映电影信息,电影排行榜,也可以通过搜索框搜索想查询的电影,在电影页面可以查看电影剧情,演员表,播放时间,在线购票等,在影院页面可以查看影院具体介绍,电影排期,在线购票等。选择页面可以选择座位,并显示价格;支付页面可以选择支付方式支付购票。

页面之间的路由关系图如下:

 

三.项目文件目录

客户端:

 

服务端:

 

四.前端架构--vue架构

我们项目的前端框架是vue框架,vue是一个数据驱动框架,最大特色是可以很好的实现响应式的数据绑定。vue有非常强大的单文件组件,css+html+js都是写在一个.vue文件中,这样定义的组件很简洁,清晰。而且vue融合了react和angular的优点。

1)环境配置

首先我们要配置好项目开发环境,安装npm和vue-cli,安装成功后即可进行后面的开发。相关使用指令可以上网查询。除此之外还要安装git,因为github在项目开发过程中经常会用到的。

2)创建vue根实例

通过vue创建一个vue的根实例,在实例化vue需要传入一个选项对象,可以包含数据,模板,挂载元素,方法,生命周期钩子等选项。


3)数据绑定

数据绑定的式有很多种,其中项目中用到了“Mustache”语法(双大括号)的文本插值。无论何时,绑定的数据对象上的属性发生了改变,插值处的内容都会更新。

 

4)从后台获取数据

vue从后台获取数据,通过getData()函数调取后台的数据,传入的参数是相应的API接口,后台返回请求的数据,项目中一个例子的代码如下:

5)class和style绑定

项目中还用到class和style绑定,可以用v-bind处理操作元素的class列表和它的内联样式。可以传给v-bind:class一个对象,动态地切换class,也可以在对象中传入更多属性用来动态切换对个class。以下的代码是通过动态切换类来改变电影主页的海报背景图片。

6)条件渲染和列表渲染

V-if是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

 

V-for指令根据一组数组的选项列表进行渲染。V-for指令需要以item in items 形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。

 

7)事件处理器

我们还用了事件处理器,可以用v-on指令监听DOM事件来触发一些javascript代码。

 

五.后端架构--express架构

我们项目后台框架是express框架。express是一个基于Node.js平台的极简,灵活的web应用开发框架。Express框架的核心特性是可以设置中间件来响应HTTP请求,,定义了路由表用于执行不同的HTTP请求动作,可以通过向模板传递参数来动态渲染HTML页面。

1)底层服务器

底层HTTP服务器。使用简洁的代码搭建本地http服务器。首先使用requie函数引入内置模块http,使用http.createServer()将服务器保存至serve变量,它将一个函数作为参数监听请求,启动服务器。

 

2)中间件

中间件。中间件是一个函数,它可以访问请求对象,响应对象和web应用中处于请求-响应循环流程中的中间件,一般命名为next的变量。中间件的主要功能包括,执行任何代码,修改请求和响应对象,终结请求-响应循环,调用堆栈中的下有一个中间件。

3)路由

路由。路由的产生是通过HTTP的各种方法(GET,POST)产生的,中间件可以跟路由路径跟特定的HTTP方法绑定,也可以跟所有的方法绑定。其中通过express应用的use(all),把中间件同路由路径的所有HTTP方法绑定。

 

4)响应和请求

Request对象表示HTTP请求,包含了请求查询字符串,参数,内容,HTTP头部等属性。response对象表示HTTP响应,即在接受到请求时向客户端发送HTTP响应数据。

六.心得与体会

作为项目小组的项目经理,在这次项目中真的学到了很多东西。项目经理需要跟紧项目的进度,还组织好每次会议,前期的团队破冰,需求分析,项目设计,接着任务分配,项目定期厉害,测试会议,总结会议等。小组中每位成员都参与技术开发,我主要负责前端部分,学会怎么使用vue框架,使用github(一个很棒的项目开发工具),当然过程中也遇到很多问题,不过我们都尽量去解决了,还好我们项目启动得比较早,所以时间比较充足点。

转载自原文链接, 如需删除请联系管理员。

原文链接:电影售票系统项目介绍,转载请注明来源!

0