【西昌学院毕业论文模板】基于Vue框架的民宿管理系统的设计与实现
目 录
摘要
关键词
Abstract.
Key words
1 绪论
1.1 选题背景及意义
1.2 系统研究现状
1.3 系统研究目标
1.4 主要研究内容
1.5 论文组织结构
2 系统分析
2.1 可行性分析
2.1.1 经济上的可行性分析
2.1.2 技术上的可行性分析
2.1.3 运行上的可行性分析
2.2 功能需求分析
2.3 非功能需求分析
2.4 系统数据流分析
2.5 关键技术概述
2.5.1前后端分离开发模式
2.5.2 Vue
2.5.3 MySQL 数据库
2.5.4 Echarts 数据可视化图表库
2.5.5 Eelement前端UI框架
2.5.6 Vue Baidu Map
3 系统设计
3.1 系统总体设计
3.2 系统详细设计
3.3 系统流程设计
3.3.1 用户登录流程
3.3.2 房间管理流程
3.3.3 修改密码流程
3.3.4 修改头像流程
3.4 数据库设计
3.4.1 数据库概念模型设计
3.4.2 数据库结构设计
4 系统实现
4.1系统开发环境
4.2 超级管理员模块实现
4.2.1 登录模块实现
4.2.2 后台首页模块实现
4.2.3 民宿信息管理模块实现
4.2.4 订单管理模块实现
4.2.5 房间管理模块实现
4.2.6 账号管理模块实现
4.3 普通管理员模块实现
4.3.1 民宿信息管理模块
4.3.2 订单管理模块
4.3.3 修改密码模块
5 系统测试
5.1 测试环境
5.2 测试工具
5.3 功能测试
5.3.1 登录测试
5.3.2 订单管理测试
5.3.3 房间管理测试
5.3.4 民宿信息管理测试
5.3.5 账号管理测试
5.3.6 销售统计管理测试
5.4 性能测试
6 总结
6.1 总结
6.2 展望
参考文献
致谢
独撰声明
基于Vue框架的民宿管理系统的设计与实现
作者：XXX 指导教师：秦光
（2022届计算机科学与技术专业）
摘 要：随着社会的不断发展和生活质量的不断提高提高，越来越多的人不再满足于物质需求，而是更多地关注精神上的追求，商业贸易出现了新的增长，也进一步推动了酒店和民宿以及其他服务行业的发展。因此，酒店和民宿的数据管理正变得越来越有必要，而且市场上的大型酒店都有相应的管理系统，为民宿设计一个可接受的民宿管理系统非常重要。该民宿管理系统依赖于Vue，并使用MySQL数据库来存储数据。该系统由一个登录界面和一个后台主界面组成，有民宿信息管理、订单管理、房间管理、账户管理和销售统计等功能模块。
关键词：信息管理 民宿 Vue MySQL
Design and implementation of dormitory administrator system based on Vue framework
Author: XXXX Tutor: Qin Guang
(Major in computer science and technology，graduated in 2022)
Abstract：With the continuous development of society and the continuous improvement of life quality, more and more people are no longer satisfied with material needs, but pay more attention to spiritual pursuit. New growth has occurred in commercial trade, which has further promoted the development of hotels, B & B and other service industries. Therefore, the data management of hotels and B & B is becoming more and more necessary, and large hotels in the market have corresponding management systems. It is very important to design an acceptable B & B management system for B & B. The B & B management system relies on Vue and uses MySQL database to store data. The system consists of a login interface and a background main interface. It has home stay information management, order management, room management, account management, sales statistics and other functional modules.
Key words：Information Management Home stay Vue MySQL
1 绪论
1.1 选题背景及意义
随着社会的发展，信息的管理也越来越重要，人工管理数据容易丢失，存在安全隐患问题，而且人工管理的效率不高，极大的浪费人力资源，不利于信息管理，采用计算机来代替人工管理数据不仅可以提高效率，还能极大的降低人工成本。目前中大型酒店都有着一套属于自己专有的信息管理系统，但是这些管理系统的功能往往都很全面，而对于一些民宿来说，只需要一些简单易用的管理功能。这些大型酒店的管理系统过于庞大，不符合民宿管理信息的需求。
随着科学技术的不断提高，计算机在社会生活的各个领域得到了极为广泛的应用，尤其在信息管理方面，计算机已成为一种必不可少的管理工具。使用计算机技术对民宿信息进行管理具有比人工管理所无法比拟的优势。比如查看信息更方便，保存时间更长，安全性更高等，这些优势都能极大的方便民宿商家对信息进行管理。因此设计出一款符合民宿的管理系统十分必要。
1.2 系统研究现状
随着旅游市场的不断发展，国内传统酒店难以满足现阶段旅客的个性化多样化需求，民宿产业应运而生，更多的民宿都以创造独特的特色来来吸引外来游客[1]。这已然成为了当前国内旅游住宿的一大热点，是一种新型的住宿方式。以国内多数民宿来说，大多都依托于当地的自然风景以及旅游景区进行开发，以云南湖南等旅游城市为例，大多民宿特色都依托当地的自然风景区，让游客在住宿中也能体验靓丽风景[2]。
民宿相较于传统酒店来说有着很大的不同[3]，其主要特点包括民宿的建筑面积小且房间数量少，民宿的住宿氛围更接近家庭氛围，能让游客在旅游中的过程中提供更为温馨的居住氛围，民宿的另一大特点就是结合当地文化自然风景等，让游客能够深度体验当地文化[4]。
国内民宿的客群结构主要以年轻一族为主，年龄结构5-40岁占多数，学生，情侣，文艺青年，城市白领是资深旅游群体，在居住上相较于传统酒店来说也更加倾向于选择民宿。游客选择民宿的同时主要关注民宿的位置，价格，服务三大要点，一是要价格合理，要有符合家庭氛围的感觉，能给游客营造出一种安全放心的感觉。二是位置要离景区近，环境要优美[5]，能够深入体验到当地的文化。三是服务态度要良好，能够让游客有一种宾至如归的感觉。
1.3 系统研究目标
本系统的研究目标主要是实现一个能够帮住民宿商家通过计算机来管理顾客住房信息的管理系统。在社会信息科技发达的今天，民宿商家不再像以往通过人工管理数据，既费时费力还浪费资源，极不利于民宿本身的发展。通过计算机来管理信息应运而生。
1.4 主要研究内容
民宿管理系统的设计主要是利用高速发达的计算机技术来解决现阶段国内民宿存在着的人工管理数据困难的问题，可以让经营民宿的商家能够更为简单、方便、安全的管理数据，避免了人工管理数据带来的一些弊端，加快了顾客与民宿商家的信息流通，对于民宿的发展来说，也是一针强力的推动剂。
1.5 论文组织结构
该民宿管理系统的设计与实现分为六部分，具体内容如下：
第一部分介绍了本文的选题背景及意义、以及民宿的现状分析，还有该论文的主要内容和研究目标。
第二部分进行对该系统的需求分析，包括可行性分析、功能需求分析、功能需求分析，系统数据流分析、关键技术概述。
第三部分主要是对该系统进行的一些设计，包括系统整体设计、系统详细设计、数据库设计。
第四部分主要是进行系统的实现，包括系统开发环境、功能模块的实现。
第五部分主要是进行系统的测试，主要包括测试环境、测试工具、功能测试以及性能测试。
第六部分主要是对本次系统的开发进行总结。
2 系统分析
2.1 可行性分析
2.1.1 经济上的可行性分析
作为适用于民宿的管理系统，管理系统对服务器，客户端和网络的要求并不高，如今互联网行业发展的如此迅速，各类计算机产品也越来越成熟，价格也很亲民实惠。因此系统在经济上的可行性得到了支持。
2.1.2 技术上的可行性分析
系统是采用Vue技术等成熟技术，根据前后端分离的开发模式，代码的编写变得更为方便，代码逻辑结构也更为清晰，语法精简，代码的可读性高，系统的维护性也变得简单。因此系统在技术上也是没有问题的。
2.1.3 运行上的可行性分析
系统是面向民宿的信息管理系统，对硬件要求都不高，服务器数据库也不大，所以一般的电脑也就可以运行了。因此系统在运行上也是没有问题的。
2.2 功能需求分析
民宿管理系统主要包括登录和后台首页两个板块，用户经过登录页面的验证，对民宿信息进行管理。在登录时对用户权限进行判断，分为超级管理员与普通管理员。超级管理员具有以下功能模块：
登录模块：管理员输入账户和密码，通过身份验证实现登录功能。
后台模块：包括民宿信息管理模块、订单管理模块、房间管理模块、账号管理模块和销售统计模块。
民宿信息管理模块：管理员访问民宿信息，能对民宿信息进行修改。
订单管理模块：管理员查看订单列表，可对订单进行编辑，查看详细信息，以及模糊查询等操作。
房间管理模块：管理员查看房间列表信息，能对房间进行增加，修改，删除。能添加多种房间分类。
账号管理模块：管理员可查看当前系统所具有的账号列表信息，可为系统添加账号，实现系统的灵活登录，可对当前账号的密码进行修改以及查看当前登陆账号的个人信息。
销售统计模块：可查看民宿销量的报表。
而普通管理员只能对当前系统的信息进行查看，不具备操作功能。系统的超级管理员用例图与普通管理员用例图如图1、图2所示：
2.3 非功能需求分析
该管理系统除了满足民宿商家的需求之外，还应预设一些非功能需求，例如需要对系统的性能进行测试，测试的目的主要是对整个系统的性能进行优化，并且确保整个系统能够安全平稳的运行，系统的性能测试主要包括系统的响应时间，吞吐量，并发数等。这些数据的指标能直观的观察出该系统的性能是否优良。
2.4 系统数据流分析
数据流图是一种以图形的方式来表现数据从输入到输出的变化过程，用来实现某种逻辑。如图3所示：
2.5 关键技术概述
2.5.1前后端分离开发模式
前后端分离开发模式是一种非常流行的开发模式，可以让程序员在项目的开发过程中各司其职。在这种开发模式下，前端主要负责调用后端提供的接口来获取数据渲染页面[6]。而后端通常只需要负责数据部分，这样的开发模式可以实现前后端解耦，后端只需要为前端提供相应的数据接口，前端也只需要接收接口里的数据用来渲染页面，这样前后端就可以专注于自己擅长的领域里，极大的提高了项目的开发效率，减小了服务器压力。
2.5.2 Vue
Vue是一套渐进式的JavaScript框架。它的特点就是独有的数据驱动和组件化开发，数据驱动就是指我们只需要修改数据，Vue的底层自动帮助我们更新渲染DOM,我们无需操作DOM[7]。是一种双向数据绑定，表单的值和数据双向绑定，操作表单将变得非常简单。而且Vue 是一款轻量级的框架，体积小，压缩后只有二三十kb。同时Vue 生态丰富、相关的库和插件非常多，学习简单也容易上手，要做任何功能,都能找到现成的插件和库[8]。
2.5.3 MySQL 数据库
MySQL是最流行的数据库之一，是Web开发中最流行的数据库[9]。系统使用 MySQL数据库的原因就是因为它功能强大且使用方便，它能够快速有效的处理庞大的数据，相对于Oracle数据库来说，MySQL使用更为简单，方便上手。而且MySQL是一款开放源代码的数据库，可以供人自由使用。它相较于其他数据库也具有价格优势，因为它的很多功能都是可以免费使用的，即便有的需要付费，价格也是很便宜的[10]。
2.5.4 Echarts 数据可视化图表库
ECharts是一款基于JavaScript的数据可视化图表库，就是将数据通过图表的形式展示出来，可以让用户直观的看到数据。且Echarts图形种类众多，都有相应的模板可供使用，每个模板有着对应的API及文档说明。兼容性好，可支持多款浏览器，底层依赖矢量图形库 ZRender，可提供直观的数据可视化图表。
2.5.5 Eelement前端UI框架
Eelement UI是一款基于Vue2.0的组件库，由饿了么公司前端团队开源，提供了大量的PC端组件，能够让开发人员在开发中快速搭建项目界面，减少了大部分工作量，极大的提高了开发效率。
2.5.6 Vue Baidu Map
Vue Baidu Map是Vue的一款插件，基于百度地图进行封装，可在Vue项目中按需引入所需要的地图。
使用方法：首先通过包管理工具npm或yarn安装插件，二者安装语句有所不同，npm为npm install vue-baidu-map --save，yarn为yarn add vue-baidu-map --save。再通过全局注册引入组件，也可按需局部注册，然后就可以在项目中正常使用。
3 系统设计
3.1 系统总体设计
Vue 的设计借鉴了MVVM模式，但没有完全遵守 MVVM。Vue提供了ref可以直接操作 dom，违背了MVVM中model不能直接和view通信的原则。另外，Vue 的响应式系统采用了观察者模式，Vue的事件通讯采用了发布-订阅模式。
MVVM是Model-View-ViewModel的简写。唯一的区别是，它采用的使数据的双向绑定，数据自动反映在 ViewModel，反之亦然。Vue就是采用的这种模式，数据一旦发生变化, 就会自动更新View。
模型（Model）-数据
视图（View）- 用户界面
视图模型（ViewModel）- 连接View和Model，当数据发生改变，自动更新View。
如图4所示：
系统架构图是为了抽象的表示软件系统的整体系统框架、各个组件之间的相互关系，以及软件系统的演进方向的视图。本系统架构图如图5所示：
3.2 系统详细设计
该民宿管理系统依据权限的不同，划分的主要功能也不同，超级管理员功能主要包括:订单管理，房间管理，民宿信息管理，账号管理，销售统计等功能模块，普通管理员的功能主要包括对所登账号的信息及密码进行修改，以及查看民宿、房间等信息。其系统功能结构如图6所示：
3.3 系统流程设计
3.3.1 用户登录流程
系统在登录时会对账号进行判断，首先判断账号及密码格式是否正确，正确后再通过对比数据库内账号进行验证，验证通过后登录成功。系统登录流程图如图7所示：
3.3.2 房间管理流程
房间管理主要用于对房间的添加与删除，添加的房间信息主要包括房间名称，房间图片，房间价格，房间分类，房间描述等，点击确认添加后，房间就会添加成功。选中对应的房间点击删除就可直接删除。
房间管理流程图如图8，图9所示：
3.3.3 修改密码流程
该功能模块主要用于修改当前所登录账号信息的密码。修改密码之前需要先输入当前密码，即原密码。输入验证通过后才允许进行修改，在输入新密码的同时也需要对密码通过正则表达对格式进行判断，且不允许与原密码一致。判断通过后允许输入新密码，之后需进一步确认新密码，确认之前需要判断要与输入的新密码一致。操作流程图如图10所示：
3.3.4 修改头像流程
该模块主要用于查看当前登录的账号信息，可对当前账号头像进行修改。操作流程图如图11所示：
3.4 数据库设计
3.4.1 数据库概念模型设计
E-R图简单来说，就是实体与属性的对应关系，一般用矩形表示实体，椭圆表示属性二者通过实线连接。实体之间存在着对应关系，有一对一，一对多，多对多等多种对用关系。关系用菱形表示，而关系的类型在菱形的两条与实体的连接线上标注。
用户实体图如图12所示：
房间实体图如图13所示：
房间类型实体图如图14所示：
系统E-R图如图15所示：
3.4.2 数据库结构设计
数据库主要根据涉及的数据存储来设计，主要的表有：users表、shop表、goods表、goods_cate表、orders表等。
3.4.2.1 users---账号模块信息表
账号信息表users主要是储存个人信息，其中的U-Id字段作为用户表的主键。表中字段主要有用户ID，账号创建时间，账号，密码，用户组，头像地址。如表1所示：
表1 users账号模块信息表
3.4.2.2 shop---民宿信息管理信息表
民宿信息表shop主要用于储存民宿信息，其中的S-Id字段作为用户表的主键。其中字段主要有民宿编号，民宿名称，民宿公告，民宿头像，民宿评分，销量，活动，民宿图片，营业时间，描述等。如表2所示：
表2 民宿模块信息表
3.4.2.3 goods---房间模块信息表
房间信息表goods主要用于储存房间信息，其中的G-Id字段作为房间信息表的主键。其中字段主要有房间编号，房间创建时间，房间名称，房间分类，房间价格，房间描述，房间图片，房间评价，房间销量等。如表3所示：
表3 房间模块信息表
3.4.2.4 goods_cate---房间分类模块信息表
房间分类信息表goods_cate主要用于储存房间分类信息，其中的C-Id字段作为房间分类模块表的主键。其中字段主要有房间分类编号，房间名称，是否启用等。如表4所示：
3.4.2.5 orders---订单模块信息表
订单信息表orders主要用于储存订单信息，其中的O-Id字段作为订单模块信息表的主键。其中字段主要有订单编号，订单号，订房时间，退房时间，联系电话，顾客姓名，订单金额，订单状态等。如表5所示：
4 系统实现
4.1系统开发环境
系统主要运行环境需求如下：
操作系统：Windows10
调试环境工具：phpstudy
浏览器：Google Chrome
数据库：MySQL
前端：HTML5、CSS3、JavaScript、Vue、Axios、Webpack、Element UI
开发工具：Visual Studio Code
4.2 超级管理员模块实现
4.2.1 登录模块实现
l 操作流程
管理员打开系统网页，进入登录页面，后台会对输入的管理员账户和密码进行判断，若判断正确，则跳转至后台首页。
l 关键代码
handleLogin() {
// 对整个表单进行校验
this.$refs.loginForm.validate(async (validate) => {
if (validate) {
// 发送ajax给后端 发送登录请求
let res = await checkLogin(this.loginForm);
// 把后端取到的数据 解构出来
let { code, msg, role, token } = res.data;
if (code === 0) {
// 判断状态码，当判断码为0时，把令牌存入本地
localStorage.token = token;
localStorage.role = role; // 存本地
// 生成动态路由
createDynamicRoutes();
this.$router.push("/home");
}
} else {
return;
}
});
},
l 界面截图如图16所示：
4.2.2 后台首页模块实现
后台首页模块将整个管理系统的模块及相应功能一一呈现出来，能让管理员一眼就能够了解到该管理系统所具有的功能。左侧为各个模块的导航菜单，右侧为每个模块所对应内容。
l 界面截图如图17所示：
4.2.3 民宿信息管理模块实现
民宿信息管理模块主要呈现了该民宿的主要信息，包括所在地址，民宿公告，民宿描述，民宿评分，民宿活动等。超级管理员可对民宿信息进行编辑更改。
l 关键代码
// 民宿头像上传成功
handleAvatarSuccess(res) {
if (res.code === 0) {
// 弹出提示框
this.$message.success(res.msg);
// 对头像图片进行回填，
this.shopForm.avatar = res.imgUrl;
}
},
l 页面截图如图18所示：
4.2.4 订单管理模块实现
该模块可以让管理员直观的观察到所有订单的详细信息，并能够对所有订单信息按照订单号，顾客姓名，房间状态等进行查询，并将查询后的订单信息显示在表格内。也可以对某一行的订单进行编辑以及查看该订单的详细信息。
l 关键代码
async getData() {
// 处理null日期是null的问题
if (this.searchForm.date === null) {
// 清空日期数组
this.searchForm.date = [];
}
// 获取数据
let res = await getOrderList({
// 分页参数
currentPage: this.currentPage, //当前页码
pageSize: this.pageSize, //每页条数
// 查询参数
orderNo: this.searchForm.orderNo, // 订单编号
consignee: this.searchForm.consignee, // 收货人
phone: this.searchForm.phone, // 手机号
orderState: this.searchForm.orderState, // 订单状态
date: JSON.stringify(this.searchForm.date), // 在赋值渲染之前处理时间
});
// 赋值渲染
this.tableData = res.data.data;
this.total = res.data.total;
},
l 页面截图如图19所示：
4.2.4.1 订单列表详细信息模块实现
此模块就可对当前订单的详细信息进行查看。
l 页面截图如图20所示：
4.2.4.2 订单编辑模块实现
该功能可对当前订单进行编辑，比如可修改当前订单的订单号，订单状态，订房时间等相关信息。
l 操作流程
在编辑之前，需选择需要编辑的订单，输入编辑的信息之后即可保存。
l 关键代码
// 显示详情
handleShowDetail(row) {
this.modelVisible = true; // 显示模态框
this.orderData = row;
},
// 编辑
handleEdit(row) {
// 路由跳转携带参数
this.$router.push({
path: "/order/order-edit",
query: {
id: row.id,
},
});
l 页面截图如图21所示：
4.2.5 房间管理模块实现
该模块主要分为房间列表，房间添加，房间分类三个模块，每个模块对应不同的功能。房间列表主要是将后台数据库内的所有房间信息通过表格显示出来，能让用户一眼得到所有房间信息，例如房间价格，房间分类，房间价格等等。房间添加模块主要能够添加新的房间，并实时显示到房间列表中。房间分类模块主要是对所有房间的类别进行归属。
4.2.5.1 房间列表信息模块实现
该模块主要用于展示房间的详细信息，能对房间按照名称或者房间分类进行搜索查询，并将搜索出来的房间展示在表格内，每一行都能通过房间所属id对该列房间进行删除以及编辑操作。
l 关键代码
实现列表信息代码如下：
// 获取数据
async getData() {
// 发送Ajax 获取房间列表数据
let res = await getGoodsList({
currentPage: 1, //当前页码
pageSize: 5, //每页条数
});
// 渲染
this.tableData = res.data.data;
},
实现删除功能代码如下：
// 删除房间
async handleDelete(row) {
let { id } = row;
//发送Ajax进行删除
let res = await delGoods({ id });
this.getgoodslist();
},
l 页面截图如图22所示：
4.2.5.2 房间添加模块实现
该模块主要实现对房间的添加，例如房间的名称，价格，分类，以及房间图片等。
l 操作流程
添加房间信息之前首先要确认房间信息是否添加正确，确认添加信息无误后即可成功添加房间.
l 关键代码
// 添加房间
async handleAddGoods() {
// 发送Ajax从后端获取数据
let res = await addGoods(this.addGoodsForm);
//判断状态码，状态码为0，表示请求成功
if (res.data.code === 0) {
this.$router.push("/goods/goods-list");
}},
l 页面截图如图23所示：
4.2.5.3 房间分类模块实现
该模块主要用于管理房间的所属分类，并能进行编辑以及删除功能。
l 关键代码
编辑功能可以对当前行的分类决定是否启用，若启用，则数据库内的房间分类栏该分类展示，若不启用，该房间分类隐藏。
编辑功能主要实现代码如下：
async getcate() {
// 发送Ajax请求从后端获取数据
let res = await getCateList({
currentPage: this.currentPage, //当前页码
pageSize: 10,// 每页条数
});
// 添加一个是否可以编辑的字段
res.data.data.forEach((v) => {
v.canEdit = false;
});
this.tableData = res.data.data;
this.total = res.data.total;
}
删除功能主要如下:
// 删除
async handleDelete(row) {
// 发送Ajax请求，获取id，根据房间id进行删除
let res = await delGoodsCate({ id: row.id });
this.getcate();
},
l 页面截图如图24所示：
4.2.6 账号管理模块实现
该模块主要分为账号列表，修改密码，个人中心四个板块。账号列表用于显示此管理系统的所有账号信息，可以对当前账号的用户组以及用户名进行更改以及删除操作。修改密码主要是用于修改当前系统所登录的密码，修改成功后清除存储并退出系统跳到登录页面。个人中心主要用于展示当前登陆账号的信息，并可以更改当前用户头像。
4.2.6.1 账号列表模块实现
该模块主要用于添加新的账号，可对所有账号进行编辑删除，也可以全选进行批量删除。
l 关键代码
主要实现代码如下：
// 获取数据 渲染列表
async getData() {
// 发送Ajax给后端
let res = await getAccountList({
currentPage: this.currentPage, // 当前页码
pageSize: this.pageSize // 每页条数
})
// 渲染
let total = res.data.total // 后端返回的总条数
let tableData = res.data.data // 后端返回的列表数据
}
删除功能主要实现代码如下：
async handleDelete(row) {
let res = await delAccount({ id: row.id });//获取该行id值
if (res.data.code === 0) {
this.getData();
} },
l 页面截图如图25所示：
4.2.6.2 修改密码模块实现
该功能模块主要用于修改当前所登录账号信息的密码。
l 操作流程
修改密码之前需要先输入当前密码，即原密码。输入验证通过后才允许进行修改，在输入新密码的同时也需要对密码通过正则表达对格式进行判断，且不允许与原密码一致。判断通过后允许输入新密码，之后需进一步确认新密码，确认之前需要判断要与输入的新密码一致。
l 关键代码
修改密码实现的主要代码下:
// 验证旧密码
const checkOldPwd = async (rule, value, callback) => {
//判断输入框是否有值
if (!value) {
callback(new Error("请输入原密码"));
} else {
// 发送Ajax对密码进行验证
let res = await checkOldPassword({ oldPwd: value });
if (res.data.code !== 200) {
callback(new Error(res.data.msg));
} else {
// 调用回调函数
callback();
}}
};
// 验证新密码
const checkNewPwd = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入新密码"));
// 通过正则表达验证密码格式是否正确
} else if (!/^[a-zA-Z0-9]{6,12}$/.test(value)) {
callback(new Error("6到12位, 大小写字母和数字"));
} else if (value === this.passwordForm.oldPwd) {
callback(new Error("新密码不能和旧密码相同"));
} else {
// 如果确认新密码不为空有值, 再次触发一致性验证
if (this.passwordForm.newPwdAgain) {
this.$refs.passwordForm.validateField("newPwdAgain"); // 触发某个指定的字段的验证
}
};
// 确认新密码
const checkPwdAgain = (rule, value, callback) => {
if (!value) {
callback(new Error("请再次输入新密码"));
} else if (value !== this.passwordForm.newPwd) {
callback(new Error("两次密码不一致"));
} else {
callback();
}
};
页面截图如图26所示：
4.2.6.3 个人中心模块实现
该模块主要用于查看当前登录的账号信息，可对头像进行修改。
l 操作流程
用户在上传头像时，系统会首先选择图片路径，然后对上传头像的图片的格式以及大小进行限制，条件满足则上传成功。
l 关键代码
修改头像代码如下:
// 上传头像成功
async handleAvatarSuccess(res) {
// 判断状态码是否为0
if (res.code === 0) {
// 图片回填
this.imageUrl = res.imgUrl;
// 再发送Ajax 修改数据库的图片url地址
let result = await editAvatar({ imgUrl: res.imgUrl });
if (result.data.code === 0) {
// 通知头部更新
this.$bus.$emit("update-avatar");
}}
l 页面截图如图27所示：
4.2.7 销售统计模块实现
该模块主要是将房间与订单通过Echarts可视化图表展示出来，可直接生成报表，供管理员直接查看。
l 页面截图如图28所示：
4.3 普通管理员模块实现
系统在登陆时会对所登陆的账号进行判断，并依据用户组的不同分配不同的权限。普通管理员相较于超级管理员来说，所拥有的权限更低，不具备超级管理员的操作功能，对于一些模块界面，只是拥有查看的功能。
4.3.1 民宿信息管理模块
民宿信息管理模块主要呈现了该民宿的主要信息，包括所在地址，民宿公告，民宿描述，民宿评分，民宿活动等。页面图如图29所示：
4.3.2 订单管理模块
该模块普通管理员可对订单信息进行查看，能够对所有订单信息按照订单号，顾客姓名，房间状态等进行查询，并将查询后的订单信息显示在表格内。如图30所示：
4.3.3 修改密码模块
该功能模块主要用于修改当前所登录账号信息的密码，在修改密码之前需要先输入当前密码，即原密码。输入验证通过后才允许进行修改，在输入新密码的同时也需要对密码通过正则表达对格式进行判断，且不允许与原密码一致。判断通过后允许输入新密码，之后需进一步确认新密码，确认之前需要判断要与输入的新密码一致，页面效果图如图31所示:
5 系统测试
5.1 测试环境
操作系统：Windows10
测试工具：Loadrunner、Visual Studio Code
调试环境工具：phpStudy
5.2 测试工具
在测试的过程中，单元测试是对系统中的单位元素完成测试，在系统中则是在模块之间完成测试，它不仅仅是软件测试的基本构成，也是相对重要的构成部分[11]；集成测试检验每个模块的接口的结果是否正确，分析各模块间是否较大耦合；系统测试是对已实现的系统进行彻底的测试，检验系统的功能是否实现，软件和硬件的性能是否能够满足需求，输入和输出是否正确[12]。
5.3 功能测试
测试内容包括登录模块测试、订单管理模块测试、房间管理模块测试、民宿信息管理模块测试、账号管理模块测试、销售统计模块测试。测试内容如下：
登录模块主要测试登录时的验证跳转。
订单管理模块主要测试订单信息的编辑，删除以及查询功能。
房间管理模块主要测试房间的添加，删除以及编辑，房间分类的编辑及删除。
民宿信息管理模块主要测试民宿信息的修改，例如头像是否成功上传。
账号管理模块主要测试账号列表的编辑删除，账号的添加，修改用户密码以及个人中心上传头像
销售统计模块主要测试是否正常生成数据报表。
系统主要测试如下：
5.3.1 登录测试
该表是用来测试登录功能是否正常使用，测试用例主要包括账号密码输入是否正确、是否输入账号密码等情况。
表6 登录测试用例表
5.3.2 订单管理测试
该表是用来测试订单编辑以及删除功能是否正常使用，测试用例主要包括按订单id查询订单信息、编辑订单以及查看订单详情。
5.3.3 房间管理测试
该表是用来测试房间添加、编辑以及删除功能是否能够正常使用，测试用例主要包括添加房间、编辑房间信息、删除房间以及添加房间分类。
5.3.4 民宿信息管理测试
该表是用来测试民宿信息头像是否能够成功上传，测试用例主要包括上传头像。
5.3.5 账号管理测试
该表是用来测试账号的删除、编辑、添加以及修用户改密码、个人头像上传功能是否能够正常使用，测试用例主要包括删除账号、编辑账号、添加账号、修改密码以及上传个人头像。
5.3.6 销售统计管理测试
该表是用来测试数据报表是否能够正常生成。
5.4 性能测试
一个完整的系统不仅需要满足相应功能，还需要具备优良的性能，在系统完成后，需对整个系统进行性能测试，测试的目的主要对整个系统的性能进行优化，并且确保整个系统能够安全平稳的运行，系统的性能测试主要包括系统的响应时间，吞吐量，并发数等。这些数据的指标能直观的观察出该系统的性能是否优良。
测试结果如32图所示：
测试总结：
本系统使用LoadRunner性能测试软件进行测试，本系统运行良好，基本实现系统预定目标。
6 总结
6.1 总结
通过此次毕业的项目设计，进一步学习了Vue的相关知识，能够运用Vue脚手架快速搭建项目，能够熟练的使用Element-UI框架来实现页面布局的快速搭建，能熟练掌握通过使用Echarts生成图表。从搜寻相关参考资料开始，到动手编写程序，至调试测试程序，最终完成了这次毕业设计。
6.2 展望
此次系统设计中，仍然还存在着大量的不足，本该设计到的多方面的功能还不够完善，还有着许多的问题亟待解决，在今后的过程中将根据实际情况积累更多的经验，对其进行补充与完善。
参 考 文 献
[1] 蒋佳倩，李艳.国内外旅游“民宿”研究综述《旅游研究》.2015
[2] 何良安.湖南民宿产业的高质量发展：现状、问题与对策[J]. 湖南行政学院学报，2021,（03）：102-112
[3] 朱露.现代民宿酒店现状及发展对策[J].商场现代化，2021,(08)：173-175
[4] 朱蔚琦.特色地域文化旅游民宿室内设计[J].建筑结构，2021,51（06）：143
[5] 冯雨希.浅析民宿在乡村旅游中的地位和作用--以广西金秀为例[J]. 内江科技，2021,42(02)：50-51
[6] 郑娅峰.HTML,CSS,JavaScript 实例教程［M].北京：清华大学出版社2018
[7] 陈岩.轻量级响应式框架Vue.js应用分析[J].中国管理信息化,2018,21(03):181-183
[8] 朱二华.基于Vue.js的Web前端应用研究[J].科技与创新，2017(20):119-121
[9] 郑智方,李彬,刘世坤,李鹏.探究 mysql的运用实例-对数据库的宏观把握[J] .科技风, 2020(06):129
[10] 杨雨成,任利峰.MySQL数据库性能优化技术研究[J].科技经济导刊,2020,28(03): 32
[11] 许静，陈宏刚，王庆人，软件测试方法简述与展望[J]，计算机工程与应用(13):78-81
[12] 张新华，何永前，软件测试方法概述[J]．科技视界，2012(4):125-125
致 谢
论文写到致谢部分，论文也已经接近尾声。首先要感谢指导老师秦光老师，从论文的开题、查找相关资料，到论文修改、定稿，在整个过程中都给予了我很大的帮助，总是能在我迷茫时为我指点迷津，对我进行无私的指导和帮助，不厌其烦的对我的论文进行修改与补充，正是在秦老师的悉心指导下，我才能顺利完成毕业论文，在此再次向秦老师表示衷心的感谢！
