基于web的旅游网站设计与实现


     基于Web的旅游网站设计与实现 Design and Implementation of Tourism Website Based on Web 摘要 随着经济和交通的快速发展,人们对于生活的追求不再停留在物质层面,而是开始了娱乐和精神层面的追求。旅游是现在大多数人在长假期选择的度过方式。如何快速获取各地最新的旅游信息以获得更好的旅游体验便成为旅游者的需求。 本课题是基于Web、Vue-cli脚手架、PHP技术和MySQL数据库实现的一个仅介绍国内旅游景点信息并将社交平台的模式与之结合的网站。网站选择B/S模式,前端采用Vue-cli脚手架进行模块式开发,用户可进行注册登录、浏览网页信息、搜索查询和发布动态等操作;后端采用PHP技术和MySQL数据库实现前端动态数据的存储、查询和删除,后端平台由管理员进行管理,可对数据进行增删改查,及时实现数据的更新和对数据库系统的优化和维护。 关键词:Web 旅游网站 Vue-cli PHP MySQL数据库 Abstract With the rapid development of economy and transportation, people's pursuit of life is no longer on the material level, but on the entertainment and spiritual level. Nowadays,travel is the chosen way to spend the long holidays by most people. How to get update travel information quickly to get a better travel experience has become the demand of tourists. This project is based on Web, Vue-cli, PHP and MySQL, to achieve a website which combines domestic tourist attractions information with social platform model. It chooses B/S mode, the front-end adopts Vue-cli for modular development, users can register, browse web information, search and publish dynamic etc; The back-end adopts PHP technology and MySQL Database to store, inquire and delete the dynamic data of the front-end. The back-end platform is managed by the administrator, and the data can be added, deleted, and changed, timely update the data and optimize and maintain the database system. Keywords:Web travel website Vue-cli PHP MySQL 目录 第1章 绪论 1 1.1 课题研究目的和意义 1 1.2 研究现状 1 1.3 课题研究内容 2 第2章 相关技术背景 3 2.1 Vue-cli概述 3 2.2 PHP概述 3 2.3 MySQL数据库 4 2.4 B/S模式 4 第3章 系统分析 5 3.1系统可行性分析 5 3.2系统需求分析 5 3.2.1系统运行环境 5 3.2.2系统功能需求分析 6 3.2.3系统数据需求分析 6 3.3系统流程分析 6 3.3.1系统运作流程分析 6 3.3.2用户留言流程分析 7 3.3.3用户更新信息流程分析 8 第4章 系统概要设计和数据库设计 9 4.1系统概述 9 4.2系统功能结构设计 9 4.3数据库设计 9 4.3.1数据库需求分析 10 4.3.2数据库主要表单设计 13 4.3.3数据库实现 16 第5章 系统详细设计和功能实现 17 5.1数据库连接 17 5.2旅游景点模块设计和实现 17 5.3旅游线路模块设计和实现 18 5.4用户分享模块设计和实现 19 5.5后台管理设计和实现 19 第6章 系统测试 21 6.1系统测试意义 21 6.2系统测试流程 21 6.3测试用例 21 6.4测试结果分析 22 总结 23 参考文献 24 致谢 25 第1章 绪论 1.1 课题研究目的和意义 经济和交通的快速发展,使人们对于生活的追求不再停留在物质层面,而是开始了娱乐和精神层面的追求。旅游是现在大多数人在长假期选择的度过方式,也是我国国民经济中最具发展优势和竞争优势的产业之一。 中国产业信息网在2019年初发布的关于中国旅游市场的现状分析表明2018年与2012年相比国内旅行人次增加了25.83亿人次,同比分别增长10.76%。旅行收入增加了2.86万亿元,同比增长12.3%。2018年与2017年相比全国入境旅行人次增加了0.01亿人次,同比增长0.5%。近几年来我国的国内旅行人数和入境旅行人数都呈上升趋势,表明旅游业在我国国民经济中具有明显的竞争优势。旅游在经济发展和人民生活水平提高的形势下,已经成为大部分人的生活常态,如何快速获取各地最新的旅游信息以获得更好的旅游体验便成为旅游者的需求。 旅游需要了解目的地的交通、气候、环境和人文历史等信息,以获得更好的旅游体验。互联网技术的发展和大数据时代到来,使旅游网站顺势而生。旅游网站具有信息量大、内容丰富、数据更新较快、便于网友随时查询浏览且不占用系统空间等优势,也是大部分旅行社和地方宣传旅游景点和路线的首选,人们可以通过网站获取各地旅游景点信息,把握旅游出行的最佳时机和方式。 1.2 研究现状 Web的发展以网站模式的不同分为三个时代。 Web1.0 时代的网页以展示为主, 内容为静态,交互性和动态效果较少。 Web2.0时代的网页更注重交互性, 用户除了浏览网页, 还可以在网站上发布文字、 图片、 音频、 视频等资料。Web3.0时代的网页能够通过第三方信息平台搜集不同网站的相关信息进行使用。HTML、CSS、JavaScript是Web前端开发比较重要的三种支柱性语言, 它们各司其职却又相互配合。HTML主要是通过各种语义标签对页面内容进行排版和内容规划;CSS主要改变的是网页的视觉样式,像是字体大小、颜色、阴影效果、透明度、还有一些简单的移动效果等都可用CSS实现;JavaScript主要是将网页的内容和代码分隔开,实现前后端的数据交互和DOM元素的改变。 Web的发展也促进了我国旅游网站的发展。我国旅游业与互联网的融合始于1997年华夏旅游网的成立,这标志着我国旅游网站的发展进入萌芽阶段。2002年后我国旅游网站的发展进入了增速阶段,出现了以携程和艺龙为代表的以在线预订为主要盈利的旅游电子商务网站。2005年,中国第一个旅游搜索引擎网站——“去哪儿”网成立,实现在线比较国内航班和酒店的价格和功能,促进了在线旅游市场的发展。2010年来,在旅游市场和互联网技术发展的碰撞下,旅游网站的类型也越来越多,目前为止有地方性的旅游官网、提供景点信息介绍和交通住宿等的综合服务型旅游网站、提供旅游路线定制或自驾游等的特色旅游网站。 1.3 课题研究内容 本课题基于Web的旅游网站开发与实现,是用Vue、PHP和MySQL等技术配合开发一个为用户提供浏览和发布信息功能以及管理员管理网站信息功能的旅游网站。论文第一部分,概述了网站开发的相关技术和知识。然后进行系统分析,系统分析是以实现系统开发目的为目的的,在系统分析过程中可以更好的了解系统各方面的功能,在相关技术的基础上将网站的功能和系统结构达到最优化。在系统开发中采用PHP实现系统的管理平台开发,MySQL存储和管理数据。PHP和MySQL在Web应用开发中较为常用,兼容性和配合度好,为系统的开发提供很好的技术支持。 第2章 相关技术背景 2.1 Vue-cli概述 Vue-cli是由vue官方提供的一个开发框架,它有一套完整的vue项目架构设计,能够让开发者节省时间,迅速地进行项目的开发。它具有简化网页的开发流程,降低开发难度,提高开发效率和系统的灵活性和可扩展性等优势。 在整个的项目文件中src文件是整个项目的核心文件,里面包含项目的主要代码文件和静态数据。src文件里面的index.html是整个vue项目的主页面,其内容通过路由加载的vue组件来填充,每一个组件也可以单独作为一个页面;main.js是项目的入口文件,主要引入根组件、路由设置,并定义vue实例。可以说index.html和main.js是整个项目启动时首先加载的页面资源和js资源。但由于main.js是入口文件不适合写逻辑,所以就将app.vue作为整个项目的顶级组件,每一个vue页面都由<template>、<script>和<style>三部分组成。而其中的router文件下的index.js是路由配置文件,所有的组件要渲染到页面中,需经过router文件的配置才能加载渲染。 vue-cli是以组件的形式开发项目的,降低了代码的冗余,且利于后期网站的维护和扩展。其所用编程语言除了自身的前缀v-的指令外,还有基于HTML5的模板语法,对于熟悉HTML、CSS和JavaScript并对vue.js有一定了解的开发者而言简单易上手。 Vue常用v-开头的指令为HTML元素添加一些特殊的行为。常用指令有v-if、v-show、v-else、v-for、v-bind、v-on等。 2.2 PHP概述 PHP是由美国人Rasnuslerdorf在1994年所创造的一种嵌入在HTML文档并在服务端执行的多用途脚本语言,它是融合了C语言、Java和Perl语言以及自身的语法而创造的一门语言。PHP与其他的开发语言配合度高,实用性强,且编辑简单,易于学习,在web开发领域中被广泛应用。 PHP是完全免费公开的自由软件,并且所有的PHP源代码都是开源的。PHP具有快速的执行动态网页,运行效率高等特点。PHP能够在Windows、Mac、Linux等主要的操作系统上运行,跨平台性强。另外,PHP不仅支持MySQL、PostgreSQL、Oracle、Microsoft SQL Server等许多流行的数据库,而且支持Apache、IIS等大多数网络服务器。 2.3 MySQL数据库 MySQL是由瑞典MySQL AB公司开发的一种关联数据库管理系统,用于存放网站上的动态信息,如用户的相关信息、网页上需动态加载的信息等。MySQL为动态网站的建立提供了强大的数据库技术支持,被广泛应用于网站开发,是网站开发最常用的关系型数据库管理系统之一。 MySQL数据库以表格的形式来存储数据,一个数据库可以有若干的数据表单,数据表单之间可以是相互独立的也可以是相互关联的。每一个数据表单都由行和列组成,每一列是所要存储的数据的字段和字段值,每一行都是一组相关的数据。每一个表单都会有而且只能有一个主键,主键可以作为与另一个表单建立关联的外键。 MySQL具有如下优点:(1)支持多种系统和编程语言,兼容性好,数据库的可使用性强;(2)支持多线程,提高了运行效率;(3)提供了数据库操作工具,使数据库可视化,易于优化和管理;(4)免费开源,支持大型数据库,体积小,内存大; 2.4 B/S模式 B/S模式又称B/S结构,是Web盛行后的一种网络结构模式。B/S模式兴起后,对于客户端的限制就大大减小,用户只要在有浏览器的客户端上通过浏览器就可以访问网站页面,浏览网页上的信息。服务器与数据库连接进行数据交互,将响应的数据信息返回并渲染到网页上。 在B/S模式下,网站的主要事物逻辑大都是在服务端实现的,客户端的零安装和零维护使得网站的升级和维护越发简单,只要对服务器进行维护和升级即可,大大节省了人力物力和开发成本。 第3章 系统分析 3.1 系统可行性分析 基于Web的旅游网站系统开发主要是实现国内各地旅游信息和用户信息的存储与展示,用户可浏览查询景点信息,用户可在网站注册登录,并在分享区中发布自己的动态信息。本课题从以下两方面对网站开发的可行性进行分析: (1)技术可行性。该网站系统主要用HTML5+Vue-cli+PHP+MySQL基于B/S模式进行开发。HTML5是Web前端开发技术的主流,Vue-cli也是vue提供的一种JavaScript框架,两者融合性高,能很好的完成网页的布局、美化和动态效果。Vue-cli脚手架使网站能进行组件化开发,让网站在开发的过程中和后期扩展与维护都更为简便。PHP支持多种操作系统和服务器,具有平台兼容性强,实用性强,开发效率高等特点,被广泛应用于Web开发领域。MySQL支持多种操作系统和编程语言,具有体积小、查询速度快、性能稳定等优势。所以开发一个Web旅游网站是具备成熟的技术支持的。 (2)市场可行性。中国产业信息网在2019年初发布的关于中国旅游市场现状分析表明2018年与2012年相比国内旅行人次增加了25.83亿人次,同比分别增长10.76%。旅行收入增加了2.86万亿元,同比增长12.3%。这些数据表明旅游业已成为国民经济中具有明显竞争优势的产业之一,旅游在经济发展和人民生活水平提高的形势下,已经成为人们的生活常态。 在线度假旅游占比提升。国民消费水平的提高使旅游外出的需求也逐渐增加。在线交通、住宿、度假旅游也随着互联网技术的发展顺势而生,游客可以在网上随时随地的了解各种旅游景点和当地娱乐设施。消费水平的提升也使游客对旅游体验的要求越来越重视,这也促进了在线旅游的发展。所以旅游网站的开发具有强大的群众基础和市场需求。 3.2 系统需求分析 需求分析是为了明确用户需求,了解系统要为用户提供什么样的功能,确定系统的数据需求是后期系统功能和数据库设计的前提。可以通过信息采集和其他旅游系统的用户反馈进行分析,根据这些数据来设计网站的功能。 3.2.1系统运行环境 本旅游网站的运行必须在安装了Apache 服务器、MySQL数据库等软件的计算机上。网站系统的开发使用了,Apache服务器,HBuilderX开发软件, MySQL数据库和Photoshop等软件。 3.2.2系统功能需求分析 本网站的用户类型有游客、普通用户和管理员。游客可以浏览网站内的景点信息和留言,但是无法发布留言,注册成为普通用户后登录,才可以发布留言和进行个人信息管理。管理员可以对网站所有信息和用户进行管理。 1.用户功能: (1)信息浏览:用户无需登录即可根据网站导航浏览或查找网站上的旅游信息,但是不能发布留言; (2)留言功能:用户注册登录后可以在分享区发布留言,对自己曾去过的城市或景点留下自己最真实的体验感受,共享旅游体验,为其他用户提供参考; (3)信息修改:已注册的用户可以再个人的信息界面对自己的个人信息进行修改,更新自己的信息,删除自己的留言和留言下的评论。 2.管理员功能: (1)信息发布:管理员可以在后台向景点信息表数添加景点信息来发布旅游信息到网页上; (2)信息修改:管理员可以对景点信息和城市信息进行删除、修改、查询; 用户管理:管理员可以对用户发布的留言和评论进行删除; 3.2.3系统数据需求分析 网站上显示的信息和用户的数据都是需要存储和更新的,根据需求分析本网站的数据需求如下: (1)用户信息:昵称、密码、头像、手机号等; (2)留言信息:用户昵称、用户头像、留言时间、留言内容、评论等; (3)景点信息:景点分类、景点名称、景点图片、景点介绍等; (4)路线信息:路线名称、时间、旅行社、天数等; (5)管理员信息:账号、密码等 3.3 系统流程分析 3.3.1系统运作流程分析 用户不用登录即可进入网站浏览网站上的内容,若用户要发布信息,系统会自动判断用户是否登录。未登录则跳转到登录界面,输入相应的个人信息,系统会向数据库发送请求,验证用户信息是否存在或正确,信息正确则登录成功,信息错误则登录失败。登录成功之后便可发布自己的动态,网页会一直保存用户的登录状态,直到用户手动退出登录。系统运作流程图如3-2所示。 图3-2系统运作流程分析图 3.3.2用户留言流程分析 用户进入分享区点击“我要分享”图标即可输入内容发布自己的旅游体验与其他用户分享。点击发布后该数据会被发送到后端存储到数据库,存储成功就返回发布成功的提示,页面刷新加载数据,存储失败返回发布失败的提示,用户可重新输入内容。用户发布信息流程图如图3-5。 图3-5用户发布信息流程图 3.3.3用户更新信息流程分析 登录的用户进入个人界面可修改个人信息和删除留言。用户选择要修改的信息进入相应的修改界面,填写新的信息确认修改,后端会返回提示成功或失败的信息提示。删除即点击每条留言对应的删除按钮确认删除,即可删除该留言。更新信息流程图如图3-6所示。 图3-6用户更新信息流程图 第4章 系统概要设计和数据库设计 4.1 系统概述 本旅游网站是基于Web的B/S模式开发的,用户只要在客户端上通过浏览器就可以访问本网站的界面并浏览相关信息。用户通过浏览器触发某一事件就可以通过服务器访问数据库,实现前后端的数据交互。如图4-1所示。 图4-1网站工作原理图 4.2 系统功能结构设计 根据网站的功能需求分析设计网站功能包括客户端和后台管理。客户端的功能包括登录注册、发布留言、上传图片、修改个人信息、浏览旅游信息。后台管理的功能包括添加、删除、修改、查询数据库信息。如图4-2所示。 图4-2系统功能结构图 4.3 数据库设计 4.3.1数据库需求分析 每一个系统的功能的实现都是在数据库的支持下实现的,所以对于一个旅游网站的实现数据库的设计是必不可少的。首先要进行数据库的实体属性图分析,才能进行数据库表单的结构设计和数据库的实现。根据需求分析来确定网站中的实体和其属性,还有实体和实体之间的关联。 根据从简单到复杂的设计方式,先确定网站的需要哪些实体,并对该实体的属性进行分析,从而得出各实体属性图,最后得出完整的E-R图。通过分析,该网站需要以下实体: 用户实体属性图如图4-3所示。 图4-3用户实体属性图 景点实体属性图如图4-4所示。 图4-4景点信息实体属性图 景点详细实体属性图如图4-5所示。 图4-5景点详细实体属性图 发布动态实体属性图如图4-6所示。 图4-6用户发布动态信息实体属性图 评论实体属性图如图4-7所示。 图4-7评论实体属性图 路线实体属性图如图4-8所示。 图4-8路线实体属性图 根据各个实体之间的联系做出E-R图,如图4-9所示 图4-9网站实体E-R关系图 4.3.2数据库主要表单设计 完成E-R关系图,了解数据之间的联系后,根据E-R关系图得出该数据库应该有以下主要表单。 1.保存用户信息的数据表:用户表(users)(如表4-1所示)用来保存用户信息,主要字段有id(自增,唯一),用户名,用户密码,手机号,用户头像; 2.保存用户留言的数据表:用户留言表(users_comment)(如表4-2所示)用来存放用户发布的留言,主要字段有id(自增,唯一),用户名,留言内容,发布时间,用户头像,图片,用户表id(外键); 3.保存用户评论的数据表:用户评论表(users_commentchilds)(如表4-3所示)用来存放用户在留言下发布的评论,主要字段有id(自增,唯一),用户名,评论内容,评论时间,用户头像,被评论的留言id(外键),用户表id(外键); 4.保存旅游景点信息的数据表:旅游景点表(jingdian_name)(如表4-4所示)用来保存各旅游景点信息,主要字段有id(自增,唯一),景点分类名称,图片,景点概述; 5.存放旅游景点详细信息的数据表:旅游景点详情表(jingdian_detailed)(如表4-5所示)存放的是景点分类下的具体旅游景点名称和详情页面的网址链接,主要字段有id(自增,唯一),景点名字,详情页面的网址链接,旅游景点表的id(外键); 6.存放路线信息的数据表:路线表(luxian)(如表4-6所示)存放的是推荐给用户的旅行社的旅游线路信息,主要字段有id(自增,唯一),旅行社名称,线路名称,发团时间,行程天数。具体表单设计如下: 表4-1 用户信息(users)数据表 字段 数据类型 长度 主键 允许空 说明 id int 11 是 否 编号(主键) userName varcahr 50 否 用户名 passWord varcahr 50 否 用户密码 phoneNumber varcahr 50 否 用户手机号 user_img varcahr 300 否 用户头像 表4-2用户留言信息(users_comment)表 字段 数据类型 长度 主键 允许空 说明 id int 11 是 否 编号 userName varcahr 20 否 用户名 user_comment text 否 发布的内容 comment_time varcahr 20 是 发布动态时间 user_img varcahr 300 用户头像 users_id int 11 外键(用户表id) 表4-3用户评论信息(users_commentchilds)表 字段 数据类型 长度 主键 允许空 说明 id int 11 是 否 编号 commentchild_img varcahr 300 否 用户名头像 commentchild_username text 否 发布的内容 commentchild_time varcahr 20 是 评论时间 commentchild_comment varcahr 300 评论内容 users_comment_id int 11 外键(用户发布动态信息表id) 表4-4旅游景点信息(jingdian_name)表 字段 数据类型 长度 主键 允许空 说明 id int 11 是 否 编号 name varchar 20 否 分类景点名称 detail_url1 varchar 300 是 页面展示图片 detail_url2 varchar 300 是 页面展示图片 detail_url3 varchar 300 是 页面展示图片 detail_url4 varchar 300 是 页面展示图片 detail_introduction text 是 景点介绍内容 表4-5景点详细信息(jingdian_detailed)表 字段 数据类型 长度 主键 允许空 说明 id int 11 是 否 编号 name varcahr 20 否 具体景点名称 Jingdian_name varcahr 20 否 外键 scenic_spot text 是 景点介绍文章 表4-6路线信息(luxian)表 字段 数据类型 长度 主键 允许空 说明 id int 11 是 否 编号 luxian_img varcahr 300 否 展示的图片 luxian_route varcahr 50 否 路线标题 luxian_time varcahr 50 否 发团时间路线 travel_agency varcahr 50 否 旅行社名字 agency_url varcahr 50 否 旅行社链接 4.3.3数据库实现 数据库的实现使用MySQL数据库的管理工具phpMyAdmin,创建datas数据库,按照数据库的表格设计创建相应的数据表单。数据库语言主要使用mysql。 第5章 系统详细设计和功能实现 5.1 数据库连接 网站的运行涉及到数据库的使用,所以要正常运行网站,首先要进行数据库的连接,实现数据的获取。 mysqli_connect('localhost','root','sql191223','datas') 5.2 旅游景点模块设计和实现 旅游景点模块是向用户展示国内各旅游景点的详细信息的模块。景点显示包括景点分类和各景点的详细信息内容显示,景点的信息浏览将数据库中的景点分类和景点详细信息查询出来,在页面中将景点的分类和名称渲染显示出来。简洁美观的页面和井然有序的信息布局方便用户浏览和查找信息。每一景点分类都会有相应的图片展示,以吸引用户对于详细的景点进行浏览。 当页面内容过多时,用户想要浏览某一个景点分类的具体景区,需花费过多的时间去滑动不需浏览的信息。为了方便用户浏览,当页面滑动距离大于景点分类div的高度时,这个景点分类div就会固定在浏览窗口顶部,点击分类中的类目就会滑动到相应区域。如图5-1所示 图5-1景点模块实现图 点击类目页面滑动到相应区域的效果实现代码,如图5-2所示 图5-2效果实现代码图 5.3 旅游线路模块设计和实现 旅游线路模块是将各旅行社的旅游线路的具体信息向用户展示的模块,在每个景点的详情页面都会有相关的路线推荐。路线的展示包括图片、路线、旅行社和发团的时间。路线的信息是通过查询数据库显示的,每个旅行社都添加网址链接,用户可以到旅行社的网页了解相关路线的信息。如图5-3所示 图5-3路线模块实现图 5.4 用户分享模块设计和实现 用户分享模块是为用户提供的共享旅游体验和信息的模块,用户可以分享自己的旅游经历和旅游攻略,也可以在交流中获取新的信息。 用户登录后,在分享区发布动态上传图片,也可以评论自己感兴趣的动态。分享的信息展示主要包括用户的头像、用户名、发布的部分内容、时间和评论数。点击查看全部的标签可以进入该条动态的详情页面,查看所有评论。用户的留言先保存到数据库,再通过查询返回显示到前端页面。如图5-4所示 图5-4分享模块实现图 5.5 后台管理设计和实现 在后台管理系统管理员点击左侧边栏列表的景点表单名字,系统会查询数据库显示对应的表单数据。管理员选中表格中的一行数据选择修改、删除按钮可以对景点分类、景区详细信息、路线信息和用户留言信息进行修改、删除。管理员也可以查找相关的景点分类、景区详细信息,路线信息和用户,如图5-5所示。通过添加按钮可以进入后台的添加界面,管理员可以添加景点信息、路线信息,上传城市的旅游宣传短片,如图5-6所示 图5-5后台信息管理实现图 图5-6后台信息添加实现图 第6章 系统测试 6.1 系统测试意义 由于网络环境复杂多变以及用户所用浏览器的差异,系统测试对网站开发有着重要作用。系统测试的目的主要是为了检测系统的缺陷,然后修改和完善系统。系统测试可以分为内测和整体测试,内测是对网站内的每个功能模块进行重复的测试,寻找可能存在或忽略的问题,然后修改完善;整体测试是对网站在大的访问量下的稳定性和在不同浏览器上的兼容性的测试。 通过系统测试可以更好的完善系统,确保网站的稳定性和兼容性,让用户获得更好的使用体验。 6.2 系统测试流程 系统测试需要经过测试需求分析,测试计划,编写测试用例,测试执行,测试评估等几个阶段。所以在对本网站的测试中,首先进行了测试需求分析,了解用户需求以确定系统要进行那些测试。通过需求分析后编写测试用例,然后在系统的运行环境中进行用例测试,最后对测试结果进行分析。测试流程如图6-1所示 图6-1系统测试流程图 6.3 测试用例 系统测试方法有黑盒测试和白盒测试。黑盒测试又叫功能测试,主要对网站功能的页面、链接、表单和数据库进行测试 ,本网站采用黑盒测试的方法在不同浏览器对本网站的用户登录功能进行测试。登录功能测试用例如表6-1所示 表6-1登录功能测试用例 测试类型 功能测试 模块名称 向心之旅系统用户登录 用例描述 该用例用来测试用户在登录界面能否正常登录,如果出错,是否有错误信息提示 前题条件 存在正确的用户名和密码,登录页面正常,错误提示正常 (数据库存在的用户名:kk;密码:123456789) 编号 测试项 操作步骤 数据 期望结果 1 界面检查 1.通过路由进入界面 2.查看页面样式 进入登录界面的路由:‘/login’ 1.正常进入页面 2.页面样式正常显示 2 用户登录 1.输入正却的用户名; 2.输入错误的密码; 3.点击登录按; 1.用户名::kk 2.密码:123tyjfd$# 3.点击登录 返回“用户名或密码错误”的信息,不能正常登录 1.输入错误的用户名; 2.输入正确的密码; 3.点击登录按钮; 1.用户名:ktov$% 2.密码:123456789 3.点击登录 返回“用户名或密码错误”的信息,不能正常登录 1.输入错误的用户名; 2.输入错误的密码; 3.点击登录按钮 1.用户名:ktov$% 2.密码:123tyjfd$# 3.点击登录 返回“用户名或密码错误”的信息,不能正常登录 1.输入正确的用户名; 2.输入正确的密码; 3.点击登录按钮 1.用户名:kk 2.密码:123456789 3.点击登录 跳转上一页面,导航栏显示“欢迎,kk”, 正常登陆 不输入信息,直接点击登录 点击登录 页面显示“输入用户名”的提示信息 6.4 测试结果分析 网站页面样式正确,整体风格统一,页面之间的交互响应和数据正确; 登录功能的链接、表单和接口功能无误,能正确判断用户输入的信息并返回相应的信息提示; 兼容性一般,在360、火狐、搜狗浏览器上网页和功能都可以正常显示和执行,在IE11版本的浏览器上 display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;的CSS样式不兼容。 总结 本课题网站结合了vue、HTML5、CSS、JavaScript、B/S模式、PHP、MySQL数据库多种语言和技术设计实现,是将旅游信息展示与社交平台模式相结合的一个旅游网站。由于在这之前没有过开发一个完整网站的实践经历,对后端数据接口和跨域请求的问题也不是很了解,对于开发语言的掌握也没有达到熟练运用的程度。 所以在整个项目的设计和实现的过程中由于经验的缺乏和技术能力的限制,虽然基本实现了前期设计的功能,但是整个项目在功能和信息的延展方面还是存在很多不足和不完善的地方。 完成毕业设计的过程是一个不断学习成长的过程。整个项目经历了前期的资料查找,网页设计,数据库设计和后面的网站实现。在网站实现的这个过程中会不断的出现问题,像是刚开始在做用户登录功能时,用户登录成功后一刷新页面用户的登录信息也被刷新消失,这就面临着如何判断用户是否登录,如何保持用户的登录状态的问题。但是有问题就要去解决,在解决的过程中就可以收获到新的知识。通过在网上查找资料,自己实践,最终用vue的Vuex的核心方法 Store解决了问题。 每遇到一个问题就会学习到新的知识,在出现问题解决问题的过程中,我不断的积累经验,提升自身的学习和实践能力。 参考文献 [1]陈豪文,周璐雨,宁志豪.浅谈Web发展及现状[J].计算机产品与流通,2019(06):104. [2]朱二华.基于Vue.js的Web前端应用研究[J].科技与创新,2017(20):119-121. [3]蔡志濠.2019年中国在线旅游行业市场发展现状分析 80、90后成在线旅游主力人群[Z].前瞻产业研究院,2019. [4]何秀芬,杜艳艳.浅谈旅游网站设计[J].中国市场,2010(18):120-121. [5]蔡长征.数据库设计在网站开发中的应用研究[J].科技风,2019(35):80. [6]李素铎,马仲海.浅谈网站测试的基本方法[J].计算机时代,2008(08):14-15. [7]高慧.浅谈Web前端开发技术以及优化[J].中国信息化,2019(12):59-60. [8]王赫.Web前端开发技术以及优化方向分析[J].科技传播,2016,8(08):70+77. [9]黄涓,鲍正德,李晨曦.旅游网站的建构与设计——以国内六大旅游网站为例[J].信息与电脑(理论版),2019,31(22):52-54. [10] 王珊.萨师煊编著.数据库系统概论[M].高等教育出版社,2017-3. [11] 马新强.孙兆.袁哲.Web标准与HTML5的核心技术研究[J].重庆文理学院学报:自然科学版,2010,29(6):61-65. 本文档由香当网(https://www.xiangdang.net)用户上传

    下载文档到电脑,查找使用更方便

    文档的实际排版效果,会与网站的显示效果略有不同!!

    需要 5 香币 [ 分享文档获得香币 ]

    下载文档

    相关文档

    基于web的驴友社交网站设计与实现

    近十年来,随着科技地发展进步,各方面都取得了排山倒海的变化。互联网的七通八达,可以让五湖四海的人们在任何时间和地点进行交流,互联网上的社交似乎成为了主流。所以,以前以实体店为主的旅游社似乎也逐渐...

    1个月前   
    114    0

    基于web学生成绩管理系统设计与实现

    随着计算机技术在各行各业的广泛应用,将计算机技术应用到学校中去,将大大提高学校管理的效率。学生成绩管理系统将在提高学校管理效率中发挥重要作用。

    2个月前   
    113    0

    基于Vue+Django技术的电商网站的设计与实现

    该电商网站使用python框架django-rest-framework和前端框架vuejs开发,采用现在市面上大多数系统流行的浏览器/服务器模式结构。该项目需要使用vuejs框架开发前端界面,...

    2个月前   
    99    0

    基于Web技术的驾校考试系统的设计与实现毕业设计

    基于Web技术的驾校考试系统的设计与实现毕业设计 摘 要 在网络技术逐渐渗入社会生活各个层面的今天,传统的考试方式也面临着变革,而网上考试则是网络技术一个很重要的发展方向。网上考试一...

    2年前   
    1136    0

    基于WEB的停车场管理系统设计和实现毕业设计

    20XX 届 毕 业 论 文(设计)论文(设计)题目基于WEB的停车场管理系统的设计和实现院系名称计算机科学与技术系专业(班级)计算机科学与技术2005级本科班姓名(学号) 指导教师 ...

    7个月前   
    295    0

    基于WEB的图书管理系统的设计与实现课程设计

    软件工程课程设计报告基于WEB的图书信息管理系统的设计与实现所 在 学 院 信息科学技术学院 专 业 名 称 计算机科学与技术 ...

    10个月前   
    346    0

    毕业论文:基于Web的办公自动化系统设计与实现

    基于Web的办公自动化系统设计的主要目的是利用现代的互联网技术,采用人机对话方式为办公人员之间搭建一个互动平台。实现无纸化办公和多部门间协同办公,数据存储安全可靠的要求,在降低办公成本的同时,也...

    2年前   
    1036    0

    基于web的驾校考试管理系统设计与实现

    本文主要从驾校考试管理系统的选题,需求分析而出发,根据现有的驾校系统对其进行功能模块设计。系统实现方面,基于B/S架构,而且在开发技术方面使用了jsp使得其开发更为简化,以Tomcat作为服务器...

    2个月前   
    96    0

    求职网站的设计与实现

    伴随大学生人数不断增加,就业负担沉重,工作职位少但是待业人员众多等,在上述环境中尽早抓住时机就变成寻找最佳工作的关键条件,目前即便是网络社会,但是大部分学生依旧无法逃脱奔波于人才市场的窘境,利用...

    2个月前   
    78    0

    基于HTML5技术的娱乐资讯追星网站设计与实现

    本网站制作主要使用HTML5语言结合Java程序设计语言、MySQL数据库和Mybatis技术进行动态网站的设计与开发,采用流行的B/S系统模式和Tomcat服务器。该网站的设计开发实现模块化,...

    1个月前   
    79    0

    基于HTML5技术的在线匹配交友网站的设计与实现

    自中国在改革开放以来,人们的经济生活水平不断得到提高,随着吃饱喝暖,人们开始更加注重精神层面的享受,而二十世纪以来,计算机互联网技术在我们的生活中已经变得无处不在,扮演着重要的角色。我们不只是写...

    1个月前   
    62    0

    论文:基于Web2.0实现图书馆全民共享

    随着信息资源类型的日益多样化和信息数量的急剧增加,图书馆作为收集、保存和传播知识信息的机构,只有通过信息高速公路网络,最大限度地获取信息资源,才能满足广大读者对信息需求量迅猛增长的需要。同时,文...

    3年前   
    795    0

    商务网站的设计与实现毕业设计

    商务网站的设计与实现 摘要要求字数400字以上。 新华商城商务网站是以电子商务类网站为基础进设计行开发的前面再加一小段,说明当前商务网站的情况。 ,并充分利用计算机网络资源,以...

    2年前   
    1583    0

    JAVA学习网站的设计与实现毕业设计

     毕业论文(设计)题 目  JAVA学习网站的设计与实现      院 系 专 业 计算机科学与技术学生姓名 ...

    10个月前   
    364    0

    个人网站的设计与实现专科毕业设计

    毕 业 设 计(说 明 书)题 目:________________________________姓 名:________________________________编 ...

    11个月前   
    327    0

    精品课程网站的设计与实现毕业设计

    此篇论文主要研究了精品课程网站的开发过程,目标是向大学所学习相关课程的学生提供一个知识交流平台,并为任课教师建设一个教学资源管理信息系统。系统以Html、Asp语言为依托,使用Access作为系...

    1年前   
    2380    0

    基于web的图书管理系统

    基于Web的图书管理系统目前,信息时代是这个社会的主旋律,社会的各个区域和领域都因为信息的技术改革而发生了新的变化。跟上时代的步伐,因为整个科技社会的变化和发展很快,增强信息化公司的竞争能力,...

    2个月前   
    95    0

    基于Web的学生信息管理系统

    在现如今这个网络技术高度普及和信息全球化的年代,信息化的程度和互联网技术在国际竞争中充当着重要的角色,华为5G的实例告诉我们,谁先掌握技术谁就有话语权。

    2个月前   
    103    0

    基于ASP技术的网站的设计与开发毕业论文

    基于ASP技术的网站的设计与开发毕业论文 目录 第一章 绪论 1 1.1引言 1 1.2网站的简介 1 1.3网站开发的意义 2 1.4网站的特点及实现目标 2 1.4.1网站的特点 2 1...

    2年前   
    1202    0

    毕业论文:基于ASP技术的网站的设计与开发

    当今世界已经跨入了信息时代,计算机科学与技术正在迅猛发展,尤其是以计算机为核心的信息技术正在改变整个社会的生产方式、生活方式和学习方式。网站的设计与开发是当中的的一项重要工作。在设计过程中涉及大...

    2年前   
    1051    0

    文档贡献者

    爱***享

    贡献于2021-09-17

    下载需要 5 香币 [香币充值 ]
    亲,您也可以通过 分享原创文档 来获得香币奖励!
    下载文档

    该用户的其他文档