【《基于Vue的SPA旅游网站设计》9400字（论文）】

基于Vue的SPA旅游网站设计TOC\o"1-2"\h\u92511.引言 1145521.1研究目的及意义 1111641.2国内外研究现状 139242.网站开发环境 110412.1Javascript简介 226542.2Vue框架简介 2157022.3Node.js简介 2144702.4Express框架简介 265612.5B/S架构简介 244772.6Element-uiUI框架简介 2242712.7MongoDB数据库简介 312462.8Vuex简介 388453.网站的分析 3112843.1需求分析 3289813.2数据分析 382913.3功能分析 3276733.4可行性分析 3159774.网站的总体设计 391004.1功能设计 4109084.2数据库设计 4209825.网站的详细设计 4180415.1网站前台模块 422195.2网站后台模块 411676.网站的测试 493176.1网站测试目的与意义 4147336.2网站测试方法 4201046.3功能测试 4150887.小结 414752参考文献 4摘要：外出旅游是缓解人们压力，释放压力的一个好方法。旅游往往是大众一心向往的一种生活方式。本网站就是为了帮助旅游爱好者而专门开发的一套网站，它采用了主流的前端开发模式和前端开发架构和express后端框架而设计实现的，真正给用户带来快捷的网上浏览旅游景点和预定旅游景点的便捷体验。用户在本网站可以欣赏各种不同的旅游景点，对旅游景点进行评论和查看评论，从而可以和其他旅客进行互动，喜欢该景点则可以点击想去图标表示喜欢，查看景点的浏览量。在个人中心可以修改头像、管理评论和管理预定的景点。遇到问题可以找客服解决，可以留言反馈等。关键词：旅游网站VSCode编辑器Vue框架1.引言1.1研究目的及意义随着现代科技的发展，人类进入了一个科技笼罩的文明新时代，我们广泛的使用各种高科技产品和新兴技术。计算机的广泛使用及互联网的飞速发展使得我们对它的依赖在增加，我们越来越离不开计算机和互联网了。无论是小小的家庭还是学校、企业、公司，各行各业都在广泛的使用着计算机。面对飞速发展的新时代，我们往往要在线去做很多事情。传统的旅游方式是先到达旅游景点，买票后方可进入，如果有人数限制，就可能发生到达目的地后却因人数已满而买不到票的情况，而且可能是朋友推荐或看广告而发现的旅游景点，对该旅游景点信息可能不那么容易有一个清晰、详细的了解。现在，为了方便用户线上进行旅游活动，所以特地开发了这套旅游网站。本网站是专门为方便用户线上旅游活动而开发的，用户可方便的欣赏各个旅游景点的相关图片、查看完整文字介绍，以及查看每个景点的相关评论，达到对每个景点有一个较为详细的了解，从而可已自行选择是否预定某个旅游景点。线上预定景点的优点是可以避免传统旅游到达目的地却可能买不到票的尴尬场面，使用户更加放心的去使用，给用户更好的用户体验。 1.2国内外研究现状随着社会的进步及科技的发展，快节奏的生活方式已成为我们的首选，人们尽可能少地花大量的时间去做一件事情，而是喜欢尽快做完。为了给用户带来最好的体验，方便用户参加和了解旅游活动，开发一个线上旅游的项目非常有必要，它可以节省人力的投入和解决管理繁忙的困难局面，管理员只需布置好景点及相关数据和设置，即可一次操作，永久受益，一切交给网站来做，大大减轻了旅游管理人员的工作量和负担，无论对用户还是对旅游景点的管理员都是非常友好和方便的，所以旅游网站的开发还是非常有必要的。2.网站开发环境 2.1Javascript简介网页开发离不开html、css、javascript，作为前端程序员必会的一门语言，在浏览器中运行，先经过预编译后，边执行边运行，它是用来跟用户进行交互的脚本语言。最初，它只是用来校验表单是否填写正确，但随着时间的推移，它的功能变得越来越丰富了，可以改变各种css样式还可以发送ajax请求，所有的行为都是它来控制，它变得越来越重要，有着不可或缺的地位，在它的更新迭代过程中，它变得越来越成熟，很多开发者都基于原生js来开发各种各样的库。 2.2Vue框架简介Vue是我非常喜欢的一个前端开发框架，受到全世界的欢迎，它的我国的骄傲。传统的网页开发过程中，视图和数据的对接都要靠程序员自己去完成，比较繁琐又容易出错，Vue框架的VM是数据和视图进行匹配的一个中间件，它的作用就是专门响应式地把数据对接到视图层，程序员只需把数据放在vue里，vue这个中间件会自动把数据渲染到网页中，我们并不需要关心vue这个中间件内部是如何处理的，只需按照vue的语法规范来写，即可达到简单的代码实现很多重要的功能。另外，vue的语言是js，掌握了js即可很容易的上手vue，不需要像react需要开发者重新学习一套新的语法，大大节省了时间和精力的开销。Vue的强大且容易上手使得我采用vue作为前端框架。 2.3Node.js简介node.js是一门服务端的编程语言，采用js语言编写，运行在ChromeV8引擎上，很贴合前端开发工程师。Node.js是单线程、非阻塞IO的。它只有一个线程，却可以处理高并发的任务，原因是它不像其它的服务端编程语言，每一个用户进入就开启一条线程，而是有需要处理的任务时，它就立即工作，不会等待某一个用户全部任务结束后才执行下一个任务，数据库操作完成后就立即执行下一个任务，事件循环机制使得它搭建成本低而执行效率高。它是一个原生的服务端语言，开发者可以自由发挥自己的能力去编写出理想的代码。 2.4Express框架简介express是一个服务端后台的框架，正如其名，他的特点是快速帮助开发者搭建自己的后端程序。它跟node.js不同的是，node.js是原生服务端语言，很多代码多需要开发者自己去编写，偏向与底层的很多代码要开发者去完成，比较繁琐。而express的优点即体现出来，它是对原生nodejs的封装，express把很多繁琐重复的代码已经替开发者写好了，开发者只需遵照它的语法知识，使用简单的api即可实现强大的功能，实现node.js很多行代码才能完成的工作。Nodejs要写的底层代码太多，不利于大型项目的开发，很是繁琐，所以我选择了express来作为后端的语言来快速开发这次的旅游网站后端项目。 2.5B/S架构简介B/S架构是目前最流行的一种模式。B即browser意思是浏览器，S即server意思是服务器。B/S架构模式最大的特点是所有的客户端程序全部运行在浏览器，没有浏览器是不行的，因为浏览器是每台电脑和手机必须安装的软件，所以B/S模式的应用能力很强，它只需要有一个浏览器即可运行项目，如果网站更新，只需刷新浏览器即可更新网站，无需单独下载一个客户端，对于使用者很友好，方便，但是安全性相对差一些，容易被攻击。 2.6Element-uiUI框架简介element-ui是一个非常流行的前端UI框架，是饿了么团队开发并开源，用它构建用户界面非常方便，适用于中后台的项目。使用它可以快速的完成页面的布局，它提供了很多vue封装后的组件供开发者选用，再配合vue框架是一个非常不错的选择。它可以全部导入项目，也可以按需导入。使用element-ui可以让开发者快速的完成项目的界面布局，可以让开发者把精力更多的放在项目的逻辑代码方面而无需花大量的时间来进行页面布局。学习element-ui还是非常方便的，官网有所有组件的具体使用说明及大量组件的使用案例及代码，每个组件都写了它的所有的属性和方法，教程写的很详细，对开发者很友好，同时它实现的页面非常美观，还可以自定义主题。 2.7MongoDB数据库简介mongodb数据库是我最喜欢、最常用的数据库。Mongodb一个关键的亮点是它存储的数据是以JSON格式来保存数据的，它可以存储各种类型的数据，不论它有多复杂。它使用方便，灵活，轻量，很受欢迎。 2.8Vuex简介vuex是一个强大的数据管理库。我们都知道，采用vue框架开发的项目是基于组件化的形式开发的，项目之间是要进行数据传递的，如果是父子组件之间传值，比较容易，可如果是兄弟之间或者嵌套很多层组件之间要想数据传递会是一件特别麻烦的是，因此vuex运用而生。Vuex只需定义好数据，写好相关设置数据的方法，调用即可。注意，vue数据是单向流动的，修改数据不能直接赋值，而是要通过方法来修改的。使用vuex的感受就是很方便，但是也有缺点，一旦浏览器刷新，存入vuex的数据就会丢失，这种情况我们是不希望发生的，解决方法是在浏览器刷新时把数据存入sessionStorage中，当浏览器加载时读取sessionStorage中的数据再存入vuex中。vuex修改数据有2种方式，一种是同步修改，调用mutations中的方法，还有一种是异步修改，比如读取数据库之后进行再把数据存入vuex中，这时候就要调用actions中的方法来修改。如果我们不希望直接展示原始数据，而是对数据进行处理，把处理之后的数据显示出来，这是，就要用到getters里的方法来加工state，之后即可展示我们想要的数据。3.网站的分析 3.1需求分析3.1.1需求目标该网站为一个旅游景点展示和管理服务网站，该网站的使用者分为2种群体，一种是普通用户，可以使用本网站的用户模块及各种功能，可以享受网站用户的权益及服务。另一种是管理员，管理员可对网站进行相关的管理，包括上传景点图片、秒速等相关信息，查看用户个人信息、评论信息、预定信息，回复用户的来信等功能。3.1.2页面需求网页的页面设计效果对于一个网站来说是至关重要的。因为网站是给用户使用的，用户使用的过程中第一印象就是这个网页的外观，所以网页的UI设计对于这个网站来说是至关重要的，而element-ui出色的UI色调搭配让我把它作为网站的页面布局首选。3.2数据分析本网站采用的数据库是mongodb数据库，这也是我们学习到的数据库之一，也是唯一一个前端学习到的数据库，基本的增删改查功能已掌握，使用人数较广，操作便捷，因此选用了这个数据库。 3.3功能分析本网站可供客户和管理员2类人群使用。客户可以浏览风景、评论和查看评论、点赞互动、预定景点，查看个人信息，留言反馈等。管理员可以上传景点图片、文章，查看用户信息等等。 3.4可行性分析3.4.1经济可行性本网站基于vue框架进行的前端开发，所需知识全部来源于平时所学，编辑器采用VSCode，VSCode是微软推出的免费的我认为是最优秀的编辑器。开发项目的硬件方面只需一台计算机即可，软件方面可以全部从网络上下载，全部免费，所以经济上是可行的。3.4.2技术可行性本网站全部基于前端知识来完成的，踏实的js基础是完成项目必不可少的条件之一。基于B/S架构模式，前端框架使用Vue、后端框架使用express、数据库使用mongodb数据库、UI框架使用element-ui，这些框架、数据库和语言都是平时学的知识，所以在技术上是可行的。3.4.3社会因素可行性一般游客外出去旅游要先到达目的地后买票，才能进入景点观赏,而本网站不需要用户提前到达旅游区域，可以先在线上浏览风景，预定景点，评论互动，提高用户体验。而管理员也不必进行繁琐的管理，只需发布景点和设置好响应的功能即可。4.网站的总体设计 4.1功能设计本网站共分为2个部分，即前台提供用户服务，后台处理用户服务。前台主要包括登录注册、浏览景点、查看评论、发表评论、点赞互动、预定景点、个人中心等模块；后台主要包括管理员上传景点图片、上传景点描述、查看用户信息、处理用户留言反馈等模块。旅游网站的功能结构图如图1所示。图1旅游网站功能图图1旅游网站功能图4.1.1网站前台功能设计本网站前台主要给用户提供服务，用户在前台可以浏览景点的风景图片，可以大图查看，可以查看该景点的详细信息，及用户评价，依此作为是否要预定该景点的依据。如果遇到问题，可以到客服模块寻求客服机器人帮助，若解决不了，则可以转接人工客服寻求帮助。前台功能模块图如图2所示。图2前台功能模块图图2前台功能模块图4.1.2网站后台功能设计网站后台主要实现了景点的管理、评论的管理、用户的管理、预定的管理、用户来信管理等模块。网站后台功能模块图如图3所示。图3后台功能模块图图3后台功能模块图 4.2数据库设计4.2.1E-R图E-R图是数据库中重要的一个概念，可以将项目中的数据映射到关系数据库的二维表中。本网站管理员、用户、景点、评论、订单、来信的E-R图如图4所示。图4网站数据库E-R图图4网站数据库E-R图根据具体的功能需求，对本网站的E-R图进行细化从而得到几种实体模型-关系模型，以下为部分-关系模型。（1）管理员实体：包括账号、密码、评论Id、回信Id等属性。如图5所示。图5管理员实体图图5管理员实体图（2）用户实体：包括昵称、账号、密码、头像、订单Id、评论Id等属性。如图6所示。图6用户实体图图6用户实体图（3）订单实体：包括订单Id、用户Id、景点Id等属性。如图7所示。图7订单实体图图7订单实体图（4）评论实体：包括评论Id、评论内容、景点Id、用户Id等属性。如图8所示。图8评论实体图图8评论实体图（5）景点实体：包括景点名称、景点图片、景点描述、景点评论Id等属性。如图9所示。图9景点实体图图9景点实体图（6）来信实体：包括管理员Id、用户Id、来信内容等属性。如图10所示。图10来信实体图 图10来信实体图4.2.2数据库表结构本网站的数据库的表的结构分为：管理员表、用户表、景点表、评论表、订单表、来信表。如下所示。（1）管理员表（admins)：此表记录管理员的信息，包括管理员的名称（username）、密码（password）,评论Id（chatId）,来信Id（emailId），如表1所示。表1管理员表（admins）表1管理员表（admins）字段名称字段类型_idObjectIdusernameStringpasswordStringchatIdStringemailIdString（2）用户表（users）：此表记录用户的信息，包括用户的昵称（username）、密码（password）、评论Id（chatId）点赞Id（like）、订单Id（orderId），如表2所示。表2用户表（users）表2用户表（users）字段名称字段类型usernameStringpasswordStringchatIdStringemailIdStringlikeArrayorderIdArray（3）景点表（looks）：次表记录景点的信息，包括景点的名称（title）、评论Id（chatId）、图片数量（imgNum）、景点描述（desc）、喜欢列表（likeList），如表3所示。 表3景点表（looks） 表3景点表（looks）字段名称字段类型titleStirngdescStringchatIdArrayimgNumNumberlikeListArray（4）评论表（chats）：此表记录评论的信息，包括评论Id（chatId）、评论内容（content）、景点Id（lookId）、用户Id（usernameId），如表4所示。表4评论表（chats）表4评论表（chats）字段名称字段类型contentStringchatIdStringlookIdIntegerusernameIdStirng（5）订单表（orders）：此表记录订单的信息，包括订单Id（orderId）、用户Id（usernameId）、景点Id（lookId），如表5所示。表5订单表表5订单表字段名称字段类型orderIdStringusernameIdStringlookIdString（6）来信表（emails）：此表记录来信的信息，包括来信Id（emailId）、用户Id（usernameId）、管理员Id（adminId），如表6所示。表6来信表表6来信表字段名称字段类型emailIdStringusernameIdStringadminIdString5.网站的详细设计 5.1网站前台模块5.1.1用户登录注册模块用户在未登录的状态下是可以进行浏览旅游景点的，但是相关权限会受限，只能进行某些功能的操作，例如，未登录状态下是不可以进行评论的，因为评论需要记录用户的昵称和头像，没有登录的用户则不可以，同时，也不可以点击喜欢图标，只能显示喜欢的数量。登录和注册的页面主体是一个表单el-form区域，每个表单由若干个表单项el-form-item组成，每个表单项里有el-input输入框或者是el-button按钮来提交或重置表单，定义一个对象，把对象保存到el-form的model里，每个表单项填入响应的prop属性表示每个表单输入项。用“@click”来绑定一个点击事件来提交登录表单或者是注册表单数据给后台，数据的发送用到了axios库，把它绑定到vue的原型上，即Vtotype.$http=axios，即可在使用axios时直接用this.$http.get()即可发送请求数据。由于登录注册涉及到用户密码的传输，get请求会把请求参数拼接到URL部分，不安全，所以一般都采用发送post请求来完成，这里我也同样采用了post请求方式来发送数据。登录成功后，把数据存入了vuex中保存。用户登录注册模块如图11和图12所示。图11用户登录模块图图11用户登录模块图图12用户注册模块图图12用户注册模块图5.1.1景点欣赏模块景点展示大致展示了景点的信息，最多展示4张图片及图片的上传时间，描述只展示2行，多于2行以省略号显示，评论只显示最新的一条评论，喜欢图标展示喜欢的人数，这些都是在景点展示页面组件显示时，会向服务器发送获取所有景点信息来获取展示数据。点击图片后会显示该图片的大图预览，是在标签el-image的属性加了preview-src-list数组即可实现。点击某一景点的预定按钮会弹出确认预定弹框，如果确认成功，则会向服务器发送预定请求，当接受到预定成功的响应码后，弹出提示消息提示用户预定成功，如果返回失败的响应码，则弹出提示消息提示用户预定失败。点击详情按钮，则会跳转到详情页面，（该页可展示所有评论和完整文字描述）是为详情按钮绑定了点击事件，同时用到了编程式导航和动态路由匹配技术，在代码里写入$router.push(‘/detail’+item.id)即可跳转到详情页，用户登录后即可点击想去图标和发表评论，这里是判断vuex中用户名是否为null来确定用户是否登录，以及用v-if来显示和隐藏我要评论的折叠面板。景点欣赏图如图13所示。加入了element-ui提供的分页功能，分页功能主要有每页展示条目的数量和当前页码这两个数据参数，使用时首先向服务器发起获取所有景点的请求，服务器接收到该请求后，进行读取mongodb数据库的操作，用lookModel.find({}).sort({

_id:

-1

}).limit(count).skip((num

-

1)

*

count).exec((err,

data)发起分页查询数据库命令，sort是对数据库进行排序，因为我们想要把后面添加的景点即最新景点优先给用户展示，limit限制了每次查询的条数，skip表示跳过几条数据后从该位置开始查询，再获取数据库数据的总条数，这个用来最后生成总的页码数，再把数据返回给前端。页面图片如图14所示。图13景点欣赏图图13景点欣赏图图14页码图图14页码图5.1.2个人中心模块个人中心显示了用户的头像及修改头像、我的评论及删除评论、我的预定及删除预定。每一个操作都用axios向服务器发送请求，当返回成功码时提示用户操作成功，返回错误码提示用户操作失败。个人中心图如图15所示。图15个人中心图图15个人中心图5.1.3客服模块客服模块是为了解决用户的问题而设立的一个模块，机器人客服是把常见的问题预先写好，用户只需点击查看即可，如果没有解决问题，则可以留言提问，等待工作人员回信解答。客服模块图如图16所示。图16客服模块图图16客服模块图5.2网站后台模块网站的后台主要有5个基本模块，每个模块对应左侧的一个导航菜单得以实现，导航菜单用el-menu标签完成，在该标签上添加router属性表示它是一个具有路由跳转功能的菜单，把每一项菜单的index属性值写为每个路由的路径，即可实现点击左侧的导航菜单跳转到对应模块的路由界面。这5个后台基本模块必须是管理员账号登录后才显示，普通用户是无法登录到网站的后台的，这是加入了登录检测是否为管理员账号得以实现。5.2.1景点管理模块管理员后台的景点管理模块的右侧界面和用户前端景点展示基本相同，在此基础上增加了添加景点按钮和删除景点按钮，添加景点按钮则会跳转到添加景点的路由完成响应操作，可以设置要添加景点的名称、文章介绍和相关图片，用到了el-input标签来完成基本功能的布局，之前先要上传完成图片后才可以把其它资料上传到服务器的数据库，经过修改，可以在添加完成图片和文字后一键上传数据，体验更加友好，上传成功则$message.success()提示成功，否则$message.error()提示失败。景点上传界面如图17所示。图17景点上传界面图图17景点上传界面图5.2.2用户管理模块图18用户管理模块图用户管理模块是对用户相关信息的管理，主要记录了用户的基本信息和管理员的基本信息，这些信息包括用户名、密码和身份（是否为管理员）。尤其要注意的一点是，密码的存储无论从职业操守来说还是从安全方面来考虑，都必须加密储存而不是明文存储，且加密存储的密文必须是不可逆的，加盐，还要保证密文无法对应唯一一个明文，例如不可以简单使用md5加密。这里在用户注册时使用了bcrypt这个加密库，极大地提高了密码地安全性，黑客要想破解密码变得举步维艰。用户管理模块如图18所示。图18用户管理模块图5.2.3评论管理模块评论管理模块主要包括用户和管理员在景点欣赏界面发表的评论，用户名、评论景点、评论内容和删除按钮都以表的形式展示数据，管理员可以点击删除按钮删除对应用户的评论记录。评论管理模块如图19所示。图19评论管理模块图图19评论管理模块图5.2.4订单管理模块订单管理主要展示了用户的预定信息，管理员可以点击删除按钮删除该订单。订单管理模块如图20所示。图20订单管理模块图图20订单管理模块图5.2.5来信管理模块来信管理模块主要解决用户提出的问题，管理员进行回复。若管理员不满意当前的回复，可以再次回复，会更新回复内容，还可以删除该条记录。来信模块图如图21所示。图21来信管理模块图图21来信管理模块图6.网站的测试 6.1网站测试目的与意义网站测试是开发网站后期的一个必不可少的环节，它的操作意义重大，直接关系软件是否存在bug是否可用可上线，我们必须进行这布操作，才能保证网站的正常运行。6.2网站测试方法测试全部采用模拟真实数据进行测试。 6.3功能测试6.3.1用户注册登录用户登录注册模块测试表如表7所示。表7用户登录注册测试表表7用户登录注册测试表测试内容预期结果实际结果注册用户名333，密码333333注册成功提示框显示注册成功登录用户名333，密码111111登录失败提示框显示密码错误登录用户名333，密码333333登录成功提示框显示登录成功6.3.2用户评论用户评论模块测试表如表8所示。表8用户评论测试表表8用户评论测试表测试内容预期结果实际结果未登录无法评论不显示评论el-input标签已登录，写入评论内容后提交评论成功显示评论el-input标签，且评论成功6.3.3用户预定景点用户预定景点模块测试表如表9所示。表9用户预定景点测试表 表9用户预定景点测试表测试内容预期结果实际结果点击预定按钮后点击确定预定成功提示框显示预定成功点击预定按钮后点击取消取消预定提示框显示取消预定6.3.4用户点赞用户点赞模块测试表如表10所示。表10用户点赞测试表表10用户点赞测试表测试内容预期结果实际结果未登录无法点赞提示框显示请先登录登录后点赞点赞成功提示框显示点赞成功点赞后再次点击取消点赞提示框显示取消点赞6.3.5客服客服模块测试表如表11所示。 表11客服测试表 表11客服测试表测试内容预期结果实际结果查看机器人客服显示帮助信息可以折叠或展开对应的帮助信息留言反馈测试，用户向管理员留言留言成功提示框显示留言成功且显示对应留言管理员回复用户的留言回复成功提示框显示回复成功且用户前端收到管理员的回复6.3.6管理员登录注册管理员登录注册测试表如表12所示。表12管理员登录注册测试表表12管理员登录注册测试表测试内容预期结果实际结果点击注册按钮，输入用户名admin，密码admin，注册码ABCabc123注册失败提示框提示用户名重复点击注册按钮，输入用户名admin1，密码admin1，注册码aaaaaa注册失败提示框提示注册码错误点击注册按钮，输入用户名admin1，密码admin1，注册码ABCabc123注册成功提示框提示注册成功点击登录按钮，输入用户名admin2，密码admin2登录失败提示框提示用户不存在点击登录按钮，输入用户名admin1，密码admin2登录失败提示框提示密码错误点击登录按钮，输入用户名333，密码333333登录失败提示框提示该账号不是管理员账号点击登录按钮，输入用户名admin1，密码admin1登录成功提示框提示登录成功，并跳转到景点管理界面6.3.7发布景点发布景点模块测试表如表13所示。表13管理员发布景点测试表表13管理员发布景点测试表测试内容预期结果实际结果在景点管理页面点击发布按钮跳转到发布页面跳转到发布页面输入景点名称、详情等文字信息输入成功输入成功点击上传图片按钮选择图片导入图片成功导入图片成功，且显示导入的图片点击一键上传按钮上传成功提示框提示上传成功，回到景点管理页面显示刚才上传的图文信息6.3.8用户管理用户管理模块测试表如表14所示。表14用户管理测试表表14用户管理测试表测试内容预期结果实际结果未登录无法查看用户信息无法查看用户信息已登录可以查看用户信息列表显示用户信息6.3.9预定管理表15预定管理测试表预定管理模块测试表如表15所示。表15预定管理测试表测试内容预期结果实际结果未登录无法查看预定信息无法查看预定信息已登录可以查看用户预定信息呢列表显示用户预定信息点击删除按钮删除该订单提