admin 管理员组文章数量: 1184232
2024年3月10日发(作者：form标记的参数method)
第
18
卷第
4
期
2019
年
12
月
太原师范学院学报(自然科学版丿
JOURNAL
OF
TAIYUAN
NORMAL
UNIVERSITY
(Natural
Science
Edition
)
Vol.18
No.4
Dec.
2019
基于
Bootstrap
旅游网站设计与实现
曹利
(晋中师范高等专科学校，
山西
晋中
030600
)
〔摘要
〕
文章提出一种基于
Bootstrap
旅游网站设计与实现的方案
，
该方案包括首页
、攻略
、
出行
、
目的地
、
游记和社区等页面框架布局前端
UI
设计
，
并对登录注册忘记密码等个人信息进行
管理
，
对游记
、
攻略等信息的发布进行前后端
管理
.
采用
Bootstrap
、
HTML5
、
CSS3
、
jQuer
y
和
PHP
等框架和技术.项目运行表明
，
方案设计合理可行
，
达到跨浏览器
、
跨平台
，
运行稳定
，
操作界面简洁
大方
、
友好
.
〔
关键词
〕
Bootstrap
；
自
适应
；
旅游网站
〔
文章编号
〕
1672-2027(2019)04-0065-03
〔
中图分类号
〕
TP321
〔
文献标识码
〕
A
0
引言
随着移动设备的日益普及
，
网站的移动端浏览量也越来越大
，如何使网站在不同的移动设备上兼容性良
好
，
展现风格一致的界面
，
来增强用户体验
呢
？
文章基于
Bootstrap
前端
框架
，
对旅游网站进行前端和后端
设计
，
系统设计含页面布局
、
个人信息管理与维护
、
旅游攻略与景点资讯管理与维护等•为了进一步拓展系统
实际应用
，
使其具备跨平台或多种设备的兼容性
，
系统前端采用
HTML5
、
CSS3
构建及美化页面
，
采用
Boot-
stap
实现具有响应式自适应效果的网页
，
能支持各种屏幕大小不一的设备和不同分辨率设备
；
利用
jQuery
强大的选择器
、
大量封装好的函数配合系统设计开发
；
系统后端采用
PHP
实现功能处理
，
采用
mySQL
实现
数据处理
［
1
；
］
.
1
系统设计
旅游站点由前端和后端两部分组成.接
口
部分也就是后端设计如图
1
所示.
UI
前端部分如图
2
所示.
|旅游网站|
|攻略|
|首页|
|出行|
|目的地|
|游记|
|社区|
图
1
后端接口划分
图
2
前端
UI
划分
本系统包括个人信息维护
，
旅游资讯管理
，
旅游信息查询三部分组成
•
个人信息包括注册
、登录
、
修改个
人信息
、
忘记密码;旅游资讯管理则是发布旅游攻略
、
旅游心得等信息
，
查看已发布的信息
，
删除已发布的旅
游信息
；
旅游信息查询则是根据关键字进行检索以及通过条件进行筛选
.
2
页
面设计
页面的布局框架是整个页面的基础
，
页面采用响应式布局.响应式是通过更改内容样式达到的效果
，
根
*
收稿日期
：
2019-08-24
作者简介
：
曹
利
(1976-
(,
男
，山西大同人，
硕士
，讲师，
主要从事公共计算机基础教学
、
计算机应用技术研究.
66
太原师范学院学报
（
自然科学版
）
第
18
卷
据获取终端分辨率信息调整样式
，
当浏览器判断屏幕尺寸介于
1260px
〜
1050px,
都会判定为电脑端显示完
整的页面
；
当小于
1050px
且大于
640px
时
，
就会调整样式
，
改变内容的大小
•
自适
为平板端显示的样式
；
小于
640px
的调整的
式就是移动端的屏幕尺寸
,
的分辨率
，
这些一般
成相应的比例展
内容.使用
bootstrap
框架
的布局中.响应式布局原理如图
3
所示.
系统的首页如图
4
所示.
式布局
，
它提供的栅格系
屏幕或视口尺寸的
1,
系统会自动分为
12
列
，
用于通过一系列的行与列的组合来创建页
局
，
页面内容就可以放入这些创建好
图
3
响应式布局原理图
图
4
系统首页
首页导航条包括
Logo
和菜单栏
，
当屏幕分辨率小于
768
像素时
，
导航栏会隐藏
，
显示一个按钮
；
轮播图
使用
bootstrap
框架及提供的
JavaScript
库
，就能建立一个具有响应式的轮播图，
其中的小圆圈是
Glyphi-
cons
字
•
轮播图下面是页
内容
，
主体内容分为六个部分
，
广告栏
，
搜索框
，
游玩攻略条目
，
旅行
家专栏
，
热销旅游团推荐
已占满小分辨率屏的
12
列
,
选项卡展示
•
在
PC
端
，
广告栏
索框位于轮播图下方
，
广告栏是
12
列的
按比例缩小
，
搜索框
移动到游玩攻略部分的下方
，
组件大小不变.游
栅格中占
9
列
，
搜索框占
3
列
；
在平板电脑的分辨率中
，
广告栏占
7
列
，
搜索框随之变为
5
列
；
手机端广告栏
记
、
攻略
、
出行
、
社区等布局一致的页面
，
利用
bootstrap
提供的组件导航条和栅格系统对页面进行划分
.
3
个人信息维护
注册
、
登录和忘记密码功能都需要用户在表单中输入相应信息后前端将填写信息内容发送到服务器后
台
，
服务器根据填写信息内容进行比对
、
查询或写入数据库
.
由于
“
系统注册
”
及
“
忘记密码
”
功能需用户验证
•
故
时,使用了电子邮箱进行验证
.
登录功能则不需要使用邮件地址进行身份验证,无需修改数据库中原始数据
•
具体地
，
利用
jQuery
获取
相应的
DOM
的值后
，
以
JOSN
格式发送请求至后台
API,
后台
API
依据此数据，
在数据库中完成查询
比对
，
判断用户是否为合法用户.若是合法用
登录系统
，否则提
误
，
•
本系
置游客
，
只能浏览页
，
注册用户完善个人资料后可以发布和管理旅游信息.注册用
的内容在数据库中完成对
据的修改工作
.
户可以对个人资料进行修改
，
服务器端根据用
4
旅游资讯管
理
旅游网站对于注册会员
，
可以在系统中发布旅游心得
、
旅游攻略
、
旅游资讯等信息
，
本模块涵盖了信息的
发布
，
信息的查
删
三个功能.注册用户进入个人中心
，
通过用户
ID
传
务器
，
服务器根据
ID
在
中搜索用户已
的所有
，
将搜索结果返回前端进行渲染
，
用户就可以查看已发的旅游资讯
.
，
比如
，
标题
、
时间
、
旅行地
、
讯息等•系统使用富文本编辑
旅游资讯时
，
用户需要输入一些基本
第
4
期曹
利
：
基于
Bootstrap
旅游网站设计与实现
67
器对用户输入的信息文本进行样式控制
•
在数据库存储的不是纯文本内容
，
而是添加了
HTML
标签的内
容
,
据库后
，
前端通过服务器
API
获取数据并渲
用
页
删除旅游资讯时
，
可以在查看的基础上进行操作
，
获取到旅游信息的
ID,
根据主键
ID
可以删
除相应信息.
5
旅游信息查询
对于网站用户
，
如果想通过系统查看一些旅游攻略
、
旅游心得等信息
，
可以通过搜索方式查找
•
本系统提
供搜索框
，
可以进行
查找
•
用户在搜索框内输入要
查找的
，
则在数据库中使用
SQL
语句在对应的旅
中查询比对,把成功
如输入的搜索
的旅
返回
•
例
内容处显
是
“
上海
”
则在
示所有标题包含
”
上海
“
的旅
•
在页面分为最新
和最热两个部分
，
这个内容使用选项卡在页面显示
，
在
PC
端缩略图和标题在一行显
zK
,
内容在另起一行显
示
；
在移动端缩略图
、
标题和内容都显示在不同的行.
此部分内容通过
jQuery
实现选项卡效果
，
代码如图
5
所示.
6
结束语
本文是基于
bootstrap
的旅游网站设计与实现
，
使用
bootstrap
框架实现了
图
5
游记选项卡
式自适应布局的前端
，
系统界面简洁大方
，
使用
PHP
+
SQL
实现后台管理
，
使
行中
，
操作简便
、
稳定
用
jQuery
技术
参考文献
：
了更好的用
验效果
•
在系
，
具有良好的用
验
.
[]
王
琴
.
基于
Bootstrap
技术的高校门户网站设计与实训
[]
•哈尔滨师范大学(自然科学学报
),
2017(3
)
：
43-48
]]
刘
欢
，
卢蓿蓉•使用响应式设计构建高效新型门户网站[]•
中国教育信息化
,2013(9
)
：
71
Tourism
Website
Design
and
Implementation
Based
on
Bootstrap
CAO
Li
(
JinzhongTeachersCo
l
ege
,
Jinzhong030600
,
China
)
〔
Abstract
〕
To
suggest
a
plamming
of
tourism
website
design
and
implememtatiom
based
on
Bootstrap
,
which
states
UI
front
end
design
of
page
frame
imcluding
homepage,
strategy,
trip
mode,destinalion,
travels
and
community,
and
manage
the
personal
information
of
registration,
forgetting
password,and
administrate
the publishing
information
of
travels
or
strategy.
Adopting
the
frame
and
technology
about
Bootstrap
,
HTML5
,
CSS3
,jQuery
and
PHP
,
he
project
running
suggests
that
the
plamming
design
is
reasonably
practicable
so
as
to
achieve
the
results
of
running
stably
by
the
cross
browser
and
cross
platform,and
of
brief
and
friendly
interface.
〔
Key
words〕
Bootstrap
；
self-adaption
；
tourism
website
版权声明：本文标题：基于bootstrap旅游网站设计与实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1710060296a555871.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论