毕业设计（论文）-基于AngularJS的网上电影购票系统.doc

全日制本科生毕业论文 题 目： 基于AngularJS的网上电影购票系统 学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术 2012级 学生姓名： 学号： 指导教师： 职称： 副教授 2016 年 5 月 6 日基于AngularJS的网上电影购票系统摘 要：本论文按照软件开发设计思想，从需求分析、系统设计、详细设计、系统实施和系统开发等方面，详细阐述了网上电影购票系统的全过程，可用手机购票。该网站是基于AngularJS框架开发的，提高了网页制作的快速性、安全性和专业性。关键词：AngularJS；手机端；电影购票全套设计加扣 3012250582Abstract: according to the 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, it improved the rapidity, security and professionalism of web page making. Key words：AngularJS; mobile terminal; movie ticket 随着时代的发展，用户对手机的依赖性越来越高，很多事情都是通过手机完成的，比如网上订餐、网上购票等，所以网上购买电影票也成为了热门需求。用户不用到电影院门口不用排队买票，不用找零等麻烦，就能轻轻松松的完成购票。在网上购票可以根据自己的时间安排选择合适的场次，减少了时间的浪费。所以网上电影购票系统也应运而生。1 需求分析人工售票的手续繁琐，效率低下，用工成本高，而售票系统提高效率，节省成本，减少人工，提升用户体验。通过需求分析设计模块如下：（1）用户注册模块用户注册模块用于用户填写自己的用户名、密码，注册成为网站用户，主要是对用户名的验证，用户名是否已被注册，密码格式是否正确。（2）用户登录模块用户登录模块用于用户填写用户名和密码，登录进入网站，主要是验证用户名和密码是否正确。（3）电影模块电影模块包含电影列表、电影选座购票等。（4）影院模块影院模块包含电影院的详细地址。（5）选座购票模块选座购票模块有三个色块，分别表示已售票、已选票、未选票，方便用户查看哪些座位没有售出。点击选座按钮时，先判断用户是否登录，如果没有登录，先跳转到登录页面，登录成功之后才能成功购票。选座按钮点击成功之后，跳转至支付页面。（6）支付模块支付模块先判断用户余额是否充足，如果余额不足，跳转到充值页面进行充值，而已经选好的票保存在购物车里，也可以在充值完成后返回继续支付。（7）用户模块用户模块包含账号信息和个人操作：充值、未支付、已买票、修改密码等。2 网页设计整个网页前台、后台结构如图2-1、图2-2 所示。2.1 系统的顺序图2.1.1 用户前台浏览顺序图当访问网页后，先登录或注册用户登；登录网站成功之后跳转到电影列表，选择电影之后跳转到电影场次选择页面，可选择电影院及电影播放时间；跳转到选座购票页面；选座成功跳转到付账页面；付账完成后跳转到用户页面，可查看自己的购票信息。如图2-3所示。电影列表选座购票电影时刻表支付用户主页登录/注册金额及充值用户详情未付费已买票图2-1 网页前端结构图管理员登录主页编辑场次模块编辑用户模块编辑管理员模块编辑电影院模块编辑电影模块财务结算图2-2 网页后台结构图1登录成功2、选择电影电影列表2、选票选座购票2、选择场次电影时刻表支付图2-3 用户前台浏览顺序图2.1.2 用户后台数据顺序图管理员登录之后，选择需要操作的模块，用户模块可删除用户的票；管理员模块可添加、删除账户；电影模块可添加、删除、修改电影；电影院模块可添加、删除、修改电影院；场次模块可添加、删除、修改场次；财务模块可查看系统的盈利信息。如图2-4 所示。3.对模块的操作2.选择模块1.管理员登录主页各种模块操作修改完成图2-4 用户后台数据顺序图 是否错误正确存入数据库注册成功自动登录开始注册用户名检查用户名是否已被注册密码检查正则校验图2-5 用户注册流程图2.2 系统流程图2.2.1 用户注册流程图用户必须先注册用户或者登录账号才能进入网站首页。点击用户，如果没有登录，就会直接跳转到登录界面，在登录界面上可以点击注册账号。当用户表单完成之后，先判断账号的格式是否正确，然后再判断此账号是否已被注册，如果已被注册，有提示信息“此账号已存在”，可以返回登录或者换个账号注册。注册完毕之后，自动变成已登录状态。用户注册流程如图2-5所示。2.2.2 用户前台操作流程图如图2-6所示。2.2.3 用户后台数据流程图，如图2-7所示。否电影时刻表选座购票电影列表支付主页用户名和密码是否正确登录注册是图2-6 用户前台操作流程图3 详细设计 详细设计是对不同的版块的细节设计页面。3.1 数据库设计系统数据动态化实现的关键就在于数据的存储，数据存储于mysql数据库中，因此数据库的设计是非常重要的一个环节1。3.1.1 数据库说明本网站采用mysql数据库来存储各类用户信息、电影信息、电影院信息、管理员信息，购票信息，用Navicat for mysql来可视化操作数据库。在网站中，数据库名为a0919091135，对于场次的添加、删除有不同的座次表的生成，所以表会随着场次的不同而产生变化。是页否页主页管理员登录账号密码是否正确财务结算管理员模块管理员的修改、添加、删除电影院模块电影院的修改、添加、删除场次模块场次的修改、添加、删除用户模块用户管理及用户订票管理电影模块电影的修改、添加、删除图2-7 管理员后台操作流程图3.1.2 数据库概念结构设计数据库概念结构设计是它是整个数据库设计的关键，它具有一定的独立性。程序员通常采用E-R 模型来描述概念结构，它能清晰的将用户的数据表达出来2。根据本系统所使用的数据库以及系统的功能结构画出总E-R图如图3-1所示。3.1.3 数据库逻辑设计手机购票系统数据库名为“a0919091135”，mySQL数据库服务器的用户名是“root”，密码为空。在创建的数据库中包括5张数据表，其中各数据表实现的功能如表3.1所示。同时根据系统E-R图的分析，可以得到本系统数据库中的表和其字段信息。图3-1 总E-R图表3.1 数据表功能说明表数据表名表的中文名功能说明tb_film电影表存储电影的详细信息tb_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所示。（5）管理员表tb_admin，如表3.6所示。3.1.4 数据库表的关系图表的关系图，更清晰直观的表现了表与表之间的关系和结构，如图3-2所示。表3.2 tb_film表名类型长度小数点允许空值说明filmvarchar200否电影名（主键）filmImgvarchar2550是图片路径filmScorefloat41是评分threeDtext00是类型filmTimeint40是上映时间filmDetailstext00是宣传语filmTypetext00是分类playTimedate00是播放时长directorlongtext00是导演playerslongtext00是演员plotlongtext00是剧情表3.3 tb_cinema表名类型长度小数点允许空值说明cinemavarchar200否电影院名（主键）addresslongtext00是详细地址seat1varchar200是座位1seat2varchar200是座位2.3.2 前台页面设计3.2.1 首页功能介绍：作为主页页面考虑到用户体验、方便快捷，使用户在第一时间选择或者了解自己需要买的票。界面实现如图3-3 所示。表3.4 tb_screenings表名类型长度小数点允许空值说明screenIDint200否主键filmvarchar200否电影cinemavarchar200否电影院timedatetime00否演出时间pricefloat41否票价seat1varchar200是座位1seat2varchar200是座位2.表3.5 tb_user表名类型长度小数点允许空值说明uservarchar200否用户名（主键）passwordvarchar200否用户密码moneyint110否余额screenIDvarchar2550是已购票bookingvarchar2550是购物车表3.6 tb_admin表名类型长度小数点允许空值说明adminvarchar200否管理员（主键）passwordvarchar200否管理员密码phonevarchar110否电话3.2.2 用户注册页面功能介绍：用户注册页面包括填写用户名、密码，并判断账号是否已被注册和验证密码格式是否正确。界面实现如图3-4 所示。3.2.3 登录页面功能介绍：登录页面包括填写用户名、密码，并验证账号和密码是否正确。主界面实现如图3-5 所示。图3-2 表的关系图图3-3 电影购票首页图3-4 用户注册页面图3-5 用户登录页面3.2.4 用户页面功能介绍：用户详情信息包含账号信息、我的钱包、充值、已购票，每个选项都有子页面。主界面实现如图3-6所示。3.2.5 电影场次页面功能介绍：电影场次页面包含电影的详细信息，比如导演、演员、上映时间、类型等，可选择场次进入选座页面。界面实现如图3-7 所示。图3-6 用户登录页面3.2.6 选座页面功能介绍：选座页面有三个色块代表三种状态，可选、已选、已售。界面实现如图3-8所示。3.2.7 支付页面功能介绍：支付页面是付款页面，如果钱包里没有足够的金额，跳转到充值页面；如果金额充足直接扣去钱包里的金额。界面实现如图3-9所示。3.2.8 充值页面功能介绍：充值页面有银行卡号、密码、金额组成。卡号是20位或者16位，密码是6位，只有输入框验证成功之后确定按钮才能生效。由于某些原因，只要银行卡号位数正确和密码位数正确就能充值金额。界面实现如图3-10所示。3.3 后台页面设计3.3.1 首页功能介绍：主页是各个分页的接口，也是场次模块，方便管理员操作管理。界面实现如图3-11所示。图3-7 电影详情页面3.3.2 用户管理模块功能介绍：对用户的管理操作，只能删除用户已选的票。界面实现如图3-12所示。3.3.3 管理员管理模块功能介绍：对管理员账号的添加、删除、修改，其中的电话方便用户联系管理员。界面实现如图3-13所示。3.3.4 电影管理模块功能介绍：对电影的添加、删除、修改。界面实现如图3-14所示。图3-8 购票页面图3-9 支付页面图3-10 充值页面 图3-11 后台首页以及场次的修改页面 图3-12 用户操作及修改页面 图3-13 管理员操作及修改页面 图3-14 电影操作及修改页面 图3-15 电影院操作及修改页面3.3.5 电影院管理模块功能介绍：对电影院的添加、删除、修改，其中包括电影院的厅号，方便记录电影院的座次排列。界面实现如图3-15所示。3.3.6 财务模块功能介绍：财务模块是系统的收入汇总。界面实现如图3-16所示。图3-16 盈利页面4 系统实施 4.1 需要的文件首先需要下载AngularJS，下载地址/。官网上提供了两种方法：（1）去GitHub下载，点击按钮会跳转到GitHub页面，可获取最新版本3。（2）直接下载，点击此按钮会直接弹出窗口下载。4.2 环境和开发工具4.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的应用，一般使用模型-视图-控制器模式解耦代码的分离关注点。考虑到这一点，我们用AngularJS来为我们的的应用添加一些模型、视图和控制器5。在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容：（1） HTML模板将会被浏览器解析到DOM中（2） DOM然后成为AngularJS编译器的输入。（3） AngularJS将会遍历DOM模板来生成一些指导，即directive（指令）。（4） 所有的指令都负责针对view来设置数据绑定6。4.3.3 依赖注入AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用7。4.3.4 Directives指令可以用来创建自定义的标签。它们可以用来装饰元素或者DOM操作8。5 结束语回顾本论文，通过对AngularJS的使用和对数据库的操作，我发现自己还有很多不足。首先数据库中表的关联，通过查找资料、百度搜索解决了这个问题，但是还是有点问题需要解决；其次是AngularJS与php的交互问题，通过看书和网上查找资料了解了AngularJS和php的交互问题，AngularJS中的$http可以实现与php的交互；最后还有AngularJS