目 ?錄

摘要

關(guān)鍵詞

Abstract.

Key words

1 緒論

1.1 選題背景及意義

1.2 系統(tǒng)研究現(xiàn)狀

1.3 系統(tǒng)研究目標(biāo)

1.4 主要研究?jī)?nèi)容

1.5 論文組織結(jié)構(gòu)

2 系統(tǒng)分析

2.1 可行性分析

2.1.1 經(jīng)濟(jì)上的可行性分析

2.1.2 技術(shù)上的可行性分析

2.1.3?運(yùn)行上的可行性分析

2.2 功能需求分析

2.3 非功能需求分析

2.4 系統(tǒng)數(shù)據(jù)流分析

2.5 關(guān)鍵技術(shù)概述

2.5.1前后端分離開發(fā)模式

2.5.2?Vue

2.5.3 MySQL 數(shù)據(jù)庫(kù)

2.5.4 Echarts 數(shù)據(jù)可視化圖表庫(kù)

2.5.5 Eelement前端UI框架

2.5.6 Vue Baidu Map

3 系統(tǒng)設(shè)計(jì)

3.1 系統(tǒng)總體設(shè)計(jì)

3.2 系統(tǒng)詳細(xì)設(shè)計(jì)

3.3 系統(tǒng)流程設(shè)計(jì)

3.3.1 用戶登錄流程

3.3.2 房間管理流程

3.3.3 修改密碼流程

3.3.4 修改頭像流程

3.4 數(shù)據(jù)庫(kù)設(shè)計(jì)

3.4.1 數(shù)據(jù)庫(kù)概念模型設(shè)計(jì)

3.4.2?數(shù)據(jù)庫(kù)結(jié)構(gòu)設(shè)計(jì)

4 系統(tǒng)實(shí)現(xiàn)

4.1系統(tǒng)開發(fā)環(huán)境

4.2 超級(jí)管理員模塊實(shí)現(xiàn)

4.2.1 登錄模塊實(shí)現(xiàn)

4.2.2 后臺(tái)首頁(yè)模塊實(shí)現(xiàn)

4.2.3 民宿信息管理模塊實(shí)現(xiàn)

4.2.4 訂單管理模塊實(shí)現(xiàn)

4.2.5 房間管理模塊實(shí)現(xiàn)

4.2.6 賬號(hào)管理模塊實(shí)現(xiàn)

4.3 普通管理員模塊實(shí)現(xiàn)

4.3.1 民宿信息管理模塊

4.3.2 訂單管理模塊

4.3.3 修改密碼模塊

5 系統(tǒng)測(cè)試

5.1 測(cè)試環(huán)境

5.2 測(cè)試工具

5.3 功能測(cè)試

5.3.1 登錄測(cè)試

5.3.2 訂單管理測(cè)試

5.3.3 房間管理測(cè)試

5.3.4 民宿信息管理測(cè)試

5.3.5 賬號(hào)管理測(cè)試

5.3.6 銷售統(tǒng)計(jì)管理測(cè)試

5.4 性能測(cè)試

6 總結(jié)

6.1 總結(jié)

6.2 展望

參考文獻(xiàn)

致謝

獨(dú)撰聲明

基于Vue框架的民宿管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

作者：XXX??指導(dǎo)教師：秦光

（2022屆計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)）

摘 ?要：隨著社會(huì)的不斷發(fā)展和生活質(zhì)量的不斷提高提高，越來越多的人不再滿足于物質(zhì)需求，而是更多地關(guān)注精神上的追求，商業(yè)貿(mào)易出現(xiàn)了新的增長(zhǎng)，也進(jìn)一步推動(dòng)了酒店和民宿以及其他服務(wù)行業(yè)的發(fā)展。因此，酒店和民宿的數(shù)據(jù)管理正變得越來越有必要，而且市場(chǎng)上的大型酒店都有相應(yīng)的管理系統(tǒng)，為民宿設(shè)計(jì)一個(gè)可接受的民宿管理系統(tǒng)非常重要。該民宿管理系統(tǒng)依賴于Vue，并使用MySQL數(shù)據(jù)庫(kù)來存儲(chǔ)數(shù)據(jù)。該系統(tǒng)由一個(gè)登錄界面和一個(gè)后臺(tái)主界面組成，有民宿信息管理、訂單管理、房間管理、賬戶管理和銷售統(tǒng)計(jì)等功能模塊。

關(guān)鍵詞：信息管理 民宿?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 選題背景及意義

隨著社會(huì)的發(fā)展，信息的管理也越來越重要，人工管理數(shù)據(jù)容易丟失，存在安全隱患問題，而且人工管理的效率不高，極大的浪費(fèi)人力資源，不利于信息管理，采用計(jì)算機(jī)來代替人工管理數(shù)據(jù)不僅可以提高效率，還能極大的降低人工成本。目前中大型酒店都有著一套屬于自己專有的信息管理系統(tǒng)，但是這些管理系統(tǒng)的功能往往都很全面，而對(duì)于一些民宿來說，只需要一些簡(jiǎn)單易用的管理功能。這些大型酒店的管理系統(tǒng)過于龐大，不符合民宿管理信息的需求。

隨著科學(xué)技術(shù)的不斷提高，計(jì)算機(jī)在社會(huì)生活的各個(gè)領(lǐng)域得到了極為廣泛的應(yīng)用，尤其在信息管理方面，計(jì)算機(jī)已成為一種必不可少的管理工具。使用計(jì)算機(jī)技術(shù)對(duì)民宿信息進(jìn)行管理具有比人工管理所無法比擬的優(yōu)勢(shì)。比如查看信息更方便，保存時(shí)間更長(zhǎng)，安全性更高等，這些優(yōu)勢(shì)都能極大的方便民宿商家對(duì)信息進(jìn)行管理。因此設(shè)計(jì)出一款符合民宿的管理系統(tǒng)十分必要。

1.2 系統(tǒng)研究現(xiàn)狀

隨著旅游市場(chǎng)的不斷發(fā)展，國(guó)內(nèi)傳統(tǒng)酒店難以滿足現(xiàn)階段旅客的個(gè)性化多樣化需求，民宿產(chǎn)業(yè)應(yīng)運(yùn)而生，更多的民宿都以創(chuàng)造獨(dú)特的特色來來吸引外來游客[1]。這已然成為了當(dāng)前國(guó)內(nèi)旅游住宿的一大熱點(diǎn)，是一種新型的住宿方式。以國(guó)內(nèi)多數(shù)民宿來說，大多都依托于當(dāng)?shù)氐淖匀伙L(fēng)景以及旅游景區(qū)進(jìn)行開發(fā)，以云南湖南等旅游城市為例，大多民宿特色都依托當(dāng)?shù)氐淖匀伙L(fēng)景區(qū)，讓游客在住宿中也能體驗(yàn)靚麗風(fēng)景[2]。

民宿相較于傳統(tǒng)酒店來說有著很大的不同[3]，其主要特點(diǎn)包括民宿的建筑面積小且房間數(shù)量少，民宿的住宿氛圍更接近家庭氛圍，能讓游客在旅游中的過程中提供更為溫馨的居住氛圍，民宿的另一大特點(diǎn)就是結(jié)合當(dāng)?shù)匚幕匀伙L(fēng)景等，讓游客能夠深度體驗(yàn)當(dāng)?shù)匚幕?/span>[4]。

國(guó)內(nèi)民宿的客群結(jié)構(gòu)主要以年輕一族為主，年齡結(jié)構(gòu)5-40歲占多數(shù)，學(xué)生，情侶，文藝青年，城市白領(lǐng)是資深旅游群體，在居住上相較于傳統(tǒng)酒店來說也更加傾向于選擇民宿。游客選擇民宿的同時(shí)主要關(guān)注民宿的位置，價(jià)格，服務(wù)三大要點(diǎn)，一是要價(jià)格合理，要有符合家庭氛圍的感覺，能給游客營(yíng)造出一種安全放心的感覺。二是位置要離景區(qū)近，環(huán)境要優(yōu)美[5]，能夠深入體驗(yàn)到當(dāng)?shù)氐奈幕?。三是服?wù)態(tài)度要良好，能夠讓游客有一種賓至如歸的感覺。

1.3 系統(tǒng)研究目標(biāo)

本系統(tǒng)的研究目標(biāo)主要是實(shí)現(xiàn)一個(gè)能夠幫住民宿商家通過計(jì)算機(jī)來管理顧客住房信息的管理系統(tǒng)。在社會(huì)信息科技發(fā)達(dá)的今天，民宿商家不再像以往通過人工管理數(shù)據(jù)，既費(fèi)時(shí)費(fèi)力還浪費(fèi)資源，極不利于民宿本身的發(fā)展。通過計(jì)算機(jī)來管理信息應(yīng)運(yùn)而生。

1.4 主要研究?jī)?nèi)容

民宿管理系統(tǒng)的設(shè)計(jì)主要是利用高速發(fā)達(dá)的計(jì)算機(jī)技術(shù)來解決現(xiàn)階段國(guó)內(nèi)民宿存在著的人工管理數(shù)據(jù)困難的問題，可以讓經(jīng)營(yíng)民宿的商家能夠更為簡(jiǎn)單、方便、安全的管理數(shù)據(jù)，避免了人工管理數(shù)據(jù)帶來的一些弊端，加快了顧客與民宿商家的信息流通，對(duì)于民宿的發(fā)展來說，也是一針強(qiáng)力的推動(dòng)劑。

1.5 論文組織結(jié)構(gòu)

該民宿管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)分為六部分，具體內(nèi)容如下：

第一部分介紹了本文的選題背景及意義、以及民宿的現(xiàn)狀分析，還有該論文的主要內(nèi)容和研究目標(biāo)。

第二部分進(jìn)行對(duì)該系統(tǒng)的需求分析，包括可行性分析、功能需求分析、功能需求分析，系統(tǒng)數(shù)據(jù)流分析、關(guān)鍵技術(shù)概述。

第三部分主要是對(duì)該系統(tǒng)進(jìn)行的一些設(shè)計(jì)，包括系統(tǒng)整體設(shè)計(jì)、系統(tǒng)詳細(xì)設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)。

第四部分主要是進(jìn)行系統(tǒng)的實(shí)現(xiàn)，包括系統(tǒng)開發(fā)環(huán)境、功能模塊的實(shí)現(xiàn)。

第五部分主要是進(jìn)行系統(tǒng)的測(cè)試，主要包括測(cè)試環(huán)境、測(cè)試工具、功能測(cè)試以及性能測(cè)試。

第六部分主要是對(duì)本次系統(tǒng)的開發(fā)進(jìn)行總結(jié)。

2 系統(tǒng)分析

2.1 可行性分析

2.1.1 經(jīng)濟(jì)上的可行性分析

作為適用于民宿的管理系統(tǒng)，管理系統(tǒng)對(duì)服務(wù)器，客戶端和網(wǎng)絡(luò)的要求并不高，如今互聯(lián)網(wǎng)行業(yè)發(fā)展的如此迅速，各類計(jì)算機(jī)產(chǎn)品也越來越成熟，價(jià)格也很親民實(shí)惠。因此系統(tǒng)在經(jīng)濟(jì)上的可行性得到了支持。

2.1.2 技術(shù)上的可行性分析

系統(tǒng)是采用Vue技術(shù)等成熟技術(shù)，根據(jù)前后端分離的開發(fā)模式，代碼的編寫變得更為方便，代碼邏輯結(jié)構(gòu)也更為清晰，語(yǔ)法精簡(jiǎn)，代碼的可讀性高，系統(tǒng)的維護(hù)性也變得簡(jiǎn)單。因此系統(tǒng)在技術(shù)上也是沒有問題的。

2.1.3?運(yùn)行上的可行性分析

系統(tǒng)是面向民宿的信息管理系統(tǒng)，對(duì)硬件要求都不高，服務(wù)器數(shù)據(jù)庫(kù)也不大，所以一般的電腦也就可以運(yùn)行了。因此系統(tǒng)在運(yùn)行上也是沒有問題的。

2.2 功能需求分析

民宿管理系統(tǒng)主要包括登錄和后臺(tái)首頁(yè)兩個(gè)板塊，用戶經(jīng)過登錄頁(yè)面的驗(yàn)證，對(duì)民宿信息進(jìn)行管理。在登錄時(shí)對(duì)用戶權(quán)限進(jìn)行判斷，分為超級(jí)管理員與普通管理員。超級(jí)管理員具有以下功能模塊：

登錄模塊：管理員輸入賬戶和密碼，通過身份驗(yàn)證實(shí)現(xiàn)登錄功能。

后臺(tái)模塊：包括民宿信息管理模塊、訂單管理模塊、房間管理模塊、賬號(hào)管理模塊和銷售統(tǒng)計(jì)模塊。

民宿信息管理模塊：管理員訪問民宿信息，能對(duì)民宿信息進(jìn)行修改。

訂單管理模塊：管理員查看訂單列表，可對(duì)訂單進(jìn)行編輯，查看詳細(xì)信息，以及模糊查詢等操作。

房間管理模塊：管理員查看房間列表信息，能對(duì)房間進(jìn)行增加，修改，刪除。能添加多種房間分類。

賬號(hào)管理模塊：管理員可查看當(dāng)前系統(tǒng)所具有的賬號(hào)列表信息，可為系統(tǒng)添加賬號(hào)，實(shí)現(xiàn)系統(tǒng)的靈活登錄，可對(duì)當(dāng)前賬號(hào)的密碼進(jìn)行修改以及查看當(dāng)前登陸賬號(hào)的個(gè)人信息。

銷售統(tǒng)計(jì)模塊：可查看民宿銷量的報(bào)表。

而普通管理員只能對(duì)當(dāng)前系統(tǒng)的信息進(jìn)行查看，不具備操作功能。系統(tǒng)的超級(jí)管理員用例圖與普通管理員用例圖如圖1、圖2所示：

2.3 非功能需求分析

該管理系統(tǒng)除了滿足民宿商家的需求之外，還應(yīng)預(yù)設(shè)一些非功能需求，例如需要對(duì)系統(tǒng)的性能進(jìn)行測(cè)試，測(cè)試的目的主要是對(duì)整個(gè)系統(tǒng)的性能進(jìn)行優(yōu)化，并且確保整個(gè)系統(tǒng)能夠安全平穩(wěn)的運(yùn)行，系統(tǒng)的性能測(cè)試主要包括系統(tǒng)的響應(yīng)時(shí)間，吞吐量，并發(fā)數(shù)等。這些數(shù)據(jù)的指標(biāo)能直觀的觀察出該系統(tǒng)的性能是否優(yōu)良。

2.4 系統(tǒng)數(shù)據(jù)流分析

數(shù)據(jù)流圖是一種以圖形的方式來表現(xiàn)數(shù)據(jù)從輸入到輸出的變化過程，用來實(shí)現(xiàn)某種邏輯。如圖3所示：

2.5 關(guān)鍵技術(shù)概述

2.5.1前后端分離開發(fā)模式

前后端分離開發(fā)模式是一種非常流行的開發(fā)模式，可以讓程序員在項(xiàng)目的開發(fā)過程中各司其職。在這種開發(fā)模式下，前端主要負(fù)責(zé)調(diào)用后端提供的接口來獲取數(shù)據(jù)渲染頁(yè)面[6]。而后端通常只需要負(fù)責(zé)數(shù)據(jù)部分，這樣的開發(fā)模式可以實(shí)現(xiàn)前后端解耦，后端只需要為前端提供相應(yīng)的數(shù)據(jù)接口，前端也只需要接收接口里的數(shù)據(jù)用來渲染頁(yè)面，這樣前后端就可以專注于自己擅長(zhǎng)的領(lǐng)域里，極大的提高了項(xiàng)目的開發(fā)效率，減小了服務(wù)器壓力。

2.5.2?Vue

?Vue是一套漸進(jìn)式的JavaScript框架。它的特點(diǎn)就是獨(dú)有的數(shù)據(jù)驅(qū)動(dòng)和組件化開發(fā)，數(shù)據(jù)驅(qū)動(dòng)就是指我們只需要修改數(shù)據(jù)，Vue的底層自動(dòng)幫助我們更新渲染DOM,我們無需操作DOM[7]。是一種雙向數(shù)據(jù)綁定，表單的值和數(shù)據(jù)雙向綁定，操作表單將變得非常簡(jiǎn)單。而且Vue 是一款輕量級(jí)的框架，體積小，壓縮后只有二三十kb。同時(shí)Vue 生態(tài)豐富、相關(guān)的庫(kù)和插件非常多，學(xué)習(xí)簡(jiǎn)單也容易上手，要做任何功能,都能找到現(xiàn)成的插件和庫(kù)[8]。

2.5.3 MySQL?數(shù)據(jù)庫(kù)

MySQL是最流行的數(shù)據(jù)庫(kù)之一，是Web開發(fā)中最流行的數(shù)據(jù)庫(kù)[9]。系統(tǒng)使用 MySQL數(shù)據(jù)庫(kù)的原因就是因?yàn)?/span>它功能強(qiáng)大且使用方便，它能夠快速有效的處理龐大的數(shù)據(jù)，相對(duì)于Oracle數(shù)據(jù)庫(kù)來說，MySQL使用更為簡(jiǎn)單，方便上手。而且MySQL是一款開放源代碼的數(shù)據(jù)庫(kù)，可以供人自由使用。它相較于其他數(shù)據(jù)庫(kù)也具有價(jià)格優(yōu)勢(shì)，因?yàn)樗暮芏喙δ芏际强梢悦赓M(fèi)使用的，即便有的需要付費(fèi)，價(jià)格也是很便宜的[10]。

2.5.4 Echarts?數(shù)據(jù)可視化圖表庫(kù)

ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù)，就是將數(shù)據(jù)通過圖表的形式展示出來，可以讓用戶直觀的看到數(shù)據(jù)。且Echarts圖形種類眾多，都有相應(yīng)的模板可供使用，每個(gè)模板有著對(duì)應(yīng)的API及文檔說明。兼容性好，可支持多款瀏覽器，底層依賴矢量圖形庫(kù) ZRender，可提供直觀的數(shù)據(jù)可視化圖表。

2.5.5 Eelement前端UI框架

Eelement UI是一款基于Vue2.0的組件庫(kù)，由餓了么公司前端團(tuán)隊(duì)開源，提供了大量的PC端組件，能夠讓開發(fā)人員在開發(fā)中快速搭建項(xiàng)目界面，減少了大部分工作量，極大的提高了開發(fā)效率。

2.5.6 Vue Baidu Map

Vue Baidu Map是Vue的一款插件，基于百度地圖進(jìn)行封裝，可在Vue項(xiàng)目中按需引入所需要的地圖。

使用方法：首先通過包管理工具npm或yarn安裝插件，二者安裝語(yǔ)句有所不同，npm為npm install vue-baidu-map --save，yarn為yarn add vue-baidu-map --save。再通過全局注冊(cè)引入組件，也可按需局部注冊(cè)，然后就可以在項(xiàng)目中正常使用。

3 系統(tǒng)設(shè)計(jì)

3.1 系統(tǒng)總體設(shè)計(jì)

Vue?的設(shè)計(jì)借鑒了MVVM模式，但沒有完全遵守 MVVM。Vue提供了ref可以直接操作 dom，違背了MVVM中model不能直接和view通信的原則。另外，Vue?的響應(yīng)式系統(tǒng)采用了觀察者模式，Vue的事件通訊采用了發(fā)布-訂閱模式。

MVVM是Model-View-ViewModel的簡(jiǎn)寫。唯一的區(qū)別是，它采用的使數(shù)據(jù)的雙向綁定，數(shù)據(jù)自動(dòng)反映在 ViewModel，反之亦然。Vue就是采用的這種模式，數(shù)據(jù)一旦發(fā)生變化, 就會(huì)自動(dòng)更新View。

模型（Model）-數(shù)據(jù)

視圖（View）- 用戶界面

視圖模型（ViewModel）- 連接View和Model，當(dāng)數(shù)據(jù)發(fā)生改變，自動(dòng)更新View。

如圖4所示：

系統(tǒng)架構(gòu)圖是為了抽象的表示軟件系統(tǒng)的整體系統(tǒng)框架、各個(gè)組件之間的相互關(guān)系，以及軟件系統(tǒng)的演進(jìn)方向的視圖。本系統(tǒng)架構(gòu)圖如圖5所示：

3.2 系統(tǒng)詳細(xì)設(shè)計(jì)

該民宿管理系統(tǒng)依據(jù)權(quán)限的不同，劃分的主要功能也不同，超級(jí)管理員功能主要包括:訂單管理，房間管理，民宿信息管理，賬號(hào)管理，銷售統(tǒng)計(jì)等功能模塊，普通管理員的功能主要包括對(duì)所登賬號(hào)的信息及密碼進(jìn)行修改，以及查看民宿、房間等信息。其系統(tǒng)功能結(jié)構(gòu)如圖6所示：

3.3 系統(tǒng)流程設(shè)計(jì)

3.3.1 用戶登錄流程

系統(tǒng)在登錄時(shí)會(huì)對(duì)賬號(hào)進(jìn)行判斷，首先判斷賬號(hào)及密碼格式是否正確，正確后再通過對(duì)比數(shù)據(jù)庫(kù)內(nèi)賬號(hào)進(jìn)行驗(yàn)證，驗(yàn)證通過后登錄成功。系統(tǒng)登錄流程圖如圖7所示：

3.3.2 房間管理流程

房間管理主要用于對(duì)房間的添加與刪除，添加的房間信息主要包括房間名稱，房間圖片，房間價(jià)格，房間分類，房間描述等，點(diǎn)擊確認(rèn)添加后，房間就會(huì)添加成功。選中對(duì)應(yīng)的房間點(diǎn)擊刪除就可直接刪除。

房間管理流程圖如圖8，圖9所示：

3.3.3 修改密碼流程

該功能模塊主要用于修改當(dāng)前所登錄賬號(hào)信息的密碼。修改密碼之前需要先輸入當(dāng)前密碼，即原密碼。輸入驗(yàn)證通過后才允許進(jìn)行修改，在輸入新密碼的同時(shí)也需要對(duì)密碼通過正則表達(dá)對(duì)格式進(jìn)行判斷，且不允許與原密碼一致。判斷通過后允許輸入新密碼，之后需進(jìn)一步確認(rèn)新密碼，確認(rèn)之前需要判斷要與輸入的新密碼一致。操作流程圖如圖10所示：

3.3.4 修改頭像流程

該模塊主要用于查看當(dāng)前登錄的賬號(hào)信息，可對(duì)當(dāng)前賬號(hào)頭像進(jìn)行修改。操作流程圖如圖11所示：

3.4 數(shù)據(jù)庫(kù)設(shè)計(jì)

3.4.1 數(shù)據(jù)庫(kù)概念模型設(shè)計(jì)

E-R圖簡(jiǎn)單來說，就是實(shí)體與屬性的對(duì)應(yīng)關(guān)系，一般用矩形表示實(shí)體，橢圓表示屬性二者通過實(shí)線連接。實(shí)體之間存在著對(duì)應(yīng)關(guān)系，有一對(duì)一，一對(duì)多，多對(duì)多等多種對(duì)用關(guān)系。關(guān)系用菱形表示，而關(guān)系的類型在菱形的兩條與實(shí)體的連接線上標(biāo)注。

用戶實(shí)體圖如圖12所示：

房間實(shí)體圖如圖13所示：

房間類型實(shí)體圖如圖14所示：

系統(tǒng)E-R圖如圖15所示：

3.4.2?數(shù)據(jù)庫(kù)結(jié)構(gòu)設(shè)計(jì)

數(shù)據(jù)庫(kù)主要根據(jù)涉及的數(shù)據(jù)存儲(chǔ)來設(shè)計(jì)，主要的表有：users表、shop表、goods表、goods_cate表、orders表等。

3.4.2.1 users---賬號(hào)模塊信息表

賬號(hào)信息表users主要是儲(chǔ)存?zhèn)€人信息，其中的U-Id字段作為用戶表的主鍵。表中字段主要有用戶ID，賬號(hào)創(chuàng)建時(shí)間，賬號(hào)，密碼，用戶組，頭像地址。如表1所示：

表1 users賬號(hào)模塊信息表

3.4.2.2 shop---民宿信息管理信息表

民宿信息表shop主要用于儲(chǔ)存民宿信息，其中的S-Id字段作為用戶表的主鍵。其中字段主要有民宿編號(hào)，民宿名稱，民宿公告，民宿頭像，民宿評(píng)分，銷量，活動(dòng)，民宿圖片，營(yíng)業(yè)時(shí)間，描述等。如表2所示：

表2 民宿模塊信息表

3.4.2.3 goods---房間模塊信息表

房間信息表goods主要用于儲(chǔ)存房間信息，其中的G-Id字段作為房間信息表的主鍵。其中字段主要有房間編號(hào)，房間創(chuàng)建時(shí)間，房間名稱，房間分類，房間價(jià)格，房間描述，房間圖片，房間評(píng)價(jià)，房間銷量等。如表3所示：

表3 房間模塊信息表

3.4.2.4 goods_cate---房間分類模塊信息表

房間分類信息表goods_cate主要用于儲(chǔ)存房間分類信息，其中的C-Id字段作為房間分類模塊表的主鍵。其中字段主要有房間分類編號(hào)，房間名稱，是否啟用等。如表4所示：

3.4.2.5 orders---訂單模塊信息表

訂單信息表orders主要用于儲(chǔ)存訂單信息，其中的O-Id字段作為訂單模塊信息表的主鍵。其中字段主要有訂單編號(hào)，訂單號(hào)，訂房時(shí)間，退房時(shí)間，聯(lián)系電話，顧客姓名，訂單金額，訂單狀態(tài)等。如表5所示：

4 系統(tǒng)實(shí)現(xiàn)

4.1系統(tǒng)開發(fā)環(huán)境

系統(tǒng)主要運(yùn)行環(huán)境需求如下：

操作系統(tǒng)：Windows10

調(diào)試環(huán)境工具：phpstudy

瀏覽器：Google Chrome

數(shù)據(jù)庫(kù)：MySQL

前端：HTML5、CSS3、JavaScript、Vue、Axios、Webpack、Element UI

開發(fā)工具：Visual Studio Code

4.2 超級(jí)管理員模塊實(shí)現(xiàn)

4.2.1 登錄模塊實(shí)現(xiàn)

l?操作流程

管理員打開系統(tǒng)網(wǎng)頁(yè)，進(jìn)入登錄頁(yè)面，后臺(tái)會(huì)對(duì)輸入的管理員賬戶和密碼進(jìn)行判斷，若判斷正確，則跳轉(zhuǎn)至后臺(tái)首頁(yè)。

l?關(guān)鍵代碼

handleLogin() {

// 對(duì)整個(gè)表單進(jìn)行校驗(yàn)

??????this.$refs.loginForm.validate(async (validate) => {

????????if (validate) {

??????????// 發(fā)送ajax給后端 發(fā)送登錄請(qǐng)求

??????????let res = await checkLogin(this.loginForm);

// 把后端取到的數(shù)據(jù) 解構(gòu)出來

??????????let { code, msg, role, token } = res.data;

??????????if (code === 0) {

????????????// 判斷狀態(tài)碼，當(dāng)判斷碼為0時(shí)，把令牌存入本地

????????????localStorage.token = token;

????????????localStorage.role = role; // 存本地

????????????// 生成動(dòng)態(tài)路由

????????????createDynamicRoutes();

????????????this.$router.push("/home");

??????????}

????????} else {

??????????return;

????????}

??????});

????},

l?界面截圖如圖16所示：

4.2.2 后臺(tái)首頁(yè)模塊實(shí)現(xiàn)

后臺(tái)首頁(yè)模塊將整個(gè)管理系統(tǒng)的模塊及相應(yīng)功能一一呈現(xiàn)出來，能讓管理員一眼就能夠了解到該管理系統(tǒng)所具有的功能。左側(cè)為各個(gè)模塊的導(dǎo)航菜單，右側(cè)為每個(gè)模塊所對(duì)應(yīng)內(nèi)容。

l?界面截圖如圖17所示：

4.2.3 民宿信息管理模塊實(shí)現(xiàn)

民宿信息管理模塊主要呈現(xiàn)了該民宿的主要信息，包括所在地址，民宿公告，民宿描述，民宿評(píng)分，民宿活動(dòng)等。超級(jí)管理員可對(duì)民宿信息進(jìn)行編輯更改。

l?關(guān)鍵代碼

?// 民宿頭像上傳成功

????handleAvatarSuccess(res) {

??????if (res.code === 0) {

// 彈出提示框

????????this.$message.success(res.msg);

// 對(duì)頭像圖片進(jìn)行回填，

????????this.shopForm.avatar = res.imgUrl;

??????}

????},

l?頁(yè)面截圖如圖18所示：

4.2.4 訂單管理模塊實(shí)現(xiàn)

該模塊可以讓管理員直觀的觀察到所有訂單的詳細(xì)信息，并能夠?qū)λ杏唵涡畔凑沼唵翁?hào)，顧客姓名，房間狀態(tài)等進(jìn)行查詢，并將查詢后的訂單信息顯示在表格內(nèi)。也可以對(duì)某一行的訂單進(jìn)行編輯以及查看該訂單的詳細(xì)信息。

l?關(guān)鍵代碼

???async getData() {

??????// 處理null日期是null的問題

??????if (this.searchForm.date === null) {

// 清空日期數(shù)組

????????this.searchForm.date = [];

??????}

??????// 獲取數(shù)據(jù)

??????let res = await getOrderList({

????????// 分頁(yè)參數(shù)

????????currentPage: this.currentPage, //當(dāng)前頁(yè)碼

????????pageSize: this.pageSize, //每頁(yè)條數(shù)

// 查詢參數(shù)

????????orderNo: this.searchForm.orderNo, // 訂單編號(hào)

????????consignee: this.searchForm.consignee, // 收貨人

????????phone: this.searchForm.phone, // 手機(jī)號(hào)

????????orderState: this.searchForm.orderState, // 訂單狀態(tài)

????????date: JSON.stringify(this.searchForm.date), // 在賦值渲染之前處理時(shí)間

??????});

????????// 賦值渲染

??????this.tableData = res.data.data;

??????this.total = res.data.total;

????},

l?頁(yè)面截圖如圖19所示：

4.2.4.1 訂單列表詳細(xì)信息模塊實(shí)現(xiàn)

此模塊就可對(duì)當(dāng)前訂單的詳細(xì)信息進(jìn)行查看。

l?頁(yè)面截圖如圖20所示：

4.2.4.2 訂單編輯模塊實(shí)現(xiàn)

該功能可對(duì)當(dāng)前訂單進(jìn)行編輯，比如可修改當(dāng)前訂單的訂單號(hào)，訂單狀態(tài)，訂房時(shí)間等相關(guān)信息。

l?操作流程

在編輯之前，需選擇需要編輯的訂單，輸入編輯的信息之后即可保存。

l?關(guān)鍵代碼

?????// 顯示詳情

??????handleShowDetail(row) {

????????this.modelVisible = true; // 顯示模態(tài)框

????????this.orderData = row;

??????},

??????// 編輯

??????handleEdit(row) {

????????// 路由跳轉(zhuǎn)攜帶參數(shù)

????????this.$router.push({

??????????path: "/order/order-edit",

??????????query: {

????????????id: row.id,

??????????},

????????});

l?頁(yè)面截圖如圖21所示：

4.2.5 房間管理模塊實(shí)現(xiàn)

該模塊主要分為房間列表，房間添加，房間分類三個(gè)模塊，每個(gè)模塊對(duì)應(yīng)不同的功能。房間列表主要是將后臺(tái)數(shù)據(jù)庫(kù)內(nèi)的所有房間信息通過表格顯示出來，能讓用戶一眼得到所有房間信息，例如房間價(jià)格，房間分類，房間價(jià)格等等。房間添加模塊主要能夠添加新的房間，并實(shí)時(shí)顯示到房間列表中。房間分類模塊主要是對(duì)所有房間的類別進(jìn)行歸屬。

4.2.5.1 房間列表信息模塊實(shí)現(xiàn)

該模塊主要用于展示房間的詳細(xì)信息，能對(duì)房間按照名稱或者房間分類進(jìn)行搜索查詢，并將搜索出來的房間展示在表格內(nèi)，每一行都能通過房間所屬id對(duì)該列房間進(jìn)行刪除以及編輯操作。

l?關(guān)鍵代碼

實(shí)現(xiàn)列表信息代碼如下：

??// 獲取數(shù)據(jù)

????async getData() {

??????// 發(fā)送Ajax 獲取房間列表數(shù)據(jù)

??????let res = await getGoodsList({

????????currentPage: 1, //當(dāng)前頁(yè)碼

????????pageSize: 5, //每頁(yè)條數(shù)

??????});

??????// 渲染

??????this.tableData = res.data.data;

?????},

實(shí)現(xiàn)刪除功能代碼如下：

????// 刪除房間

????async handleDelete(row) {

??????let { id } = row;

//發(fā)送Ajax進(jìn)行刪除

??????let res = await delGoods({ id });

??????this.getgoodslist();

????},

l?頁(yè)面截圖如圖22所示：

4.2.5.2 房間添加模塊實(shí)現(xiàn)

該模塊主要實(shí)現(xiàn)對(duì)房間的添加，例如房間的名稱，價(jià)格，分類，以及房間圖片等。

l?操作流程

添加房間信息之前首先要確認(rèn)房間信息是否添加正確，確認(rèn)添加信息無誤后即可成功添加房間.

l?關(guān)鍵代碼

???// 添加房間

async handleAddGoods() {

// 發(fā)送Ajax從后端獲取數(shù)據(jù)

??????let res = await addGoods(this.addGoodsForm);

//判斷狀態(tài)碼，狀態(tài)碼為0，表示請(qǐng)求成功

??????if (res.data.code === 0) {

????????this.$router.push("/goods/goods-list");

??????}},

l?頁(yè)面截圖如圖23所示：

4.2.5.3 房間分類模塊實(shí)現(xiàn)

該模塊主要用于管理房間的所屬分類，并能進(jìn)行編輯以及刪除功能。

l?關(guān)鍵代碼

編輯功能可以對(duì)當(dāng)前行的分類決定是否啟用，若啟用，則數(shù)據(jù)庫(kù)內(nèi)的房間分類欄該分類展示，若不啟用，該房間分類隱藏。

編輯功能主要實(shí)現(xiàn)代碼如下：

async getcate() {

??// 發(fā)送Ajax請(qǐng)求從后端獲取數(shù)據(jù)

??????let res = await getCateList({

????????currentPage: this.currentPage,?//當(dāng)前頁(yè)碼

????????pageSize: 10,// 每頁(yè)條數(shù)

??????});

??????// 添加一個(gè)是否可以編輯的字段

??????res.data.data.forEach((v) => {

????????v.canEdit = false;

??????});

??????this.tableData = res.data.data;

??????this.total = res.data.total;

????}

刪除功能主要如下:

??// 刪除

???async handleDelete(row) {

// 發(fā)送Ajax請(qǐng)求，獲取id，根據(jù)房間id進(jìn)行刪除

?????let res = await delGoodsCate({ id: row.id });

??????this.getcate();

????},

l?頁(yè)面截圖如圖24所示：

4.2.6 賬號(hào)管理模塊實(shí)現(xiàn)

該模塊主要分為賬號(hào)列表，修改密碼，個(gè)人中心四個(gè)板塊。賬號(hào)列表用于顯示此管理系統(tǒng)的所有賬號(hào)信息，可以對(duì)當(dāng)前賬號(hào)的用戶組以及用戶名進(jìn)行更改以及刪除操作。修改密碼主要是用于修改當(dāng)前系統(tǒng)所登錄的密碼，修改成功后清除存儲(chǔ)并退出系統(tǒng)跳到登錄頁(yè)面。個(gè)人中心主要用于展示當(dāng)前登陸賬號(hào)的信息，并可以更改當(dāng)前用戶頭像。

4.2.6.1 賬號(hào)列表模塊實(shí)現(xiàn)

該模塊主要用于添加新的賬號(hào)，可對(duì)所有賬號(hào)進(jìn)行編輯刪除，也可以全選進(jìn)行批量刪除。

l?關(guān)鍵代碼

主要實(shí)現(xiàn)代碼如下：

???// 獲取數(shù)據(jù) 渲染列表

???async getData() {

?????????// 發(fā)送Ajax給后端

????????let res = await getAccountList({

????????????currentPage: this.currentPage, // 當(dāng)前頁(yè)碼

??????????? pageSize: this.pageSize ??// 每頁(yè)條數(shù)

????????})

????????// 渲染

????????let total = res.data.total // 后端返回的總條數(shù)

????????let tableData = res.data.data // 后端返回的列表數(shù)據(jù)

}

刪除功能主要實(shí)現(xiàn)代碼如下：

???async handleDelete(row) {

??????let res = await delAccount({ id: row.id });//獲取該行id值

??????if (res.data.code === 0) {

????????this.getData();

??????} },

l?頁(yè)面截圖如圖25所示：

4.2.6.2 修改密碼模塊實(shí)現(xiàn)

該功能模塊主要用于修改當(dāng)前所登錄賬號(hào)信息的密碼。

l?操作流程

修改密碼之前需要先輸入當(dāng)前密碼，即原密碼。輸入驗(yàn)證通過后才允許進(jìn)行修改，在輸入新密碼的同時(shí)也需要對(duì)密碼通過正則表達(dá)對(duì)格式進(jìn)行判斷，且不允許與原密碼一致。判斷通過后允許輸入新密碼，之后需進(jìn)一步確認(rèn)新密碼，確認(rèn)之前需要判斷要與輸入的新密碼一致。

l?關(guān)鍵代碼

修改密碼實(shí)現(xiàn)的主要代碼下:

?// 驗(yàn)證舊密碼

????const checkOldPwd = async (rule, value, callback) => {

//判斷輸入框是否有值

??????if (!value) {

????????callback(new Error("請(qǐng)輸入原密碼"));

??????} else {

// 發(fā)送Ajax對(duì)密碼進(jìn)行驗(yàn)證

????????let res = await checkOldPassword({ oldPwd: value });

????????if (res.data.code !== 200) {

??????????callback(new Error(res.data.msg));

????????} else {

// 調(diào)用回調(diào)函數(shù)

??????????callback();

????????}}

};

????// 驗(yàn)證新密碼

????const checkNewPwd = (rule, value, callback) => {

??????if (!value) {

????????callback(new Error("請(qǐng)輸入新密碼"));

// 通過正則表達(dá)驗(yàn)證密碼格式是否正確

??????} else if (!/^[a-zA-Z0-9]{6,12}$/.test(value)) {

????????callback(new Error("6到12位, 大小寫字母和數(shù)字"));

??????} else if (value === this.passwordForm.oldPwd) {

????????callback(new Error("新密碼不能和舊密碼相同"));

??????} else {

????????// 如果確認(rèn)新密碼不為空有值, 再次觸發(fā)一致性驗(yàn)證

????????if (this.passwordForm.newPwdAgain) {

??????????this.$refs.passwordForm.validateField("newPwdAgain"); // 觸發(fā)某個(gè)指定的字段的驗(yàn)證

????????}

??????};

????// 確認(rèn)新密碼

????const checkPwdAgain = (rule, value, callback) => {

??????if (!value) {

????????callback(new Error("請(qǐng)?jiān)俅屋斎胄旅艽a"));

??????} else if (value !== this.passwordForm.newPwd) {

????????callback(new Error("兩次密碼不一致"));

??????} else {

????????callback();

??????}

????};

頁(yè)面截圖如圖26所示：

4.2.6.3 個(gè)人中心模塊實(shí)現(xiàn)

該模塊主要用于查看當(dāng)前登錄的賬號(hào)信息，可對(duì)頭像進(jìn)行修改。

l?操作流程

用戶在上傳頭像時(shí)，系統(tǒng)會(huì)首先選擇圖片路徑，然后對(duì)上傳頭像的圖片的格式以及大小進(jìn)行限制，條件滿足則上傳成功。

l?關(guān)鍵代碼

修改頭像代碼如下:

?????// 上傳頭像成功

async handleAvatarSuccess(res) {

// 判斷狀態(tài)碼是否為0

??????if (res.code === 0) {

????????// 圖片回填

????????this.imageUrl = res.imgUrl;

????????// 再發(fā)送Ajax 修改數(shù)據(jù)庫(kù)的圖片url地址

????????let result = await editAvatar({ imgUrl: res.imgUrl });

????????if (result.data.code === 0) {

??????????// 通知頭部更新

??????????this.$bus.$emit("update-avatar");

????????}}

l?頁(yè)面截圖如圖27所示：

??4.2.7 銷售統(tǒng)計(jì)模塊實(shí)現(xiàn)

該模塊主要是將房間與訂單通過Echarts可視化圖表展示出來，可直接生成報(bào)表，供管理員直接查看。

l?頁(yè)面截圖如圖28所示：

4.3 普通管理員模塊實(shí)現(xiàn)

系統(tǒng)在登陸時(shí)會(huì)對(duì)所登陸的賬號(hào)進(jìn)行判斷，并依據(jù)用戶組的不同分配不同的權(quán)限。普通管理員相較于超級(jí)管理員來說，所擁有的權(quán)限更低，不具備超級(jí)管理員的操作功能，對(duì)于一些模塊界面，只是擁有查看的功能。

4.3.1 民宿信息管理模塊

民宿信息管理模塊主要呈現(xiàn)了該民宿的主要信息，包括所在地址，民宿公告，民宿描述，民宿評(píng)分，民宿活動(dòng)等。頁(yè)面圖如圖29所示：

4.3.2 訂單管理模塊

該模塊普通管理員可對(duì)訂單信息進(jìn)行查看，能夠?qū)λ杏唵涡畔凑沼唵翁?hào)，顧客姓名，房間狀態(tài)等進(jìn)行查詢，并將查詢后的訂單信息顯示在表格內(nèi)。如圖30所示：

4.3.3 修改密碼模塊

該功能模塊主要用于修改當(dāng)前所登錄賬號(hào)信息的密碼，在修改密碼之前需要先輸入當(dāng)前密碼，即原密碼。輸入驗(yàn)證通過后才允許進(jìn)行修改，在輸入新密碼的同時(shí)也需要對(duì)密碼通過正則表達(dá)對(duì)格式進(jìn)行判斷，且不允許與原密碼一致。判斷通過后允許輸入新密碼，之后需進(jìn)一步確認(rèn)新密碼，確認(rèn)之前需要判斷要與輸入的新密碼一致，頁(yè)面效果圖如圖31所示:

5 系統(tǒng)測(cè)試

5.1 測(cè)試環(huán)境

操作系統(tǒng)：Windows10

測(cè)試工具：Loadrunner、Visual Studio Code

調(diào)試環(huán)境工具：phpStudy

5.2 測(cè)試工具

在測(cè)試的過程中，單元測(cè)試是對(duì)系統(tǒng)中的單位元素完成測(cè)試，在系統(tǒng)中則是在模塊之間完成測(cè)試，它不僅僅是軟件測(cè)試的基本構(gòu)成，也是相對(duì)重要的構(gòu)成部分[11]；集成測(cè)試檢驗(yàn)每個(gè)模塊的接口的結(jié)果是否正確，分析各模塊間是否較大耦合；系統(tǒng)測(cè)試是對(duì)已實(shí)現(xiàn)的系統(tǒng)進(jìn)行徹底的測(cè)試，檢驗(yàn)系統(tǒng)的功能是否實(shí)現(xiàn)，軟件和硬件的性能是否能夠滿足需求，輸入和輸出是否正確[12]。

5.3 功能測(cè)試

測(cè)試內(nèi)容包括登錄模塊測(cè)試、訂單管理模塊測(cè)試、房間管理模塊測(cè)試、民宿信息管理模塊測(cè)試、賬號(hào)管理模塊測(cè)試、銷售統(tǒng)計(jì)模塊測(cè)試。測(cè)試內(nèi)容如下：

登錄模塊主要測(cè)試登錄時(shí)的驗(yàn)證跳轉(zhuǎn)。

訂單管理模塊主要測(cè)試訂單信息的編輯，刪除以及查詢功能。

房間管理模塊主要測(cè)試房間的添加，刪除以及編輯，房間分類的編輯及刪除。

民宿信息管理模塊主要測(cè)試民宿信息的修改，例如頭像是否成功上傳。

賬號(hào)管理模塊主要測(cè)試賬號(hào)列表的編輯刪除，賬號(hào)的添加，修改用戶密碼以及個(gè)人中心上傳頭像

銷售統(tǒng)計(jì)模塊主要測(cè)試是否正常生成數(shù)據(jù)報(bào)表。

系統(tǒng)主要測(cè)試如下：

5.3.1 登錄測(cè)試

該表是用來測(cè)試登錄功能是否正常使用，測(cè)試用例主要包括賬號(hào)密碼輸入是否正確、是否輸入賬號(hào)密碼等情況。?

表6?登錄測(cè)試用例表

5.3.2 訂單管理測(cè)試

該表是用來測(cè)試訂單編輯以及刪除功能是否正常使用，測(cè)試用例主要包括按訂單id查詢訂單信息、編輯訂單以及查看訂單詳情。

5.3.3 房間管理測(cè)試

該表是用來測(cè)試房間添加、編輯以及刪除功能是否能夠正常使用，測(cè)試用例主要包括添加房間、編輯房間信息、刪除房間以及添加房間分類。

5.3.4 民宿信息管理測(cè)試

該表是用來測(cè)試民宿信息頭像是否能夠成功上傳，測(cè)試用例主要包括上傳頭像。

5.3.5 賬號(hào)管理測(cè)試

該表是用來測(cè)試賬號(hào)的刪除、編輯、添加以及修用戶改密碼、個(gè)人頭像上傳功能是否能夠正常使用，測(cè)試用例主要包括刪除賬號(hào)、編輯賬號(hào)、添加賬號(hào)、修改密碼以及上傳個(gè)人頭像。

5.3.6 銷售統(tǒng)計(jì)管理測(cè)試

該表是用來測(cè)試數(shù)據(jù)報(bào)表是否能夠正常生成。

5.4 性能測(cè)試

一個(gè)完整的系統(tǒng)不僅需要滿足相應(yīng)功能，還需要具備優(yōu)良的性能，在系統(tǒng)完成后，需對(duì)整個(gè)系統(tǒng)進(jìn)行性能測(cè)試，測(cè)試的目的主要對(duì)整個(gè)系統(tǒng)的性能進(jìn)行優(yōu)化，并且確保整個(gè)系統(tǒng)能夠安全平穩(wěn)的運(yùn)行，系統(tǒng)的性能測(cè)試主要包括系統(tǒng)的響應(yīng)時(shí)間，吞吐量，并發(fā)數(shù)等。這些數(shù)據(jù)的指標(biāo)能直觀的觀察出該系統(tǒng)的性能是否優(yōu)良。

測(cè)試結(jié)果如32圖所示：

測(cè)試總結(jié)：

本系統(tǒng)使用LoadRunner性能測(cè)試軟件進(jìn)行測(cè)試，本系統(tǒng)運(yùn)行良好，基本實(shí)現(xiàn)系統(tǒng)預(yù)定目標(biāo)。

6 總結(jié)

6.1 總結(jié)

通過此次畢業(yè)的項(xiàng)目設(shè)計(jì)，進(jìn)一步學(xué)習(xí)了Vue的相關(guān)知識(shí)，能夠運(yùn)用Vue腳手架快速搭建項(xiàng)目，能夠熟練的使用Element-UI框架來實(shí)現(xiàn)頁(yè)面布局的快速搭建，能熟練掌握通過使用Echarts生成圖表。從搜尋相關(guān)參考資料開始，到動(dòng)手編寫程序，至調(diào)試測(cè)試程序，最終完成了這次畢業(yè)設(shè)計(jì)。

6.2 展望

此次系統(tǒng)設(shè)計(jì)中，仍然還存在著大量的不足，本該設(shè)計(jì)到的多方面的功能還不夠完善，還有著許多的問題亟待解決，在今后的過程中將根據(jù)實(shí)際情況積累更多的經(jīng)驗(yàn)，對(duì)其進(jìn)行補(bǔ)充與完善。

參 考 文 獻(xiàn)

[1]?蔣佳倩，李艷.國(guó)內(nèi)外旅游“民宿”研究綜述《旅游研究》.2015

[2]?何良安.湖南民宿產(chǎn)業(yè)的高質(zhì)量發(fā)展：現(xiàn)狀、問題與對(duì)策[J]. 湖南行政學(xué)院學(xué)報(bào)，2021,（03）：102-112

[3]?朱露.現(xiàn)代民宿酒店現(xiàn)狀及發(fā)展對(duì)策[J].商場(chǎng)現(xiàn)代化，2021,(08)：173-175

[4]?朱蔚琦.特色地域文化旅游民宿室內(nèi)設(shè)計(jì)[J].建筑結(jié)構(gòu)，2021,51（06）：143

[5]?馮雨希.淺析民宿在鄉(xiāng)村旅游中的地位和作用--以廣西金秀為例[J]. 內(nèi)江科技，2021,42(02)：50-51

[6]?鄭婭峰.HTML,CSS,JavaScript 實(shí)例教程［M].北京：清華大學(xué)出版社2018

[7]?陳巖.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析[J].中國(guó)管理信息化,2018,21(03):181-183

[8]?朱二華.基于Vue.js的Web前端應(yīng)用研究[J].科技與創(chuàng)新，2017(20):119-121

[9]?鄭智方,李彬,劉世坤,李鵬.探究 mysql的運(yùn)用實(shí)例-對(duì)數(shù)據(jù)庫(kù)的宏觀把握[J] .科技風(fēng), 2020(06):129

[10]?楊雨成,任利峰.MySQL數(shù)據(jù)庫(kù)性能優(yōu)化技術(shù)研究[J].科技經(jīng)濟(jì)導(dǎo)刊,2020,28(03): 32

[11]?許靜，陳宏剛，王慶人，軟件測(cè)試方法簡(jiǎn)述與展望[J]，計(jì)算機(jī)工程與應(yīng)用(13):78-81

[12]?張新華，何永前，軟件測(cè)試方法概述[J]．科技視界，2012(4):125-125

致 ?謝

論文寫到致謝部分，論文也已經(jīng)接近尾聲。首先要感謝指導(dǎo)老師秦光老師，從論文的開題、查找相關(guān)資料，到論文修改、定稿，在整個(gè)過程中都給予了我很大的幫助，總是能在我迷茫時(shí)為我指點(diǎn)迷津，對(duì)我進(jìn)行無私的指導(dǎo)和幫助，不厭其煩的對(duì)我的論文進(jìn)行修改與補(bǔ)充，正是在秦老師的悉心指導(dǎo)下，我才能順利完成畢業(yè)論文，在此再次向秦老師表示衷心的感謝！