1、全日制本科生毕业论文题 目： 基于 AngularJS 的网上电影购票系统学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术 学生姓名： 学号： XXXXXXXXXX 指导教师： 职称： 年 月 日第 1 页 （共 19 页）基于 AngularJS的网上电影购票系统摘 要：本论文按照软件开发设计思想，从需求分析、系统设计、详细设计、系统实施和系统开发等方面，详细阐述了网上电影购票系统的全过程，可用手机购票。该网站是基于AngularJS 框架开发的，提高了网页制作的快速性、安全性和专业性。关键词：AngularJS；手机端；电影购票Abstract: according to th
2、e design idea of software development ,and ideas, this paper explaining the whole process of online movie ticketing systems in detail form requirements analysis, system design, detailed design, system implementation,system development and so on. The website is developed based on AngularJS framework,
3、 it improved the rapidity, security and professionalism of web page making.Key words：AngularJS; mobile terminal; movie ticket 随着时代的发展，用户对手机的依赖性越来越高，很多事情都是通过手机完成的，比如网上订餐、网上购票等，所以网上购买电影票也成为了热门需求。用户不用到电影院门口不用排队买票，不用找零等麻烦，就能轻轻松松的完成购票。在网上购票可以根据自己的时间安排选择合适的场次，减少了时间的浪费。所以网上电影购票系统也应运而生。1 需求分析人工售票的手续繁琐，效率低下，
4、用工成本高，而售票系统提高效率，节省成本，减少人工，提升用户体验。通过需求分析设计模块如下：（1）用户注册模块用户注册模块用于用户填写自己的用户名、密码，注册成为网站用户，主要是对用户名的验证，用户名是否已被注册，密码格式是否正确。第 2 页 （共 19 页）（2）用户登录模块用户登录模块用于用户填写用户名和密码，登录进入网站，主要是验证用户名和密码是否正确。（3）电影模块电影模块包含电影列表、电影选座购票等。（4）影院模块影院模块包含电影院的详细地址。（5）选座购票模块选座购票模块有三个色块，分别表示已售票、已选票、未选票，方便用户查看哪些座位没有售出。点击选座按钮时，先判断用户是否登录，如
5、果没有登录，先跳转到登录页面，登录成功之后才能成功购票。选座按钮点击成功之后，跳转至支付页面。（6）支付模块支付模块先判断用户余额是否充足，如果余额不足，跳转到充值页面进行充值，而已经选好的票保存在购物车里，也可以在充值完成后返回继续支付。（7）用户模块用户模块包含账号信息和个人操作：充值、未支付、已买票、修改密码等。2 网页设计整个网页前台、后台结构如图 2-1、图 2-2 所示。2.1 系统的顺序图2.1.1 用户前台浏览顺序图当访问网页后，先登录或注册用户登；登录网站成功之后跳转到电影列表，选择电影之后跳转到电影场次选择页面，可选择电影院及电影播放时间；跳转到选座购票页面；选座成功跳转到
6、付账页面；付账完成后跳转到用户页面，可查看自己的购票信息。如图 2-3 所示。第 3 页 （共 19 页）图 2-1 网页前端结构图图 2-2 网页后台结构图图 2-3 用户前台浏览顺序图2.1.2 用户后台数据顺序图管理员登录之后，选择需要操作的模块，用户模块可删除用户的票；管理员1 登录成功 2、选择电影电影列表2、选票选座购票2、选择场次电影时刻表 支付管理员登录主页编辑场次模块编辑用户模块编辑管理员模块编辑电影院模块编辑电影模块财务结算电影列表选座购票电影时刻表支付用户主页登录/注册金额及充值用户详情未付费已买票第 4 页 （共 19 页）模块可添加、删除账户；电影模块可添加、删除、修
7、改电影；电影院模块可添加、删除、修改电影院；场次模块可添加、删除、修改场次；财务模块可查看系统的盈利信息。如图 2-4 所示。图 2-4 用户后台数据顺序图是否错误正确存入数据库注册成功自动登录开始注册用户名检查用户名是否已被注册密码检查正则校验图 2-5 用户注册流程图2.2 系统流程图2.2.1 用户注册流程图用户必须先注册用户或者登录账号才能进入网站首页。点击用户，如果没有登录，就会直接跳转到登录界面，在登录界面上可以点击注册账号。当用户表单完成之后，先判断账号的格式是否正确，然后再判断此账号是否已被注册，如果已被注册，有提示信息“此账号已存在”，可以返回登录或者换个账号注册。注3.对模
8、块的操作2.选择模块1.管理员登录主页 各种模块操作 修改完成第 5 页 （共 19 页）册完毕之后，自动变成已登录状态。用户注册流程如图 2-5 所示。2.2.2 用户前台操作流程图如图 2-6 所示。2.2.3 用户后台数据流程图，如图 2-7 所示。图 2-6 用户前台操作流程图3 详细设计 详细设计是对不同的版块的细节设计页面。3.1 数据库设计系统数据动态化实现的关键就在于数据的存储，数据存储于 mysql 数据库中，因此数据库的设计是非常重要的一个环节 1。3.1.1 数据库说明本网站采用 mysql 数据库来存储各类用户信息、电影信息、电影院信息、管理员信息，购票信息，用 Nav
9、icat for mysql 来可视化操作数据库。在网站中，否电影时刻表选座购票电影列表支付主页用户名和密码是否正确登录 注册是第 6 页 （共 19 页）数据库名为 a0919091135，对于场次的添加、删除有不同的座次表的生成，所以表会随着场次的不同而产生变化。图 2-7 管理员后台操作流程图3.1.2 数据库概念结构设计数据库概念结构设计是它是整个数据库设计的关键，它具有一定的独立性。程序员通常采用 E-R 模型来描述概念结构，它能清晰的将用户的数据表达出来 2。根据本系统所使用的数据库以及系统的功能结构画出总 E-R 图如图 3-1 所示。3.1.3 数据库逻辑设计手机购票系统数据库
10、名为“a0919091135”，mySQL 数据库服务器的用户名是“root”，密码为空。在创建的数据库中包括 5 张数据表，其中各数据表实现的是页否页主页管理员登录账号密码是否正确财务结算管理员模块管理员的修改、添加、删除电影院模块电影院的修改、添加、删除场次模块场次的修改、添加、删除用户模块用户管理及用户订票管理电影模块电影的修改、添加、删除第 7 页 （共 19 页）功能如表 3.1 所示。同时根据系统 E-R 图的分析，可以得到本系统数据库中的表和其字段信息。图 3-1 总 E-R图表 3.1 数据表功能说明表数据表名 表的中文名 功能说明tb_film 电影表 存储电影的详细信息tb
11、_cinema 电影院表 存储电影院名字几号厅、详细地址、座位tb_admin 管理员表 存储管理员名、密码、联系方式tb_user 用户信息表 存储账号、密码、金额、购票、未付费电影tb_screenings 场次表 存储电影、影院、价格、时间、座位表（1）电影表 tb_film，如表 3.2 所示。（2）电影院表 tb_cinema，如表 3.3 所示。（3）场次表 tb_screenings，如表 3.4 所示。（4）用户表 tb_user，如表 3.5 所示。第 8 页 （共 19 页）（5）管理员表 tb_admin，如表 3.6 所示。3.1.4 数据库表的关系图表的关系图，更清晰
12、直观的表现了表与表之间的关系和结构，如图 3-2 所示。表 3.2 tb_film表名 类型 长度 小数点 允许空值 说明filmvarchar 20 0 否电影名（主键）filmImg varchar 255 0 是 图片路径filmScore float 4 1 是 评分threeD text 0 0 是 类型filmTime int 4 0 是 上映时间filmDetails text 0 0 是 宣传语filmType text 0 0 是 分类playTime date 0 0 是 播放时长director longtext 0 0 是 导演players longtext 0 0
13、是 演员plot longtext 0 0 是 剧情表 3.3 tb_cinema表名 类型 长度 小数点 允许空值 说明cinemavarchar 20 0 否电影院名（主键）address longtext 0 0 是 详细地址seat1 varchar 20 0 是 座位 1seat2 varchar 20 0 是 座位 2.第 9 页 （共 19 页）3.2 前台页面设计3.2.1 首页功能介绍：作为主页页面考虑到用户体验、方便快捷，使用户在第一时间选择或者了解自己需要买的票。界面实现如图 3-3 所示。表 3.4 tb_screenings表名 类型 长度 小数点 允许空值 说明sc
14、reenID int 20 0 否 主键film varchar 20 0 否 电影cinema varchar 20 0 否 电影院time datetime 0 0 否 演出时间price float 4 1 否 票价seat1 varchar 20 0 是 座位 1seat2 varchar 20 0 是 座位 2.表 3.5 tb_user表名 类型 长度 小数点 允许空值 说明uservarchar 20 0 否用户名（主键）password varchar 20 0 否 用户密码money int 11 0 否 余额screenID varchar 255 0 是 已购票booki
15、ng varchar 255 0 是 购物车表 3.6 tb_admin表名 类型 长度 小数点 允许空值 说明admin varchar 20 0 否 管理员（主键）password varchar 20 0 否 管理员密码第 10 页 （共 19 页）phone varchar 11 0 否 电话3.2.2 用户注册页面功能介绍：用户注册页面包括填写用户名、密码，并判断账号是否已被注册和验证密码格式是否正确。界面实现如图 3-4 所示。3.2.3 登录页面功能介绍：登录页面包括填写用户名、密码，并验证账号和密码是否正确。主界面实现如图 3-5 所示。图 3-2 表的关系图第 11 页 （共
16、 19 页）图 3-3 电影购票首页图 3-4 用户注册页面第 12 页 （共 19 页）图 3-5 用户登录页面3.2.4 用户页面功能介绍：用户详情信息包含账号信息、我的钱包、充值、已购票，每个选项都有子页面。主界面实现如图 3-6 所示。3.2.5 电影场次页面功能介绍：电影场次页面包含电影的详细信息，比如导演、演员、上映时间、类型等，可选择场次进入选座页面。界面实现如图 3-7 所示。第 13 页 （共 19 页）图 3-6 用户登录页面3.2.6 选座页面功能介绍：选座页面有三个色块代表三种状态，可选、已选、已售。界面实现如图 3-8 所示。3.2.7 支付页面功能介绍：支付页面是付
17、款页面，如果钱包里没有足够的金额，跳转到充值页面；如果金额充足直接扣去钱包里的金额。界面实现如图 3-9 所示。3.2.8 充值页面功能介绍：充值页面有银行卡号、密码、金额组成。卡号是 20 位或者 16 位，密码是 6 位，只有输入框验证成功之后确定按钮才能生效。由于某些原因，只要银行卡号位数正确和密码位数正确就能充值金额。界面实现如图 3-10 所示。3.3 后台页面设计3.3.1 首页功能介绍：主页是各个分页的接口，也是场次模块，方便管理员操作管理。第 14 页 （共 19 页）界面实现如图 3-11 所示。图 3-7 电影详情页面3.3.2 用户管理模块功能介绍：对用户的管理操作，只能
18、删除用户已选的票。界面实现如图 3-12所示。3.3.3 管理员管理模块功能介绍：对管理员账号的添加、删除、修改，其中的电话方便用户联系管理员。界面实现如图 3-13 所示。3.3.4 电影管理模块功能介绍：对电影的添加、删除、修改。界面实现如图 3-14 所示。第 15 页 （共 19 页）图 3-8 购票页面图 3-9 支付页面第 16 页 （共 19 页）图 3-10 充值页面图 3-11 后台首页以及场次的修改页面图 3-12 用户操作及修改页面第 17 页 （共 19 页）图 3-13 管理员操作及修改页面图 3-14 电影操作及修改页面图 3-15 电影院操作及修改页面3.3.5
19、电影院管理模块第 18 页 （共 19 页）功能介绍：对电影院的添加、删除、修改，其中包括电影院的厅号，方便记录电影院的座次排列。界面实现如图 3-15 所示。3.3.6 财务模块功能介绍：财务模块是系统的收入汇总。界面实现如图 3-16 所示。图 3-16 盈利页面第 19 页 （共 19 页）4 系统实施 4.1 需要的文件首先需要下载 AngularJS，下载地址 https:/angularjs.org/。官网上提供了两种方法：（1）去 GitHub 下载，点击按钮会跳转到 GitHub 页面，可获取最新版本 3。（2）直接下载，点击此按钮会直接弹出窗口下载。4.2 环境和开发工具4.
20、2.1 AngularJS 的引用在 html 文件中引用 angular.js 文件。4.3 AngularJS的使用4.3.1 双向数据绑定AngularJS 的双向数据绑定是在需要引用的变量时，加或者在标签中加ng-bind 绑定 js 中的变量。而和 ng-bind 的区别在于：在 AngularJS 使用数据替换模板时，第一个加载的页面，通常是应用中的 index.html，其未被渲染的模块可能会被用户看到。而使用 ng-bind 就不会出现这种情况 4。4.3.2 模板和 MVC一个应用的代码架构有很多种。对于 AngularJS 的应用，一般使用模型-视图-控制器模式解耦代码的分
21、离关注点。考虑到这一点，我们用 AngularJS 来为我们的的应用添加一些模型、视图和控制器 5。在 AngularJS 中，一个模板就是一个 HTML 文件。但是 HTML 的内容扩展了，包含了很多帮助你映射 model 到 view 的内容：（1）HTML 模板将会被浏览器解析到 DOM 中（2）DOM 然后成为 AngularJS 编译器的输入。（3）AngularJS 将会遍历 DOM 模板来生成一些指导，即 directive（指令）。第 20 页 （共 19 页）（4）所有的指令都负责针对 view 来设置数据绑定 6。4.3.3 依赖注入AngularJS 拥有内建的依赖注入子
22、系统，可以帮助开发人员更容易的开发，理解和测试应用 7。4.3.4 Directives指令可以用来创建自定义的标签。它们可以用来装饰元素或者 DOM 操作 8。5 结束语回顾本论文，通过对 AngularJS 的使用和对数据库的操作，我发现自己还有很多不足。首先数据库中表的关联，通过查找资料、百度搜索解决了这个问题，但是还是有点问题需要解决；其次是 AngularJS 与 php 的交互问题，通过看书和网上查找资料了解了 AngularJS 和 php 的交互问题，AngularJS 中的$http 可以实现与 php 的交互；最后还有 AngularJS 的嵌套循环问题，查找了许多的资料都
23、没有找到，最后发现是我的搜索方式有问题，改变了搜索方式才得以解决：在ng-repeat 中添加“track by $index”。但是通过对 AngularJS 的使用，越来越迷恋它。它可以更方便快捷的完成自己的功能，本身的功能也很强大，但是在做修改 DOM 的操作就有点不方便了。通过这几个月的实习工作，我也有许多收获，对框架的了解更深。前端虽然有很多框架，但是我觉得还是 AngularJS 更方便、快捷。在此，感谢学校的培养，特别感谢戴老师，没有戴老师就没有现在的我，走上前端这条路，才发现代码的可爱，为我打开了一扇门。参考文献:1 Ari Lerner. AngularJS 权威教程M. 北
24、京:人民邮电出版社,2014. 2 Pawel Kozlowski Peter Bacon Darwi. 精通 AngularJSM. 中国武汉:华中科技大学出版社,2014.3 姚予疆,张瑞喜. PHP 应用技巧与实例M. 北京:人民邮电出版社,2001.4 丁月光等. Web 开发的全民英雄-PHP+MYSQLM. 北京：电子工业出版社，2011.5 陆凌牛. HTML5 与 CSS3 权威指南M. 北京：机械工业出版社，2011.6 赵启志. PHP4+MySQL 完整自学方案M. 北京：中国铁道出版社,2001.第 21 页 （共 19 页）7 仲进平. PHP4+MySQL 网络开发技术M. 北京:人民邮电出版社,2000.8 陈俊宏. MySQL 网页数据库设计M. 北京：人民邮电出版社,2000.
