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

基于Vue的SPA旅游网站设计 21.1研究目的及意义 21.2国内外研究现状 22.网站开发环境 3 32.2Vue框架简介 3 32.4Express框架简介 32.5B/S架构简介 42.6Element-uiUI框架简介 42.7MongoDB数据库简介 42.8Vuex简介 4 4 5 5 53.4可行性分析 54.网站的总体设计 54.1功能设计 54.2数据库设计 75.网站的详细设计 5.1网站前台模块 5.2网站后台模块 6.网站的测试 6.1网站测试目的与意义 6.2网站测试方法 2 345回复留言回复留言客服模块理台查看用户信息后发布景点登录注册个人中心预定景点点击想去图标务服查看发表评论台前景点浏览登录注册管图1旅游网站功能图留言反馈留言反馈人工客服机器人客服管理我的预定管理我的评论修改头像预定景点展示所有评论展示完整描述展示图片展示图片评论点赞展示部分描述展示图片轮播图图2前台功能模块图查看来信理管删除订单户用查看订单删除用户理理管管台户查看用户查看评论查看景点理删除景点管点景添加景点理发表评论管论评块删除来信模服客后用图3后台功能模块图E-R图是数据库中重要的一个概念，可以将项目中的数据映射到关系数据库的二维表中。本管理员n图5管理员实体图图6用户实体图(3)订单实体：包括订单Id、用户Id、景点Id等属性。如图7所示。(4)评论实体：包括评论Id、评论内容、图9景点实体图(password),评论Id(chatld),来信Id(emailld),如表1所示。字段名称字段类型_id评论Id(chatId)点赞Id(like)、订单Id(orderld),如表2所示。字段名称字段类型(3)景点表(looks):次表记录景点的信息，包括景点的名称(title)、评论Id(chatId)、表3景点表(looks)字段类型(4)评论表(chats):此表记录评论的信息，包括评论Id(chatld)、评论内容(content)、表4评论表(chats)字段名称字段类型景点Id(lookId),如表5所示。表5订单表字段名称字段类型管理员Id(adminId),如表6所示。表6来信表字段名称字段类型图11用户登录模块图图12用户注册模块图是为详情按钮绑定了点击事件，同时用到了编程式导航和动态路由匹配技术，在代码里写入集美鳌园景区位于厦门市集美学村，占地面积18.5万平方米，由集美鳌园、嘉庚公园、陈嘉庚纪念馆、嘉庚文化广场、陈嘉庚先生故居、归来堂以及归来园等景点组成，是全国文明风景旅游区，国家4级旅游景区，全国中小学爱国主义教育基地，全国爱国主义教…2条评论3人想去123:要预定一个哦。北辰山旅游景区详情图13景点欣赏图景点欣赏图14页码图修改头像鼓浪屿想去这个景点。我的预定图15个人中心图2、这个网站的风景图片真实可信吗?图16客服模块图旅游网站后台管理糸统旅游网站后台管理糸统欢迎您的使用旅游网站后台管理系统~欢迎您的使用否是是$Z6310SmL7TH6EpQ2SHDVYXDV9DuRqz否图18用户管理模块图旅游网站后台管理系统～欢迎您的使用旅游网站后台管理系统～欢迎您的使用用户名喜欢夜景。要预定一个哦。看看。图19评论管理模块图如图20所示。旅游网站后台管理系统~欢迎您的使用用户名55图20订单管理模块图来信管理模块主要解决用户提出的问题，管理员进行回复。若管理员不满意当前的回复，可以再次回复，会更新回复内容，还可以删除该条记录。来信模块图如图21所示。旅游网站后台管理系统~欢迎您的使用旅游网站后台管理系统~欢迎您的使用用户名管理员回复内容图21来信管理模块图表7用户登录注册测试表测试内容预期结果实际结果注册用户名333,密码333333注册成功提示框显示注册成功登录用户名333,密码111111登录失败提示框显示密码错误登录用户名333,密码333333登录成功提示框显示登录成功表8用户评论测试表预期结果实际结果未登录不显示评论el-input标签已登录，写入评论内容后提交评论成功成功表9用户预定景点测试表预期结果实际结果点击预定按钮后点击确定预定成功提示框显示预定成功点击预定按钮后点击取消取消预定提示框显示取消预定表10用户点赞测试表预期结果实际结果未登录无法点赞登录后点赞点赞成功提示框显示点赞成功点赞后再次点击取消点赞提示框显示取消点赞表11客服测试表测试内容预期结果实际结果显示帮助信息可以折叠或展开对应的帮助信息留言反馈测试，用户向管理员留言留言成功应留言管理员回复用户的留言回复成功提示框显示回复成功且用户前表12管理员登录注册测试表测试内容预期结果实际结果点击注册按钮，输入用户名admin,密码admin,注册码点击注册按钮，输入用户名admin1,密码admin1,注册码提示框提示注册码错误点击注册按钮，输入用户名admin1,密码admin1,注册码注册成功提示框提示注册成功点击登录按钮，输入用户名admin2,密码admin2登录失败提示框提示用户不存在点击登录按钮，输入用户名admin1,密码admin2登录失败提示框提示密码错误点击登录按钮，输入用户名333,密码333333登录失败提示框提示该账号不是管理员账号点击登录按钮，输入用户名admin1,密码admin1登录成功到景点管理界面表13管理员发布景点测试表测试内容预期结果实际结果输入景点名称、详情等文字信息输入成功输入成功点击上传图片按钮选择图片导入图片成功导入图片成功，且显示导入的图片点击一键上传按钮上传成功提示框提示上传成功，回到景点管理页面显示刚才上传的图文信息表14用户管理测试表测试内容预期结果实际结果未登录无法查看用户信息无法查看用户信息已登录可以查看用户信息列表显示用户信息表1