admin管理员组文章数量:1567541
2024年7月20日发(作者：)
实训报告
基于微信小程序的旅游管理系统的设
计与实现
姓 名
学 号
专 业
班 级
二零二三年六月十八日
目 录
第1章 开发环境及开发技术 .................................................................................................. 1
第2章 需求分析 ...................................................................................................................... 2
1.1 系统描述 ...................................................................................................................... 2
1.2 系统设计目标 .............................................................................................................. 2
1.3 用例图 .......................................................................................................................... 3
第2章 系统总体设计 .............................................................................................................. 5
2.1 系统功能模块设计 ...................................................................................................... 5
2.1.1 首页页面详情的功能设计 .................................................................................................... 6
2.1.2 景点信息界面的功能设计 .................................................................................................... 6
2.1.3 酒店信息界面的功能设计 .................................................................................................... 6
2.1.4 我的界面的功能设计 ............................................................................................................ 7
2.2 系统数据库设计 .......................................................................................................... 8
2.2.1 数据库E-R图设计 ............................................................................................................... 8
2.2.2 数据库表的设计 .................................................................................................................... 9
第3章 系统的设计与实现 .................................................................................................... 14
3.1 系统页面结构设计 .................................................................................................... 14
3.2 首页的设计与实现 .................................................................................................... 16
3.2.1 首页样式布局图 .................................................................................................................. 16
3.2.2 首页页面的实现 .................................................................................................................. 16
3.3 登陆页面的设计实现 ................................................................................................ 20
3.3.1 旅游攻略布局图 .................................................................................................................. 20
3.3.2 登陆页面的实现 .................................................................................................................. 21
3.4 旅游攻略页面的设计与实现 .................................................................................... 22
3.4.1 样式布局图 .......................................................................................................................... 23
3.4.2 详细信息页面的实现 .......................................................................................................... 23
3.5 景点信息的设计与实现 ............................................................................................ 25
3.5.1 样式布局图 .......................................................................................................................... 25
3.5.2 景点信息页面的实现 .......................................................................................................... 26
I
3.6 酒店信息的设计与实现 ............................................................................................ 27
3.6.1 样式布局图 .......................................................................................................................... 27
3.6.2 发现页面的实现 .................................................................................................................. 28
3.7 我的页面的设计与实现 ............................................................................................ 28
3.7.1 样式布局图 .......................................................................................................................... 28
3.7.2 我的页面的实现 .................................................................................................................. 29
第4章 系统测试运行 ............................................................................................................ 33
4.1 首页的运行展示 ........................................................................................................ 33
4.2 旅游攻略详情页的运行展示 .................................................................................... 33
4.3 景点信息页面的运行展示 ........................................................................................ 34
4.4 我的页面的运行展示 ................................................................................................ 35
4.5 我的详情页面运行展示 ............................................................................................ 36
II
第1章 开发环境及开发技术
硬件环境:处理器 Intel(R)Core(TM)********************.80GHz机带
RAM 8.00 GB 系统类型64 位操作系统， 基于 x64 的处理器.服务器使用的是阿里
云服务器
开发技术:前端使用html，css，javascipt，微信小程序官方api，后端接口使用
javaweb，数据库使用的mysql5.5，容器使用的tomcat8.5。本项目主要以微信小程序
界面的书写，js逻辑部分为主。
1
第2章 需求分析
1.1 系统描述
为了更好地满足人们的旅游需求，基于微信小程序的旅游管理系统可以根据用户的
个性化需求，精确获取到用户的需求信息，对旅游的相关信息和相关环节进行筛选，用
户只需要一部智能手机便可以轻松了解旅游信息，为其推荐最佳旅行攻略，并且可以享
受到各种方便快捷的服务。
该系统主要包括以下功能。
1、用户的注册和登录
用户通过注册和登录账号，以便于使用系统各项功能。如果用户忘记密码，可以通
过点击忘记密码选项进行重置密码然后再进行登录。
2、旅游攻略查询
用户可通过在首页查询旅游攻略，根据不同旅行线路选择相关的旅行攻略。
3、景点信息查询
用户通过输入景点名称进行搜索，可以查看该景区的图片，级别，详细地址，门票
价格等。
4、酒店信息查询功能
用户可通过输入酒店名称、星级或者酒店地址来搜索符合条件的酒店，用户可以根
据自己的需求和偏好，筛选出符合条件的酒店并进行比较，从而作出最终的预定决策。
5、我的功能
用户可以在我的页面查看该用户的门票预定、酒店预订、推荐路线等信息，可以让
用户更好地管理和享受平台提供的服务。
1.2 系统设计目标
随着社会经济的发展和人们生活水平的提高，旅游已经成为人们日常生活中不可或
缺的一部分。然而，传统的旅游方式存在着许多问题，如信息不对称、行程不便、费用
高昂等。为了解决这些问题，旅游管理系统应运而生。旅游管理系统是指通过计算机技
术和网络技术，为旅游者提供全方位的旅游服务。目前，随着移动互联网的普及，微信
小程序成为了一种新型的旅游管理系统开发方式，其具有开发成本低、用户体验好、使
用方便等优点，因此备受关注。
该系统基于微信小程序设计和实现的一款旅游管理系统，以提供更加便捷、高效、
全面的旅游服务。具体而言，通过对微信小程序的特点和优势进行分析，结合旅游系统
2
的需求，设计和实现一款功能完善、操作简便、用户体验良好的旅游管理系统。一方面，
可以为旅游者提供更加全面、便捷、高效的旅游服务，满足人们对旅游的需求；另一方
面，可以为旅游企业实现信息化、规范化、自动化管理，提高工作效率，促进旅游业的
发展。
功能上，该系统将为用户提供一个便捷的旅游信息查询和预订平台，从而满足用户
在旅游方面的需求，以达到优化平台功能服务目的，同时也增加平台的用户粘性。
1.3 用例图
整个系统有两种身份：用户、管理员。
1.用户用例图如图1-1所示。
图1-1用户用例图
2.管理员用例图如图1-2所示。
图1-2 管理员用例图
3
4
第2章 系统总体设计
2.1 系统功能模块设计
用户端主要包括以下功能模块：首页、景点信息、酒店信息、我的等。其中，首页
上部分为最近热门旅游景点宣传轮播图，下部分为旅游攻略模块和景点信息模块，点击
更多按钮跳转进旅游攻略页面和景点信息界面，点击想要查看的旅游攻略或者景点，进
入对应的详细信息页面，或者输入想要查询的内容去搜索出来。在酒店信息页面，可以
输入想要查询的内容搜索出相应的酒店，或者直接在酒店列表点击想要查询的酒店，进
入详细信息页面，点击酒店预订，填入相关信息，点击提交完成预定。在我的页面中，
上部分为用户头像、账号和修改图标，点击修改图标可以进入修改用户信息页面，完成
修改后点击保存跳转回我的页面，也可以点击退出登录按钮，跳转回登录页面，我的页
面下部分为用户功能列表，可以查看用户使用功能的信息。
旅游管理小程序的思维导图展示页面之间的相互关系，如图2-1所示。
图2-1页面总体结构图
5
2.1.1 首页页面详情的功能设计
点击登录按钮进入到首页，首页的功能如下图2-2所示
图2-2 首页页面详情
2.1.2 景点信息界面的功能设计
点击首页的景点信息后面的查看更多按钮或者直接点击导航栏景点信息选项后进
入景点信息界面，上部分是查找功能，在输入框输入想要查询的景点，点击搜索按钮即
可查找到相应的景点，下部分是景点列表，点击景点即可跳转到该景点详细信息页面，
点击右下角门票预订即可进入门票预定界面，填入相关信息点击提交按钮即可完成预
订。景点信息界面的功能图如下图2-3所示。
图2-3 景点信息界面
2.1.3 酒店信息界面的功能设计
点击导航栏酒店信息选项后进入酒店信息界面，上部分是查找功能，在输入框输入
想要查询的酒店的相关信息，点击搜索按钮即可查找到相应的酒店，下部分是酒店列表，
点击酒店即可跳转到该酒店详细信息页面，点击右下角酒店预订即可进入酒店预定界
面，填入相关信息点击提交按钮即可完成预订。酒店信息界面的功能图如下图2-4所示。
6
图2-4 酒店信息界面
2.1.4 我的界面的功能设计
点击导航栏我的选项后进入我的界面，上部分为用户头像、账号和修改图标，点击
修改图标可以进入修改用户信息页面，完成修改后点击保存跳转回我的页面，也可以点
击退出登录按钮，跳转回登录页面，我的页面下部分为用户功能列表，可以查看用户使
用功能的信息。我的界面的功能图如下图2-5所示。
图2-5 我的界面
7
2.2 系统数据库设计
2.2.1 数据库E-R图设计
根据系统的业务需求，本系统需要管理的数据实体主要有：
用户（id，添加时间，用户账号，密码，用户姓名，头像，手机号）
酒店信息（id，创建时间，酒店名称，类别，星级，酒店图片，酒店地址，房间类
型，一晚价格，联系电话，酒店介绍）
景点信息（id，创建时间，景点名称，等级，景点图片，门票价格，开放时间，服
务电话，详细地址，景点介绍）
根据上述分析，给出各个实体的ER图如下：
1.用户实体ER图如错误!未找到引用源。所示。
图2-6 用户实体
2.景点实体ER图如错误!未找到引用源。所示。
图2-7 景点实体
3. 酒店实体ER图如错误!未找到引用源。所示。
8
图2-8 酒店实体
2.2.2 数据库表的设计
1.用户表的表结构如表2-1所示。
表2-1 用户表（yonghu）
编号
1
2
3
名称
id
addtime
yonghuzha
nghao
类型
Bigint(20)
timestamp
Varchar(200)
别名
id
添加时间
用户账号
主键
说明 允许空
NO
NO
NO
4
5
mima
yonghuxin
gming
Varchar(200)
Varchar(200)
密码
用户姓名
NO
YES
6
7
8
touxiang
Varchar(200)
头像
手机号
身份证
YES
YES
YES
shoujihao
Varchar(200)
shenfenzhe
ng
Varchar(200)
2.管理员的表结构如表2-2所示。
表2-2 管理员表（user）
编号
1
2
3
4
5
名称
id
username
password
role
addtime
类型
Bigint(20)
Varchar(100)
Varchar(100)
Varchar(100)
Timestamp
别名
id
用户名
密码
主键
说明 允许空
NO
NO
NO
YES
NO
身份
添加时间
9
3.推荐路线的表结构如表2-3所示。
表2-3 推荐路线表（tuijianluxian）
编号
1
2
3
4
名称
id
addtime
biaoti
jingdianmi
ngcheng
类型
Bigint(20)
timestamp
Varchar(200)
Varchar(200)
别名
id
添加时间
标题
主键
说明 允许空
NO
NO
YES
YES
景点名称
5
xiangxidiz
hi
Varchar(200)
详细地址
YES
6
7
tupian
luxianxian
gxi
Varchar(200)
longtext
图片
详细路线
YES
YES
8
jiaotonggo
ngju
Varchar(200)
交通工具
YES
9
yonghuzha
nghao
Varchar(200)
用户账号
YES
4.收藏的表结构如表2-4所示。
表2-4 收藏表（menpiaoyuding）
编号
1
2
3
4
5
6
7
名称
id
addtime
userid
refid
类型
Bigint(20)
timestamp
Bigint(20)
Bigint(20)
别名
Id
创建时间
用户id
收藏id
表名
收藏名称
收藏图片
主键
说明 允许空
NO
NO
NO
YES
YES
NO
NO
tablename
Varchar(200)
name
picture
Varchar(200)
Varchar(200)
5.门票预订的表结构如表2-5所示。
表2-5 门票预订表（menpiaoyuding）
编号
1
2
3
名称
id
addtime
jingdianmi
ngcheng
类型
Bigint(20)
timestamp
Varchar(200)
别名
Id
创建时间
景点名称
主键
说明 允许空
NO
NO
YES
10
4
5
dengji
jingdiantup
ian
Varchar(200)
Varchar(200)
等级
景点图片
YES
YES
6
xiangxidiz
hi
Varchar(200) 详细地址
YES
7
menpiaojia
ge
Varchar(200) 门票价格
YES
8
goumaishu
liang
Int(11) 购买数量
NO
9
10
11
zongjiage
yudingriqi
yonghuzha
nghao
Varchar(200)
date
Varchar(200)
总价格
预定日期
用户账号
YES
YES
YES
12
yonghuxin
gming
Varchar(200) 用户姓名
YES
13
14
shoujihao
shenfenzhe
ng
Varchar(200)
Varchar(200)
手机号
身份证
YES
YES
15
16
17
beizhu
ispay
userid
Varchar(200)
Varchar(200)
Bigint(20)
备注
是否支付
用户id
YES
YES
NO
6.旅游攻略的表结构如表2-6所示。
表2-6 旅游攻略表（lvyougonglve）
编号
1
2
3
名称
id
addtime
gonglvebia
oti
类型
Bigint(20)
timestamp
Varchar(200)
别名
Id
创建时间
攻略标题
主键
说明 允许空
NO
NO
YES
4
5
fabushijian
gonglvenei
rong
date
longtext
发布时间
攻略内容
YES
YES
6
7
tupian
yonghuzha
nghao
Varchar(200)
Varchar(200)
图片
用户账号
YES
YES
7. 酒店信息的表结构如表2-7所示
11
表2-7 旅游攻略表（lvyougonglve）
编号
1
2
3
名称
id
addtime
jiudianmingc
heng
类型
Bigint(20)
timestamp
Varchar(200)
别名
id
创建时间
酒店名称
主键
说明 允许空
NO
NO
YES
4
5
6
leibie
xingji
fangjianleixin
g
Varchar(200)
Varchar(200)
Varchar(200)
类别
星级
房间类型
YES
YES
YES
7
8
12
jiudiantupian
jiudiandizhi
yonghuzhang
hao
Varchar(200)
Varchar(200)
Varchar(200)
酒店图片
酒店地址
用户账号
YES
YES
YES
13
yonghuxingm
ing
varchar 用户姓名
YES
14
15
16
17
18
shoujihao
shenfenzheng
beizhu
ispay
userid
varchar
varchar
varchar
varchar
bigint
手机号
身份证
备注
是否支付
用户id
YES
YES
YES
YES
NO
8.酒店预订的表结构如表2-8所示。
表2-8 酒店预订表（jiudianyuding）
编号
1
2
3
名称
id
addtime
jiudianmingc
heng
类型
Bigint(20)
timestamp
Varchar(200)
别名
id
创建时间
酒店名称
主键
说明 允许空
NO
NO
YES
4
5
6
leibie
xingji
fangjianleixin
g
Varchar(200)
Varchar(200)
Varchar(200)
类别
星级
房间类型
YES
YES
YES
7
8
jiudiantupian
yiwanjiage
Varchar(200)
Varchar(200)
酒店图片
一晚价格
YES
YES
12
9
10
11
12
ruzhutianshu
zongjiage
yudingshijian
yonghuzhang
hao
Varchar(200)
Varchar(200)
date
Varchar(200)
入住天数
总价格
预定时间
用户账号
NO
YES
YES
YES
13
yonghuxingm
ing
varchar 用户姓名
YES
14
15
16
17
18
shoujihao
shenfenzheng
beizhu
ispay
userid
varchar
varchar
varchar
varchar
bigint
手机号
身份证
备注
是否支付
用户id
YES
YES
YES
YES
NO
9.景点信息的表结构如表2-9所示。
表2-9 景点信息表（jingdianxinxi）
编号
1
2
3
名称
id
addtime
jingdianming
cheng
类型
Bigint(20)
timestamp
Varchar(200)
别名
id
创建时间
景点名称
主键
说明 允许空
NO
NO
NO
4
5
dengji
jingdiantupia
n
Varchar(200)
Varchar(200)
等级
景点图片
YES
YES
6
7
menpiaojiage
kaifangshijia
n
Int(11)
Varchar(200)
门票价格
开放时间
NO
YES
8
9
10
fuwudianhua
xiangxidizhi
jingdianjiesh
ao
Varchar(200)
Varchar(200)
longtext
服务电话
详细地址
景点介绍
YES
YES
YES
10.酒店评论的表结构如表2-10所示。
表2-10 酒店评论表（discussjiudianxinxi）
编号
1
2
名称
id
addtime
类型
Bigint(20)
timestamp
别名
主键
创建时间
主键
说明 允许空
NO
NO
13
3
4
5
6
refid
userid
content
reply
Bigint(20)
Bigint(20)
longtext
longtext
关联表id
用户id
评论内容
回复内容
NO
NO
NO
YES
11.酒店信息的表结构如表2-11所示。
表2-11 酒店信息表（discussjingdianxinxi）
编号
1
2
3
4
5
6
id
addtime
jiudianmingc
heng
leibie
xingji
jiudiantupian
jiudiandizhi
fangjianleixin
g
yiwanjiage Int 一晚价格
联系电话
酒店介绍
0
0
0
YES
YES
YES
lianxidianhua Varchar(200)
jiudianjiesha
o
Longtext
Varchar(200)
Varchar(200)
Varchar(200)
Varchar(200)
Varchar(200)
类别
星级
酒店图片
酒店地址
房间类型
0
0
0
0
0
NO
NO
YES
YES
YES
名称 类型
bigint
Timestamp
Varchar(200)
Id
时间
别名
0
0
0
说明 允许空
NO
NO
NO 酒店名称
第3章 系统的设计与实现
3.1 系统页面结构设计
该系统主要有4个页面组成，分别为首页、景点信息、酒店信息、我的。页面结构
中设置如图3-1所示。
"pages/login/login", //登陆页面
"pages/register/register", //注册页面
"pages/forget/forget", //密码重置页面
"pages/center/center", //个人中心页面
14
"pages/user-info/user-info", //用户信息页面
"pages/lvyougonglve/list", //旅游攻略页面
"pages/lvyougonglve/add-or-update", //新增旅游攻略页面
"pages/lvyougonglve/detail", //旅游攻略详细介绍页面
"pages/lvyouzixun/list", //旅游资讯页面
"pages/lvyouzixun/add-or-update", //新增旅游资讯页面
"pages/lvyouzixun/detail", //旅游资讯详细介绍页面
"pages/jingdianxinxi/list", //景点信息页面
"pages/jingdianxinxi/add-or-update", //景点预订提交页面
"pages/jingdianxinxi/detail", //景点信息详细介绍页面
"pages/menpiaoyuding/list", //门票预订页面
"pages/menpiaoyuding/add-or-update", //门票预订修改页面
"pages/menpiaoyuding/detail", //门票预订页面详细信息页面
"pages/jiudianyuding/list", //酒店预订页面
"pages/jiudianyuding/add-or-update", //酒店预订提交页面
"pages/jiudianyuding/detail", //酒店预订详细页面
"pages/tuijianluxian/list", //推荐路线页面
"pages/tuijianluxian/add-or-update", //推荐路线发布页面
"pages/tuijianluxian/detail", //推荐路详细页面
"pages/discussjingdianxinxi/add-or-update", //发布景点评价页面
"pages/discussjiudianxinxi/add-or-update", //发布酒店评价页面
"pages/forum-index/forum-index", //论坛页面
"pages/forum-detail/forum-detail", //论坛评论页面
"pages/forum-reply/forum-reply", //论坛回复页面
"pages/forum-add-or-update/forum-add-or-update", //发布论坛页面
"pages/pay-confirm/pay-confirm", //支付页面
"pages/index/index" //首页
图3-1 页面结构
15
3.2
首页的设计与实现
3.2.1 首页样式布局图
首页页面的布局分为三个部分，分别为顶部的轮播图，中间部分的旅游攻略模块，
以及最下面的景点信息部分，页面的布局主要用是flex布局。首页样式布局图如图3-2
所示：
图3-2 首页布局
3.2.2 首页页面的实现
首页的wxml代码结构如下图3-3所示
16
图3-3 首页wxml代码结构
首页在页面加载的时候通过$api向后端发送请求，请求成功的话，将数据传回，并
显示在页面。
onShow: function () {
var n = this;
return c(((function t() {
var e, r, o, u, l;
return ((function (t) {
while (1) switch ( = ) {
case 0:
return e = [], = 3, n.$("config
", {
page: 1,
limit: 5
});
17
case 3:
r = , o = a();
try {
for (o.s(); !(u = o.n()).done;) l = ,
f("picture") >= 0 && && "" != && null
!= && ((l), ({
img:
}))
} catch (i) {
o.e(i)
} finally {
o.f()
}
return e && (List = e), = 9, n.
$("lvyougonglve", {
page: 1,
limit: 6
});
case 9:
return r = , yougonglvelist = r.
, = 13, n.$("lvyouzixun", {
page: 1,
limit: 6
});
case 13:
return r = , youzixunlist =
, = 17, n.$("jingdianxinxi", {
page: 1,
limit: 6
18
});
case 17:
r = , ngdianxinxilist = .l
ist;
case 19:
case "end":
return ()
}
}), t)
})))()
},
通过下面的方式对于数据进行动态渲染，部分wxml代码如图3-4所示。
x="index" wx:key="index"> ="uni-product" style="{{('background-color:'+('rgba(255, 153, 0, 0.1 4)')+';')}}" bindtap="__e"> )')+';')+('text-align:'+('left')+';')}}">{{product.$anmin gcheng}} 19 n?product.g4[0]:''}}">
图3-4 数据动态渲染
onNewsDetailTap: function (n) {
this.$("../news-detail/news-detail?id=".co
ncat(n))
},
图3-5 跳转函数
3.3
登陆页面
的设计实现
3.3.1 旅游攻略布局图
小程序最一开始显示登陆页面，输入账号和密码点击登陆进行用户登陆，如图3-6
所示。
20
图3-6 登录页面设计图
3.3.2 登陆页面的实现
代码结构如下图3-7所示。
图3-7登陆页面wxml代码结构
nLoginTap: function () {
var t = this;
return u(((function e() {
21
var i;
return ((function (e) {
while (1) switch ( = ) {
case 0:
return = 5, t.$("yonghu", {
username: me,
password: rd
});
case 5:
return i = , rageSync("token", i
.token), rageSync("nowTable", "yonghu"), = 10, t.$api
.session("yonghu");
case 10:
i = , rageSync("userid", .
id), rageSync("role", "用户
"), t.$("../index/index");
case 14:
case "end":
return ()
}
}), e)
})))()
},
图3-8 登录函数
i = , rageSync("userid", ), rageSync
("role", "用户"), t.$("../index/index");
图3-9跳转主页并得到传过来的id
3.4 旅游攻略页面的设计与实现
22
在首页点击旅游攻略后面的查看更多按钮跳转到旅游攻略页面，用户点击想要查看
的旅游攻略，进入到该旅游攻略的详细信息界面，或者在页面的顶部输入框输入想要查
询的旅游攻略，点击搜索按钮即可找到想要查询的旅游攻略，方便用户的使用。
3.4.1 样式布局图
如下图3-10为旅游攻略的详细设计。
图3-10 旅游攻略设计图
3.4.2 详细信息页面的实现
搜索函数如图3-11所示
search: function () {
var t = this;
return l(((function n() {
var e, i;
return ((function (n) {
while (1) switch ( = ) {
case 0:
return = 1, e = {
23
page: ,
limit:
}, ebiaoti && (e["gonglvebi
aoti"] = "%" + ebiaoti + "%"), = 5, t.$api
.list("lvyougonglve", e);
case 5:
i = , 1 == && ( = [
]), = (), 0 == &&
(t = !1), cess(, t);
case 10:
case "end":
return ()
}
}), n)
})))()
}
图3-11搜索函数
显示所有攻略信息函数如图3-12所示
upCallback: function (t) {
var n = this;
return l(((function e() {
var i;
return ((function (e) {
while (1) switch ( = ) {
case 0:
return = 2, n.$("lvyougonglve",
{
page: ,
limit:
24
});
case 2:
i = , 1 == && ( = []),
t = (), 0 == && (
t = !1), cess(, t);
case 7:
case "end":
return ()
}
}), e)
})))()
},
图3-12显示所有攻略函数
跳转并传值给详细页面函数如图3-13所示
onDetailTap: function (t) {
this.$("./detail?id=".concat())
},
图3-13跳转并传值给详细页面函数
3.5 景点信息的设计与实现
在首页点击景点信息模块的查看更多按钮，进入到景点信息页面，也可以直接点击
导航栏的景点信息按钮进入该页面。在该页面内，可以在顶部输入框输入想要查询的景
点名称，点击搜索按钮即可找到想要查询的景点，或者在景点信息页面点击想要查看的
景点信息，进入该景点的详细信息页面，点击门票预订，输入相关信息，点击提交按钮
即可完成门票预订。
3.5.1 样式布局图
如下图3-14为景点信息的详细设计。
25
图3-14 景点信息设计图
3.5.2 景点信息页面的实现
Wmxl如图3-15所示
ownCallback']]],['^up',[['upCallback']]]]}}" bind:init="__e" bind:do
wn="__e" bind:up="__e" bind:__l="__l" vue-slots="{{['default']}}">
xt>" data-event-opts="{{[['input',[['__set_model',['$0','jiudianmingche ng','$event',[]],['searchForm']]]]]}}" value="{{nmi ngcheng}}" bindinput="__e" />
d" bindtap="__e">搜索
26
图3-15搜索函数的代码显示
搜索函数，如图3-16所示
search: function () {
var n = this;
return s(((function t() {
var e, a;
return ((function (t) {
while (1) switch ( = ) {
case 0:
return = 1, e = {
page: ,
limit:
}, anmingcheng && (e["jingdianmingcheng"] = "%" + anmingcheng + "%"),
= 5, n.$("jingdianxinxi", e);
case 5:
a = , 1 == && ( = []), = (), 0 == &&
(t = !1), cess(, t);
case 10:
case "end":
return ()
图3-16搜索函数
3.6 酒店信息的设计与实现
在酒店信息页面，可以输入想要查询的内容搜索出相应的酒店，或者直接在酒店列
表点击想要查询的酒店，进入详细信息页面，点击酒店预订，填入相关信息，点击提交
完成预定，方便用户操作。
3.6.1 样式布局图
如下图3-17为酒店信息的详细设计。
27
图3-17 酒店信息设计图
3.6.2 发现页面的实现
Wxml代码如图3-18所示：
mode="aspectFill" src="{{product.$ntupian?product.g0[0]:''}}">
"cuIcon-edit" catchtap="__e">修改
"cuIcon-delete" catchtap="__e">删除
图3-18 酒店显示代码
Js代码如图3-19所示：
onDetailTap: function (n) {
this.$("./detail?id=".concat())
},
图3-19 跳转函数
3.7 我的页面的设计与实现
在我的页面中，上部分为用户头像、账号和修改图标，点击修改图标可以进入修改
用户信息页面，完成修改后点击保存跳转回我的页面，也可以点击退出登录按钮，跳转
回登录页面，我的页面下部分为用户功能列表，可以查看用户使用功能的信息。
3.7.1 样式布局图
如下图3-20为我的详细设计。
28
图3-20 我的设计图
3.7.2 我的页面的实现
Wmxl代码，如图3-21所示：
{{'background-color:'+('rgba(0, 0, 0, 0.2)')+';'+('height:'+('200rpx
')+';')}}" bindtap="__e">
29
eight:'+('36rpx')+';')+('font-size:'+('50rpx')+';')+('border-style:'
+('solid solid solid solid ')+';')}}">{{zhanghao}}
>
index="index" wx:key="index"> for-index="sort" wx:key="sort"> dan'&&ame!='weizhifudingdan'&&ame!='yizhifud ingdan'&&ame!='yiwanchengdingdan'}}"> 30 ght:'+('80rpx')+';')+('border-style:'+('none none solid none')+';')+ ('border-width:'+('2rpx 2rpx 2rpx 2rpx')+';')}}" hover-class="hover" data-event-opts="{{[['tap',[['onPageTap',['../'+ame+'/l ist?userid='+]]]]]}}" bindtap="__e"> view>
k>
';')+('border-style:'+('none none solid none')+';')+('border-width:'
+('2rpx 2rpx 2rpx 2rpx')+';')}}" hover-class="hover" data-event-opts
="{{[['tap',[['onPageTap',['../forum-add-or-update/forum-add-or-upda
te']]]]]}}" bindtap="__e">
图3-21我的wmxl代码
跳转修改信息界面函数，如图3-22所示
onPageTap: function (t) {
teTo({
url: t,
fail: function () {
Tab({
url: t
31
})
}
})
}
}
};
t = i
}).call(this, n("543d")["default"])
},
图3-22跳转修改页面
32
第4章 系统测试运行
4.1 首页的运行展示
如图4-1为进入小程序的时候展示效果图
图4-1 首页运行效果
4.2 旅游攻略详情页的运行展示
如下图中的4-2为旅游攻略详情页的运行效果，上面为输入框搜索部分，下部分为
旅游攻略列表，4-3为旅游攻略详细信息页面。
33
图4-2 旅游攻略页面运行效果
图4-3 旅游攻略详细信息页面
4.3 景点信息页面的运行展示
如下图中的4-4为景点信息详情页的运行效果，上面为输入框搜索部分，下面为景
点列表，4-5为景点详细信息页面，4-6为门票预订页面。
34
图4-4 景点信息页面运行效果 图4-5 景点详细信息页面 图4-6 门票预订详细信息页面
4.4 我的页面的运行展示
如下图中的4-7为酒店信息详情页的运行效果，上面为输入框搜索部分，下面为酒
店列表，4-8为酒店详细信息页面，4-9为酒店预订页面。
图4-7 酒店信息页面运行效果 图4-8 酒店详细信息页面 图4-9 酒店预订详细信息页面
35
4.5 我的详情页面运行展示
如图4-10为我的界面的运行效果，图4-11为修改用户信息详情界面的运行效果。
图4-10 我的界面运行效果
图4-11 修改用户信息详情页面
36
版权声明：本文标题：基于微信小程序的旅游管理系统的设计与实现实训报告 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1721413896a876528.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论