基于高铁票小程序的设计与实现
目 录
第1章 开发环境及开发技术
硬件环境:处理器 Intel® Core™ i5-5350U CPU @ 1.80GHz 1.80 GHz 机带 RAM 8.00 GB 系统类型64 位操作系统， 基于 x64 的处理器.服务器使用的是阿里云服务器
开发技术:前端使用html，css，javascipt，微信小程序官方api，后端接口使用javaweb，数据库使用的mysql8.0，容器使用的tomcat8.5。本项目主要以微信小程序界面的书写，js逻辑部分为主。
第2章 需求分析
1.1 系统描述
互联网时代，高铁票小程序开发以手机平台为载体，允许用户通过手机在线购买各种高铁票，无论用户位于哪个地区，想在哪个有高铁的城市坐高铁，或想提前预定高铁票等，都可以通过高铁票小程序开发完成，符合大众心中对出行和旅游的个性化需求。
该系统主要包括以下功能。
1、查询车票
有关高铁的信息将通过小程序向用户展示，方便用户了解其内容，符合现在用户获取信息的习惯，让用户可以方便地了解信息。
2、在线购票
用户可通过高铁票小程序进行智能定位，由系统为用户筛选出符合条件的附近的高铁，满足用户自由购票的权利，用户可查看各高铁的购票情况，方便用户了解及购票。
3、查询天气
用户可以通过高铁票小程序查看各个城市的天气信息，同时也可以搜索查看其它城市的天气。
4、订单查询
用户可以通过高铁票小程序查看各个城市的高铁信息，同时也可以在线查看以前的高铁乘车历史记录。
5、个人中心
用户可在个人中心查看高铁票订单，可以编辑个人资料，可以点击服务等功能按钮。
1.2 系统设计目标
现如今行业与行业之间的竞争如此激烈，微信小程序的开发流程并简述，结合线上线下运营模式符合互联网时代下的行业需求，高铁票小程序开发可以帮助企业进行线上的推广以及品牌宣传，提高行业内的知名度，有利于带动消费群体，方便人们的出行，促进经济发展。
UI设计界面上，针对自身UI设计风格更加要符合当代人的审美，如何引流，从封面视觉上满足用户的需求是很重要的，在设计方面采用色系相近的进行设计，让用户看到页面有一种舒适感。功能上，高铁票小程序开发，针对用户的出行方面的咨询需求提供实时的高铁票数据更新，从而分析用户在各时间点的需求，以达到优化平台功能服务目的，同时也增加平台的用户粘性。
1.3 用例图
整个系统有两种用户：用户和管理员。
1.用户用例图如图1-1所示。
图1-1用户用例图
2.管理员用例图如图1-2所示。
图1-2管理员用例图
第2章 系统总体设计
2.1 系统功能模块设计
高铁票小程序的总体思维导图，总共有十七个界面，分别为首页、天气、订单、个人中心、登录界面，注册界面，管理员添加界面，删除更改界面，车票查询界面、购买高铁票界面、编写个人资料界面、酒店住宿界面，服务界面，支付界面，出行保险界面，新增出行人界面。
高铁票小程序的思维导图展示页面之间的相互关系，如图2-1所示。
图2-1页面总体结构图
2.1.1 登录页面的功能设计
打开小程序进入到登录界面，登录界面的功能如下图2-2所示：
图2-2 登录页面
2.1.2 首页的功能设计
登录小程序后进入到首页界面，首页界面的功能如下图2-3所示：
图2-3 首页页面
2.1.3 查询车票页面的功能设计
点击查询车票之后进入到车票查询界面，车票查询界面的功能图如下图2-4所示。
图2-4 车票查询界面
2.1.4 购买高铁票界面的功能设计
点击车票查询中的预订按钮之后进入到高铁票购买界面，如图2-5所示。
图2-5 高铁票购买界面
2.1.5 个人中心的功能设计
登录小程序后进入到个人中心界面，个人中心界面的功能如下图2-6所示：
图2-6 个人中心页面
2.2 系统数据库设计
2.2.1 数据库E-R图设计
根据系统的业务需求，本系统需要管理的数据实体主要有：
用户（账号，密码，用户名）
高铁（高铁编号，出发地，目的地，时间，价格）
订单（订单号，车次，数量）
根据上述分析，给出各个实体的ER图如下：
1.用户实体ER图如图2-5所示。
图2-5 用户实体
2.高铁实体ER图如图2-6所示。
图2-6 高铁实体
3.订单实体ER图如图2-5所示。
图2-5 订单实体
2.2.2 数据库表的设计
1.用户表的表结构如表2-1所示。
表2-1 用户表（user）
| 编号 | 名称 | 别名 | 类型 | 说明 | 允许空 |
|---|---|---|---|---|---|
| 1 | Zhanghao | 账号 | Char（20） | Yes | |
| 2 | Name | 用户名 | Char（6） | Yes | |
| 3 | Mima | 密码 | Number | Yes |
2.高铁车次表的表结构如表2-2所示。
表2-2 高铁车次表（train）
| 编号 | 名称 | 别名 | 类型 | 说明 | 允许空 |
|---|---|---|---|---|---|
| 1 | trainnum | 高铁列名 | Char(12) | 主键 | No |
| 2 | deretime | 出发时间 | Char（20） | Yes | |
| 3 | arrltime | 到达时间 | Char（6） | Yes | |
| 4 | fstation | 出发地 | Varchar（200） | Yes | |
| 5 | tostatin | 目的地 | Varchar（200） | Yes | |
| 6 | seatprie | 票价 | Number | Yes |
3.订单表的表结构如表2-3所示。
表2-3 订单表（goods）
| 编号 | 名称 | 别名 | 类型 | 说明 | 允许空 |
|---|---|---|---|---|---|
| 1 | orderid | 订单号 | Char(12) | 主键 | No |
| 2 | trainnum | 高铁列名 | Char（20） | Yes | |
| 3 | shuliang | 性别 | Char（6） | Yes |
第3章 系统的设计与实现
3.1 系统页面结构设计
该系统主要有17个页面组成，分别为首页、天气、订单、个人中心、登录界面，注册界面，管理员添加界面，删除更改界面，车票查询界面、购买高铁票界面、编写个人资料界面、酒店住宿界面，服务界面，支付界面，出行保险界面，新增出行人界面。页面结构app.json中设置如图3-1所示。
图3-1 页面结构
3.2 登录页面的设计与实现
3.2.1 登录页面样式布局图
登录页面的布局分为六个部分，分别为上面的的用户登录文字，中间的输入账号密码，下面的分别是登录按钮、注册按钮、微信登录按钮、管理员登录。登录页面样式布局图如图3-2所示：
图3-2 登录页面布局
3.2.2 登录页面的实现
登录页面的wxml代码结构如下图3-3所示：
图3-3 登录页面wxml代码结构
登录页面的js代码结构如下图3-4所示：
图3-4 登录页面js代码结构
登录页面的wxss代码结构如下图3-5所示：
图3-5 登录页面wxss代码结构
3.3 首页的设计与实现
3.3.1 首页样式布局图
首页页面的布局分为四个部分，分别为顶部的搜索栏，下面的轮播图，下拉列表，以及最下面的静态列表部分，页面的布局主要用是flex布局。首页样式布局图如图3-6所示：
图3-6 首页布局
3.3.2 首页页面的实现
首页的wxml代码结构如下图3-7所示：
图3-7 首页wxml代码结构
首页的js代码结构如下图3-8所示
图3-8 首页js代码结构
首页的wxss的代码如下图3-9所示：
图3-9 首页wxss代码结构
3.4 天气页面的设计实现
3.4.1 天气样式布局图
当点击导航栏中的天气的时候，将跳转到天气页面。天气页面的样式布局如图3-10所示。
图3-10 天气页面设计图
3.4.2 天气页面的实现
该界面大体上主要分为三个部分，第一部分搜索部分，第二部分展示该日的气温信息，第三部分展示其它信息。
如下图3-11为首页关键的wxml代码：
图3-11 天气页面wxml代码结构
图3-12 天气页面js代码结构
3.5 购买页面的设计与实现
购买页面，首先展示各个车次的售票情况，用户根据需要选择购买，提示信息确认购买信息，然后再执行高铁票的购买操作。
3.5.1 样式布局图
图3-13 购买页面设计图
3.5.2 购买页面的实现
如下图3-14为购买页面的关键的wxml代码：
图3-14 购买页面wxml代码结构
如下图3-15为购买页面的关键的js代码：
图3-15 购买页面js代码结构
如下图3-16为购买页面的关键的wxss代码：
图3-16 购买页面wxss代码结构
3.6 订单页面的设计与实现
订单页面中中主要的技术点在对于从后端获取的数据通过点击不同得到按钮，让用户有更好的体验。
3.6.1 样式布局图
订单页面的样式布局如图3-17所示：
图3-17 订单页面设计图
3.6.2 订单页面的实现
订单页面的wxml代码结构如下图3-18所示：
图3-18 订单页面wxml代码结构
订单页面的js代码结构如下图3-19所示：
图3-19 订单页面js代码结构
订单页面的wxss代码结构如下图3-20所示：
图3-20 订单页面wxss代码结构
3.7 个人中心页面的设计与实现
个人中心界面，其中顶部的发现页面点击的那一列所传过来的头像和作者的名字，照片也是发现页面传过来的。
3.7.1 样式布局图
图3-21 个人中心页面设计图
3.7.2 个人中心页面的实现
个人中心页面的wxml代码结构如下图3-22所示：
图3-22 个人中心页面wxml代码结构
个人中心页面的js代码结构如下图3-23所示：
图3-23 个人中心页面js代码结构
个人中心页面的wxss代码结构如下图3-24所示：
图3-24 个人中心页面wxss代码结构
第4章 系统测试运行
4.1 登录页面的运行展示
如图4-1为进入小程序的时候登录页面的展示效果，图4-2为当点击注册按钮的展示效果，在该页面可以输入用户名、账号、密码进行注册，当点击微信登录按钮的展示效果，点击允许会进入小程序的首页页面；图4-3为管理员登录后可以操作的页面效果，点击添加可以添加到数据库，删除可以删除。
图4-1 登录页面的运行效果
图4-2 注册页面的运行效果
图4-3 管理员页面的运行效果
4.2 首页页面的运行展示
如下图中的图4-4为首页的运行效果，顶部为搜索框部分和轮播图部分；图4-5为点击查询车票查询的运行效果，点击车票查询的预订即可预订；图4-6为点击下方出行保险的运行效果，可以下拉菜单选择保险方案；图4-7为点击出行保险页面的新增出行人的运行效果，可以下拉菜单选择证件类型，也可以下拉菜单选择保险险种。
图4-4 首页页面的运行效果
图4-5 车票查询的运行效果
如图4-6 出行保险页面运行效果
图4-7 新增出行人页面的运行效果
4.3 购买页面的运行展示
当点击确定按钮的时候将跳转到高铁票购买页面。如下图中4-8所示。
图4-8 购买界面的运行效果
点击提交订单的时候的运行效果如下图4-9。
图4-9 点击提交订单的效果展示
4.4 天气页面的运行展示
如下图4-10为天气界面，当输入搜索框搜索北京的今日天气，点击搜索的按钮时的跳到北京当日天气界面的运行效果如图4-11所示。
图4-10 天气页面的运行效果
图4-11 搜索北京天气的运行效果
4.5 订单页面的运行展示
如下图4-12为订单界面，图4-13为点击删除订单按钮的时候的运行效果。
图4-12 订单页面的运行效果
图4-13 点击删除订单按钮的运行效果
4.6 个人中心页面的运行展示
如图4-14为个人中心界面的运行效果，图4-15为点击注销登录页面的运行效果。
图4-14 个人中心界面运行效果
图4-15 注销登录的运行效果
下图4-16点击编辑资料的运行效果，图4-17为点击服务按钮的运行效果。
图4-16 编辑资料的运行效果
图4-17 服务运行效果
由于本人水平有限，加上时间紧促，本文一定有不少缺点和不足，恳请指正。
扫一扫
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
