“棲花尋夢(mèng)”民宿微信小程序的設(shè)計(jì)與實(shí)現(xiàn)1緒論1.1研究背景隨著疫情常態(tài)化管理以來，旅游業(yè)逐漸復(fù)蘇，快速回暖，民宿作為旅游業(yè)住宿結(jié)構(gòu)中的一部分，也乘著這股東風(fēng)快速發(fā)展。越來越多的人在旅游時(shí)選擇入住民宿而不是酒店，因?yàn)槊袼弈軌蚪o人們帶來人文關(guān)懷，而不是單純的解決住宿問題。人們能夠在城市的喧囂中得到喘息的機(jī)會(huì)，體會(huì)當(dāng)?shù)氐娘L(fēng)土人情，自然人文環(huán)境。在民宿的發(fā)展歷程中，也發(fā)現(xiàn)了一些問題，比如民宿相關(guān)法律法規(guī)不夠完善，民宿服務(wù)質(zhì)量參差不齊，民宿的風(fēng)格和功能過度相似，呈現(xiàn)千人一面的現(xiàn)象。所以民宿要走向高質(zhì)量發(fā)展，還有很多地方需要改善，針對(duì)以上問題，本文將從實(shí)踐意義與社會(huì)意義進(jìn)行分析。1.2研究意義1.2.1實(shí)踐意義當(dāng)前我國的民宿在發(fā)展過程中，主要存在宣傳性不足，管理性欠缺等問題。民宿預(yù)訂大多是通過攜程，美團(tuán)等OTA平臺(tái)等預(yù)訂，或者朋友介紹，口碑相傳等傳統(tǒng)的獲客方式,只有少數(shù)民宿管理者在新媒體平臺(tái)或者使用微信公眾號(hào)宣傳，民宿宣傳方面的欠缺導(dǎo)致客源單一，為獲取更多客源，可以采取新媒體“微信”的幫助，擁有自己民宿品牌的微信小程序，擴(kuò)寬獲客渠道，擁有自己的渠道REF_Ref26629\r\h[1]。另外，民宿行業(yè)多數(shù)是由個(gè)人或者家庭來運(yùn)作，跟酒店已經(jīng)成熟的管理系統(tǒng)比起來，經(jīng)營經(jīng)驗(yàn)少，管理效率不高，對(duì)于民宿管理者來說，民宿預(yù)訂小程序可以幫助民宿管理者更好的管理自己的房源信息和訂單信息，從而提高民宿的經(jīng)營效益。1.2.2社會(huì)意義棲花尋夢(mèng)民宿是基于十二月花神非物質(zhì)文化遺產(chǎn)建立的連鎖民宿，十二月花神是安徽省安慶市潛山縣的省級(jí)非物質(zhì)文化遺產(chǎn)，潛山市民間舞蹈“十二月花神”歷史悠久，它的神話原型是“觀音灑凈”，舞蹈講述了觀音灑凈水，使人間萬物蘇醒，萬紫千紅，表達(dá)人民對(duì)生活的美好愿景。將旅游和非遺文化相結(jié)合，不僅大力了發(fā)展旅游業(yè)，而且在傳承和發(fā)展中華優(yōu)秀傳統(tǒng)文化中發(fā)揮了不可替代的作用，讓旅客在快樂玩耍的同時(shí)，感受到中華傳統(tǒng)文化的魅力，文旅融合的形式，讓旅游不再空洞，具有文化內(nèi)涵，響應(yīng)習(xí)近平總書記在黨的二十大報(bào)告中提出的：“增強(qiáng)中華文明傳播力影響力，堅(jiān)守中華文化立場(chǎng)，講好中國故事”的號(hào)召，從而增強(qiáng)文化自信和民族自信REF_Ref26701\r\h[2]。1.3國內(nèi)外研究現(xiàn)狀1.3.1民宿發(fā)展現(xiàn)狀民宿發(fā)展現(xiàn)狀隨著民宿業(yè)的迅速發(fā)展，中外學(xué)者進(jìn)行了大量研究。近年來關(guān)于民宿的期刊數(shù)量不斷增加，特別是針對(duì)鄉(xiāng)村民宿的發(fā)展有助于消除鄉(xiāng)村貧困的研究上，以及針對(duì)民宿的發(fā)展的近況、窘境和策略方面REF_Ref26759\r\h[3]。國內(nèi)對(duì)民宿的優(yōu)化發(fā)展研究主要集中在民宿品牌的建立、民宿目標(biāo)客戶群體的分析、收入來源的研究三個(gè)方面進(jìn)行研究。2023年，陳小小，于久洪提到我國民宿營銷手段跟國外對(duì)比，較為老舊，民宿管理者的運(yùn)營觀念還停留在過去的時(shí)代REF_Ref26629\r\h[1]。2021年周曉云、劉輝指出要以互聯(lián)網(wǎng)平臺(tái)作為載體，為民宿的營銷開創(chuàng)新局面，大多數(shù)國內(nèi)旅客主要在攜程網(wǎng)、藝龍網(wǎng)等有較多房源的平臺(tái)預(yù)訂房間，并不知道相關(guān)民宿有官網(wǎng)預(yù)訂的方式REF_Ref26965\r\h[4]。結(jié)合本項(xiàng)目，從國內(nèi)發(fā)展現(xiàn)狀來看，應(yīng)該運(yùn)用新媒體營銷工具微信來幫助民宿打開獲客渠道，獲取更多的潛在用戶的同時(shí)，并且穩(wěn)固長期用戶。民宿最早源自英國，之后傳向美國和法國，繼而在日本和中國臺(tái)灣發(fā)展迅猛REF_Ref27034\r\h[5]。在歐美國家，民宿的詞匯一般帶有家族性，如Homestay、FamilyHotel、FamilyInn等REF_Ref27086\r\h[6]。英國民宿近年來處于飛躍發(fā)展的階段，為了滿足人們短期性的旅游需求，與此同時(shí)，為了促進(jìn)民宿高質(zhì)量，規(guī)范化發(fā)展，英國政府出臺(tái)了一系列政策REF_Ref27161\r\h[7]。美國民宿由于其產(chǎn)業(yè)特點(diǎn)突出，孕育了許多民宿租貸公司，從而在民宿行業(yè)吸引了大量的社會(huì)投資。針對(duì)此現(xiàn)象，美國各個(gè)州都頒布相應(yīng)法規(guī)，對(duì)民宿進(jìn)行行業(yè)監(jiān)管。例如，華盛頓州頒布的法規(guī)要求，所有短租民宿的管理者都要取得營業(yè)執(zhí)照，對(duì)短租民宿的數(shù)量也制定了相關(guān)的約束REF_Ref27210\r\h[8]。在整個(gè)亞洲，日本是民宿產(chǎn)業(yè)最發(fā)達(dá)的國家。日本民宿配套功能完善、服務(wù)質(zhì)量較高、文化體驗(yàn)豐富、住宿生活品質(zhì)高REF_Ref27262\r\h[9]，世界各國的旅客們都聞名而來。日本民宿的發(fā)展經(jīng)驗(yàn)豐富，對(duì)于我國的民宿產(chǎn)業(yè)有重要借鑒意義。1.3.2微信小程序小程序的概念是百度首席執(zhí)行官李彥宏，在百度世界大會(huì)上提出的，即“移動(dòng)搜索+輕應(yīng)用”，它具有點(diǎn)擊即用，模糊搜索、功能強(qiáng)大、訂閱推送的特點(diǎn)。之后，2016年P(guān)WA技術(shù)概念的提出，各大廠商就開始開發(fā)小程序，但是在國內(nèi)，最終成功的只有微信小程序。微信小程序自2017年誕生以來，一直是不溫不火的狀態(tài)，直到“跳一跳”的小游戲爆火，微信小程序的用戶才有了爆發(fā)式的增長，除了微信平臺(tái)本身有使用群體以外，微信小程序的加載速度比網(wǎng)站快也是一個(gè)重要原因。2016年，設(shè)計(jì)師弗朗西斯Google的工程師亞歷克斯·羅素提出PWA概念。根據(jù)該技術(shù)，谷歌、微軟、蘋果等廠商開發(fā)了相應(yīng)的WebApp，谷歌的一項(xiàng)小程序AndroidInstantApp，形態(tài)上跟微信小程序相差無幾，但是兩者最終達(dá)成的目標(biāo)卻不同，谷歌的小程序更像是APP的一次試用，最終目的是為了引導(dǎo)用戶下載使用APP，而微信小程序具有完整的功能，它的目的是取代APP。民宿預(yù)訂平臺(tái)是共享經(jīng)濟(jì)背景下，在互聯(lián)網(wǎng)上進(jìn)行房屋租貸的交易平臺(tái)，民宿的上線和預(yù)訂都離不開民宿平臺(tái)，現(xiàn)在線上的民宿預(yù)訂平臺(tái)眾多，比如愛彼迎、途家、木鳥、美團(tuán)等等，對(duì)比四大平臺(tái)，除去一些必備功能以外，每個(gè)平臺(tái)也具有自己的特色功能，吸引的用戶群體也不同，以下針對(duì)四大平臺(tái)的特色功能和吸引的用戶做出對(duì)比分析REF_Ref27380\r\h[10]。木鳥：網(wǎng)紅民宿。網(wǎng)紅民宿有專門的分類，吸引更多的年輕用戶。美團(tuán)：學(xué)生特權(quán)卡。學(xué)生認(rèn)證成功后，可以解鎖學(xué)生認(rèn)證紅包，會(huì)員抵扣券，美團(tuán)民宿校園認(rèn)證新客券等福利，所以這款民宿小程序是學(xué)生群體出行住宿的首選。愛彼迎：體驗(yàn)功能。即是用戶在當(dāng)?shù)亻_展特色體驗(yàn)，和當(dāng)?shù)厝藚⒓踊顒?dòng)，深度體驗(yàn)當(dāng)?shù)厣?，讓旅游更加?dú)特。通過這個(gè)功能游客可以了解當(dāng)?shù)氐娘L(fēng)土人情，但是需要支付高額費(fèi)用，相對(duì)于國外，國內(nèi)用戶普遍不接受，主要是海外用戶。途家：新手特權(quán)卡。最直接的用戶福利發(fā)放，可以吸引更多的新人用戶，但是用戶入住頻次并不高，吸引力不大，主要用戶是高端人士。在過去小程序還沒有發(fā)展起來之前，用戶只能下載app進(jìn)行使用，所以內(nèi)存占用是影響平臺(tái)評(píng)分和下載數(shù)量的重要因素。微信小程序作為可以在微信上直接能搜索到的全新應(yīng)用產(chǎn)品，它與傳統(tǒng)APP的使用體驗(yàn)大不相同，不需要下載安裝，所以在四大民宿小程序平臺(tái)的用戶對(duì)比上，不考慮內(nèi)存大小這個(gè)因素REF_Ref27452\r\h[11]。1.4主要研究內(nèi)容“棲花尋夢(mèng)”微信小程序是一款面向90后，85后的公司白領(lǐng)，企業(yè)管理者的微信小程序，是為這類青睞于精品民宿的人群，設(shè)計(jì)開發(fā)的一款輕量化的微信小程序，本系統(tǒng)其主要功能包括房間預(yù)訂，活動(dòng)預(yù)訂，在能夠滿足用戶民宿預(yù)訂需求的同時(shí)，也整合了該民宿的特色活動(dòng)，旨在擴(kuò)大該民宿品牌影響力，方便民宿管理者高效化、信息化管理，該一站式微信小程序不僅提高了用戶體驗(yàn)，擴(kuò)大了“棲花尋夢(mèng)”民宿品牌的影響力，而且推動(dòng)了非遺文化“十二月花神”的傳承與發(fā)展。1.5論文結(jié)構(gòu)安排第一章：緒論，從本項(xiàng)目出發(fā)，闡述民宿發(fā)展研究背景以及本項(xiàng)目的研究目的，概述了全文的組織結(jié)構(gòu)及內(nèi)容安排。第二章：關(guān)鍵技術(shù)介紹。本章主要介紹了民宿預(yù)訂系統(tǒng)在設(shè)計(jì)開發(fā)過程中運(yùn)用到的相關(guān)前端和后端開發(fā)技術(shù)，如微信小程序框架，JavaScript技術(shù)，MySQL數(shù)據(jù)庫。第三章：需求分析及概要設(shè)計(jì)。主要對(duì)“棲花尋夢(mèng)”民宿微信小程序進(jìn)行了需求分析和可行性分析，根據(jù)需求分析的內(nèi)容設(shè)計(jì)了小程序的主要內(nèi)容模塊。通過前臺(tái)功能結(jié)構(gòu)設(shè)計(jì)圖和后臺(tái)功能結(jié)構(gòu)設(shè)計(jì)圖，闡述本項(xiàng)目中針對(duì)用戶需求的功能結(jié)構(gòu)設(shè)計(jì)。第四章：頁面布局分析及頁面布局設(shè)計(jì)。主要介紹了系統(tǒng)設(shè)計(jì)元素，如色彩、字體以及界面設(shè)計(jì)原則，通過頁面原型圖，闡述頁面內(nèi)容的分析和頁面布局設(shè)計(jì)，通過頁面之間的關(guān)系圖闡述主要頁面之間的關(guān)系。第五章：數(shù)據(jù)庫設(shè)計(jì)。根據(jù)“棲花尋夢(mèng)”民宿微信小程序的主要功能，分析系統(tǒng)所包含的實(shí)體并繪制實(shí)體圖，并用E-R圖描述實(shí)體之間的關(guān)系，最后繪制數(shù)據(jù)表。第六章：系統(tǒng)的實(shí)現(xiàn)。根據(jù)已完成的子系統(tǒng)，介紹系統(tǒng)基本功能的實(shí)現(xiàn)方法，并通過效果圖，關(guān)鍵代碼進(jìn)行展示。第七章：系統(tǒng)測(cè)試。使用用例測(cè)試的方法對(duì)系統(tǒng)的核心功能及系統(tǒng)性能進(jìn)行測(cè)試，并分析測(cè)試的結(jié)果。第八章：結(jié)論。根據(jù)系統(tǒng)測(cè)試結(jié)果得出結(jié)論，并結(jié)合全文對(duì)本文所做的工作與貢獻(xiàn)進(jìn)行總結(jié)。2關(guān)鍵技術(shù)介紹2.1前端技術(shù)2.1.1微信小程序框架微信小程序一項(xiàng)創(chuàng)新型應(yīng)用，與傳統(tǒng)需要占用大量手機(jī)內(nèi)存的APP不同，微信小程序只需要通過掃碼或者搜索就可以使用。微信小程序的前端技術(shù)主要包括WXML、WXSS、JavaScript等。在WXML中可以定義組件的名稱、屬性、標(biāo)簽等，通過WXML可以快速的搭建微信小程序的界面結(jié)構(gòu)。在WXSS中可以定義組件定位、動(dòng)畫等，在WXSS中可以編輯微信小程序的界面樣式。JavaScript是微信小程序的編程語言，運(yùn)用編程語言可以決定小程序的邏輯和交互效果。2.1.2Vant框架Vant是一種常用的UI框架，相比于其他的常用框架，Vant具有輕量和可靠的特點(diǎn)，而且具有更多數(shù)量的組件，滿足用于開發(fā)移動(dòng)端網(wǎng)頁的功能需求。相較于其他框架，Vant更加方便快捷，可以快速搭建出頁面,極大的提高了開發(fā)效率。Vant旨在更快、更簡(jiǎn)單地開發(fā)出移動(dòng)端網(wǎng)頁。2.2后端技術(shù)2.2.1SpringBootSpringBoot是Java框架，是所有基于Spring開發(fā)項(xiàng)目的起點(diǎn)。SpringBoot的設(shè)計(jì)是為了讓你盡可能快的跑起來,Spring應(yīng)用程序盡可能減少你的配置文件REF_Ref27569\r\h[12]。和過往的Java后端開發(fā)框架相比較，SpringBoot功能更加全面和強(qiáng)大，整體性能更加穩(wěn)固以及強(qiáng)健，開發(fā)者可以將更多的時(shí)間分配到具體業(yè)務(wù)系統(tǒng)的開發(fā)中REF_Ref27618\r\h[13]。2.2.2Vue框架Vue是一款用于構(gòu)建前端界面JavaScript框架。與其它前端框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。對(duì)于開發(fā)者來說，Vue可以更好地管理和組織代碼REF_Ref27670\r\h[14]。2.3MySQL數(shù)據(jù)庫MySQL是一個(gè)開放源碼的小型關(guān)聯(lián)式數(shù)據(jù)庫管理系統(tǒng)。由于其體積小、運(yùn)行速度快、低成本，尤其是開放源碼這一特點(diǎn)，MySQL被中小型網(wǎng)站廣泛應(yīng)用。除此之外，MySQL是一款完全免費(fèi)數(shù)據(jù)庫管理系統(tǒng)，開發(fā)者在使用MySQL時(shí)不需要支付任何費(fèi)用，大大降低了開發(fā)成本REF_Ref27716\r\h[15]。3需求分析及概要設(shè)計(jì)3.1需求分析需求分析是開發(fā)人員經(jīng)過深入細(xì)致的調(diào)研和分析，準(zhǔn)確理解用戶和項(xiàng)目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉(zhuǎn)化為完整的需求定義，從而確定系統(tǒng)必須做什么的過程。通過對(duì)三圣花鄉(xiāng)民宿管理員及其目標(biāo)用戶群體調(diào)研可知，普通民宿顧客和民宿管理員主要有如下需求。3.1.1用戶端需求分析作為顧客，希望“棲花尋夢(mèng)”民宿能夠?qū)崿F(xiàn)登錄、注冊(cè)、查詢房間、篩選房間、查看房間的詳細(xì)信息、查看提交訂單、查看圖集、查看發(fā)布評(píng)價(jià)、查看公告等一系列功能。顧客用戶故事如REF_Ref23264\h表3-1所示：表3-SEQ表\*ARABIC\s11作為顧客的用戶故事表優(yōu)先級(jí)名稱用戶故事描述1瀏覽、查詢房間作為一名顧客，想預(yù)訂民宿的房間時(shí)，希望根據(jù)時(shí)間區(qū)間去篩選房間信息、查看房間信息2查看訂單作為一名顧客，在訂房或退房后，想知道并保留這個(gè)訂單的詳細(xì)信息3查看、發(fā)布評(píng)論作為一名顧客，想知道這個(gè)民宿相關(guān)評(píng)論并發(fā)表自己的住宿感受4查看圖集作為一名顧客，希望可以查看這個(gè)民宿所有圖集照片信息5選擇入住時(shí)間作為一名顧客，希望決定入住的時(shí)間6查看公告作為一名顧客，希望知道這個(gè)民宿相關(guān)公告7查看房間詳細(xì)信息作為一名顧客，想預(yù)訂這個(gè)房間時(shí)，希望能看到這個(gè)房間的詳細(xì)信息3.1.2管理端需求分析作為管理員，希望能夠登錄、查詢房間、添加房間、編輯房間、刪除房間、查看訂單、修改訂單狀態(tài)、管理圖集、管理評(píng)價(jià)、發(fā)布公告信息，瀏覽用戶列表等一系列功能。管理員用戶故事如REF_Ref23701\h表3-2所示：表3-SEQ表\*ARABIC\s12作為管理員的用戶故事表優(yōu)先級(jí)名稱用戶故事描述1查詢、篩選房間作為一名管理員，希望能快速查詢房間，根據(jù)上架、下架狀態(tài)篩選房間，瀏覽房間列表和信息2添加房間作為一名管理員，希望能添加新的房間3房間信息及狀態(tài)修改作為一名管理員，希望能修改房間的信息，更改房間的狀態(tài)為上架或下架4刪除房間作為一管理員，希望能刪除無用的房間5查詢、篩選訂單作為一名管理員，希望能瀏覽訂單列表和信息，查詢訂單，根據(jù)訂單狀態(tài)篩選訂單6修改訂單狀態(tài)作為一名管理員，希望能修改訂單狀態(tài)為已入住，已取消7查看、編輯圖集作為一名管理員，希望能查看圖集并編輯圖集8添加圖集作為一名管理員，希望能添加新的圖集9刪除圖集作為一名管理員，希望刪除不要的圖集10查詢、瀏覽評(píng)論作為一名管理員，希望快速查詢?cè)u(píng)論，瀏覽評(píng)論11刪除評(píng)論作為一名管理員，希望能刪除不當(dāng)?shù)脑u(píng)論12發(fā)布公告作為一名管理員，希望能發(fā)布新的公告，并將公告置頂15瀏覽用戶列表作為一名管理員，希望能查看用戶列表及信息3.2可行性分析3.2.1經(jīng)濟(jì)可行性硬件方面，科技飛速發(fā)展的今天，硬件更新的速度越來越快，容量越來越大，可靠性越來越高，價(jià)格也越來越低。3.2.2技術(shù)可行性3.3系統(tǒng)功能結(jié)構(gòu)3.3.1前臺(tái)功能結(jié)構(gòu)前臺(tái)是面向使用民宿預(yù)訂系統(tǒng)的用戶，涉及到了用戶在使用小程序時(shí)可能使用到的各種功能，該系統(tǒng)功能主要分為瀏覽圖集、瀏覽公告、瀏覽房間、預(yù)定房間、個(gè)人信息管理、個(gè)人訂單管理、個(gè)人評(píng)價(jià)管理、發(fā)布評(píng)價(jià)等功能。詳細(xì)前臺(tái)功能結(jié)構(gòu)圖如REF_Ref2910\h圖3-1所示：圖3-SEQ圖\*ARABIC1前臺(tái)功能結(jié)構(gòu)圖3.3.2后臺(tái)功能結(jié)構(gòu)后臺(tái)是面向民宿預(yù)訂系統(tǒng)的管理員，包含管理員管理“棲花尋夢(mèng)”民宿預(yù)訂系統(tǒng)需要用到的各種功能，功能主要分為訂單管理、圖集管理、房間管理、評(píng)價(jià)管理、用戶管理、公告管理、瀏覽收益圖表等功能。詳細(xì)后臺(tái)功能結(jié)構(gòu)圖如REF_Ref3348\h圖3-2所示：圖3-SEQ圖\*ARABIC2后臺(tái)功能結(jié)構(gòu)圖4頁面內(nèi)容分析及頁面布局設(shè)計(jì)4.1頁面設(shè)計(jì)遵循的要素和原則在設(shè)計(jì)界面的時(shí)候，為了讓用戶無障礙的使用該小程序，使用的時(shí)候更加方便，一切的界面設(shè)計(jì)都遵循用戶的習(xí)慣所設(shè)計(jì)，都是從用戶的角度來設(shè)計(jì)制作界面。除此以外，界面的結(jié)構(gòu)簡(jiǎn)單直觀，界面的功能一目了然，導(dǎo)航和按鈕醒目，用戶可以快速找到他們需要的內(nèi)容，用戶使用起來更簡(jiǎn)便快捷，而且減少了用戶在使用的過程中可能出現(xiàn)的錯(cuò)誤。從美觀的角度來看，該小程序統(tǒng)一了界面的風(fēng)格，所有的界面結(jié)構(gòu)清晰一致，排列有序，提升了用戶的視覺體驗(yàn)和使用簡(jiǎn)便度。小程序的界面設(shè)計(jì)簡(jiǎn)潔而優(yōu)雅，在顏色選擇方面，以暖白色為主色調(diào)，輔以橙黃色點(diǎn)綴，營造出一種活力而富有生命力的氛圍。圖標(biāo)設(shè)計(jì)采用了中國古典顏色中的標(biāo)志性絳紅色，彰顯了歷史的藝術(shù)價(jià)值，并且符合品牌的風(fēng)格。圖4-SEQ圖\*ARABIC\s11主要采用的色彩圖表4-SEQ表\*ARABIC\s11系統(tǒng)使用的主要字體字號(hào)字號(hào)字重屬性應(yīng)用場(chǎng)景13ptMED微軟雅黑一級(jí)標(biāo)題11ptMED微軟雅黑二級(jí)標(biāo)題10.5ptREG微軟雅黑三級(jí)標(biāo)題9ptREG微軟雅黑正文圖4-SEQ圖\*ARABIC\s12小程序圖標(biāo)4.2頁面內(nèi)容分析及布局設(shè)計(jì)4.2.1首頁頁面及布局首頁從上到下共包含6個(gè)區(qū)域：第一區(qū)域：封面圖。展示棲花尋夢(mèng)民宿的環(huán)境，單張圖片，不可滑動(dòng)。第二區(qū)域：民宿公告。用于通知關(guān)于民宿的信息。第三區(qū)域：位置及聯(lián)系電話。展示酒店位置和當(dāng)前位置，以及民宿聯(lián)系電話第四區(qū)域：民宿設(shè)施信息。展示民宿具體配備設(shè)施，其中具體設(shè)備內(nèi)容有：停車場(chǎng)、早餐、冷暖空調(diào)、電視機(jī)、打掃服務(wù)、wifi等，可左滑。第五區(qū)域：入住和退房時(shí)間選擇。用戶可以點(diǎn)擊功能面板，彈出下拉框自住選擇入住和退房時(shí)間。第六區(qū)域：房間列表面板。每個(gè)房間包含房間圖片、房間數(shù)量、房間價(jià)格和預(yù)定按鈕，點(diǎn)擊預(yù)訂按鈕鏈接到預(yù)訂頁面。首頁界面原型如REF_Ref17111\h圖4-3所示：圖4-SEQ圖\*ARABIC\s13首頁界面原型布局圖4.2.2預(yù)定頁面內(nèi)容及布局房間預(yù)訂頁面從上到下共包含5個(gè)區(qū)域：第一區(qū)域：房間信息欄。房間信息包含房間類型、床位數(shù)量、房間設(shè)施。第二區(qū)域：日期信息欄。包含入住日期和離店日期。第三區(qū)域：顧客信息填寫欄。包含顧客姓名和顧客手機(jī)號(hào)，填寫顧客姓名和顧客手機(jī)號(hào)。第四區(qū)域：備注欄。在備注輸入框中可寫入顧客備注內(nèi)容。第五區(qū)域：金額計(jì)算及提交訂單欄。左側(cè)為應(yīng)付金額，右側(cè)為提交訂單按鈕，點(diǎn)擊提交訂單。預(yù)訂頁面界面原型圖布局如REF_Ref29875\h圖4-4所示：圖4-SEQ圖\*ARABIC\s14預(yù)訂頁面界面原型布局圖4.2.3我的訂單頁面內(nèi)容及布局我的訂單頁面從上到下共包含3個(gè)區(qū)域：第一區(qū)域：搜索欄。從左到右以此是搜索圖標(biāo)，輸入框，搜索按鈕。在輸入框輸入訂單編號(hào)，點(diǎn)擊搜索按鈕即可搜索相關(guān)訂單。第二區(qū)域：文字菜單。從左到右分為五個(gè)部分，分別是“全部”、“預(yù)定中”、“已預(yù)訂”、“已完成”、“已取消”，點(diǎn)擊相關(guān)文字，篩選出的結(jié)果顯示在第三區(qū)域。第三區(qū)域：訂單列表。每個(gè)訂單分為3個(gè)部分，第一部分為訂單狀態(tài)欄，包含訂單編號(hào)、訂單金額、顧客名字和號(hào)碼，以及折疊按鈕，點(diǎn)擊展開和折疊訂單。第二部分為訂單詳細(xì)信息欄，從上到下依次為“訂單備注”、“入住時(shí)間”、“結(jié)束時(shí)間”、“下單時(shí)間”，以及預(yù)訂中的訂單有取消按鈕。第三部分為房間信息，房間信息包含房間圖片、房間名稱、房間價(jià)格。我的訂單頁面界面原型圖布局如REF_Ref30078\h圖4-5所示：圖4-SEQ圖\*ARABIC\s15我的訂單頁面界面原型布局圖4.2.4評(píng)價(jià)頁面內(nèi)容及布局評(píng)價(jià)頁面從上到下共包含2個(gè)區(qū)域：第一區(qū)域：用戶評(píng)價(jià)展示列表。每個(gè)評(píng)價(jià)展示包含用戶頭像、用戶名稱、用戶星級(jí)評(píng)分、用戶文字評(píng)價(jià)、用戶評(píng)價(jià)時(shí)間。第二區(qū)域：填寫評(píng)價(jià)圖標(biāo)按鈕。點(diǎn)擊按鈕彈出填寫評(píng)價(jià)彈窗。評(píng)價(jià)頁面界面原型圖布局如REF_Ref30218\h圖4-6所示：圖4-SEQ圖\*ARABIC\s16評(píng)價(jià)頁面界面原型布局圖填寫評(píng)價(jià)彈窗從上到下依次是：“發(fā)布評(píng)價(jià)標(biāo)題”、星級(jí)評(píng)分（可點(diǎn)亮點(diǎn)滅）、評(píng)價(jià)內(nèi)容輸入框、“取消”、“確認(rèn)”按鈕。填寫評(píng)價(jià)彈窗界面原型圖布局如REF_Ref30649\h圖4-7所示：圖4-SEQ圖\*ARABIC\s17填寫評(píng)價(jià)彈窗界面原型布局圖4.2.5圖集頁面內(nèi)容及布局圖集頁面包含兩個(gè)圖集列表，從左到右分布，每個(gè)圖集列表從上到下分布，點(diǎn)擊圖集可查看大圖。圖集頁面界面原型圖布局如REF_Ref30731\h圖4-8所示：圖4-SEQ圖\*ARABIC\s18圖集頁面界面原型布局圖4.2.6我的頁面內(nèi)容及布局我的頁面從上到下共包含2個(gè)區(qū)域：第一區(qū)域：個(gè)人信息展示。個(gè)人信息展示包含用戶頭像和用戶昵稱，點(diǎn)擊彈出個(gè)人信息修改彈窗。第二區(qū)域：圖標(biāo)菜單。包含三個(gè)圖標(biāo)菜單，從左到右依次為“我的訂單”、“我的評(píng)價(jià)”、“退出登錄”，點(diǎn)擊“我的訂單”、“我的評(píng)價(jià)”圖標(biāo)跳轉(zhuǎn)到相應(yīng)的頁面，點(diǎn)擊“退出登錄”實(shí)現(xiàn)相應(yīng)功能。我的頁面界面原型圖布局如REF_Ref30848\h圖4-9所示：圖4-SEQ圖\*ARABIC\s19我的頁面界面原型布局圖個(gè)人信息修改彈窗從上到下共包含3個(gè)部分，第一部分為“個(gè)人信息”標(biāo)題，第二部分包含5行，從上到下依次為“用戶頭像”、“用戶昵稱”、“用戶密碼”、“手機(jī)號(hào)碼”、“用戶性別”。點(diǎn)擊頭像可更換圖片，二到四行可以輸入更改，用戶性別點(diǎn)擊單選框更改。第三部分為“取消”、“確認(rèn)”按鈕。個(gè)人信息修改界面原型圖布局如REF_Ref31031\h圖4-10所示：圖4-SEQ圖\*ARABIC\s110個(gè)人信息修改彈窗界面原型布局圖4.3后臺(tái)頁面分析及頁面布局設(shè)計(jì)4.3.1首頁內(nèi)容及布局首頁頁面由側(cè)邊導(dǎo)航欄、管理員個(gè)人信息面板、預(yù)定中/已入住訂單占比、用戶數(shù)統(tǒng)計(jì)、房間數(shù)統(tǒng)計(jì)、訂單數(shù)統(tǒng)計(jì)、公告欄、近五天預(yù)訂中訂單數(shù)和已入住訂單數(shù)可視圖表組成。管理員查看不同的后臺(tái)頁面后，會(huì)在歷史記錄導(dǎo)航欄形成歷史記錄，管理員可以點(diǎn)擊歷史記錄導(dǎo)航欄回到之前查看過的后臺(tái)頁面。首頁頁面界面原型布局如所REF_Ref7917\h圖4-11所示：圖4-SEQ圖\*ARABIC\s111后臺(tái)頁面界面原型布局圖4.3.2公告列表頁面內(nèi)容及布局公告列表主體部分由歷史記錄導(dǎo)航欄、添加按鈕、搜索框、列表表頭、列表內(nèi)容、分頁導(dǎo)航組成。點(diǎn)擊添加按鈕可以添加新的公告。在搜索框輸入公告內(nèi)容后，會(huì)快速檢索出對(duì)應(yīng)的公告。列表表頭包括：公告編號(hào)、公告內(nèi)容、公告所屬用戶、是否置頂、發(fā)布時(shí)間、操作。列表內(nèi)容是表頭的具體內(nèi)容，點(diǎn)擊編輯按鈕可以對(duì)內(nèi)容進(jìn)行編輯，點(diǎn)擊刪除按鈕可以刪除公告。公告列表頁界面原型圖布局如REF_Ref11989\h圖4-12所示：圖4-SEQ圖\*ARABIC\s112公告列表頁界面原型布局圖4.3.3房間列表頁面內(nèi)容及布局房間列表主體內(nèi)容包括歷史記錄導(dǎo)航欄，添加按鈕，篩選下拉框按鈕、搜索框、列表表頭、列表內(nèi)容、分頁導(dǎo)航組成。點(diǎn)擊添加按鈕彈出彈窗，即可添加新的房間。在搜索框輸入房間房型即可快速檢索房間。列表表頭包括：房間編號(hào)、房間房型、房間圖片、房間床位、房間數(shù)量、房間價(jià)格（元/天）、房間狀態(tài)、房間設(shè)施、操作，列表內(nèi)容是表頭的具體內(nèi)容，點(diǎn)擊編輯按鈕可以對(duì)房間進(jìn)行編輯，點(diǎn)擊刪除按鈕可以刪除房間。房間列表頁界面原型圖如REF_Ref28040\h圖4-13所示：圖4-SEQ圖\*ARABIC\s113房間列表頁界面原型布局圖4.4主要頁面之間的關(guān)系用戶從首頁進(jìn)去，在首頁，用戶可以選擇入店日期和離店日期、撥打客服電話，點(diǎn)擊房間列表的預(yù)定按鈕，可以跳轉(zhuǎn)預(yù)訂頁面，填寫個(gè)人信息后，即可提交訂單，完成預(yù)訂房間流程。其次，從首頁可以跳轉(zhuǎn)圖集、評(píng)價(jià)、我的頁面，完成其他功能的流程。該小程序主要頁面之間的關(guān)系圖如REF_Ref17438\h圖4-14所示：圖4-SEQ圖\*ARABIC\s114主要頁面之間的關(guān)系5數(shù)據(jù)庫設(shè)計(jì)5.1系統(tǒng)E-R圖5.1.1訂單管理E-R模型在小程序中擁有房間預(yù)訂功能。其中一個(gè)用戶（圖中為用戶實(shí)體）可以支付多個(gè)訂單。一個(gè)訂單只能被一個(gè)用戶支付。所以用戶和訂單存在一對(duì)多的關(guān)系。管理員（圖中為用戶實(shí)體）可以管理訂單，一個(gè)管理員可以管理多個(gè)訂單，一個(gè)訂單可以被多個(gè)管理員管理，所以管理員和訂單存在多對(duì)多的關(guān)系，如REF_Ref2592\h圖5-1所示：圖5-SEQ圖\*ARABIC\s11訂單管理E-R模型5.1.2圖集管理E-R模型后臺(tái)管理員（圖中為用戶實(shí)體）可以對(duì)圖集進(jìn)行管理。一個(gè)圖集可以被多個(gè)管理員管理，一個(gè)管理員可以管理多個(gè)用戶。所以管理員和圖集之間存在多對(duì)多的關(guān)系，如REF_Ref2660\h圖5-2所示：圖5-SEQ圖\*ARABIC\s12圖集管理E-R模型5.1.3公告管理E-R模型后臺(tái)管理員（圖中為用戶實(shí)體）可以對(duì)公告進(jìn)行添加、編輯、刪除管理。一個(gè)公告可以被多個(gè)管理員添加、編輯、刪除管理，一個(gè)管理員可以添加、編輯、刪除管理多個(gè)公告。所以管理員和公告之間存在多對(duì)多的關(guān)系，如REF_Ref15138\h圖5-3所示：圖5-SEQ圖\*ARABIC\s13公告管理E-R模型5.1.4評(píng)價(jià)管理E-R模型后臺(tái)管理員（圖中為用戶實(shí)體）可以對(duì)評(píng)價(jià)進(jìn)行刪除管理，一條評(píng)價(jià)可以被多個(gè)管理員刪除管理，一個(gè)管理員可以刪除管理多條評(píng)價(jià)。所以管理員和評(píng)價(jià)之間存在多對(duì)多的關(guān)系，一個(gè)用戶（圖中為用戶實(shí)體）可以發(fā)表多條評(píng)價(jià)，一條評(píng)價(jià)只能被一個(gè)用戶發(fā)表。多以用戶和評(píng)價(jià)之間存在一對(duì)多的關(guān)系。如REF_Ref17669\h圖5-4所示：圖5-SEQ圖\*ARABIC\s14評(píng)價(jià)管理E-R模型5.1.5房間管理E-R模型后臺(tái)管理員（圖中為用戶實(shí)體）可以對(duì)房間進(jìn)行添加、編輯、刪除管理。一個(gè)房間可以被多個(gè)管理員添加、編輯、刪除管理，一個(gè)管理員可以添加、編輯、刪除管理多個(gè)房間。所以管理員和房間之間存在多對(duì)多的關(guān)系，一個(gè)房間可以被一個(gè)用戶（圖中為用戶實(shí)體）預(yù)訂，一個(gè)用戶可以預(yù)訂多個(gè)房間，所以用戶和房間之間存在一對(duì)多的關(guān)系。如REF_Ref18929\h圖5-5所示：圖5-SEQ圖\*ARABIC\s15房間管理E-R模型5.2數(shù)據(jù)庫表設(shè)計(jì)本小程序共設(shè)計(jì)6張數(shù)據(jù)表，包含用戶表、圖集表、評(píng)價(jià)表、公告表、房間表、訂單表。小程序各個(gè)數(shù)據(jù)表詳細(xì)字段名稱、數(shù)據(jù)類型及注釋如下：用戶表包括普通用戶和管理員兩種角色，其中包括id（用戶id）、username（用戶昵稱）、head_pic（用戶系統(tǒng)頭像）、password（用戶密碼）、phone（用戶手機(jī)號(hào)碼）、role_id（用戶角色）、sex（用戶性別）、wx_id（用戶微信openId）、wx_head_pic（用戶微信頭像）、wx_username（用戶微信昵稱），用戶表物理結(jié)構(gòu)如REF_Ref15848\h表5-1所示：表5-SEQ表\*ARABIC\s11用戶表字段名類型特殊要求相關(guān)說明注釋idchar(8)非空，系統(tǒng)自動(dòng)增長主鍵用戶idusernamevarchar(512)非空用戶昵稱head_picvarchar(512)非空用戶系統(tǒng)頭像passwordvarchar(16)非空用戶密碼phonechar(11)非空用戶手機(jī)號(hào)碼role_idchar(8)非空1：普通用戶；2：管理員用戶角色sexint(2)非空1：男；2：女；3：未知用戶性別wx_idvarchar(128)非空用戶微信openIdwx_head_picvarchar(512)非空用戶微信頭像wx_usernamevarchar(512)非空用戶微信昵稱圖集表用來存放民宿圖集圖片，其中包括id（圖集id）、photo（民宿圖片）、create_time（圖片上傳時(shí)間），其中圖集id設(shè)為主鍵自動(dòng)遞增。圖集表物理結(jié)構(gòu)如REF_Ref32385\h表5-2所示：表5-SEQ表\*ARABIC\s12圖集表字段名類型特殊要求相關(guān)說明注釋idchar(8)非空，自動(dòng)增長主鍵圖集idphotovarchar(512)非空民宿圖片create_timedatetime非空?qǐng)D片上傳時(shí)間評(píng)價(jià)表用來存放用戶的評(píng)價(jià)信息，其中包括id（地址id）、rate（評(píng)分）、content（評(píng)價(jià)內(nèi)容）、create_time（評(píng)價(jià)時(shí)間）、user_id（評(píng)價(jià)所屬用戶id），其中地址id設(shè)為主鍵自動(dòng)遞增。評(píng)價(jià)表物理結(jié)構(gòu)如REF_Ref470\h表5-3所示：表5-SEQ表\*ARABIC\s13評(píng)價(jià)表字段名類型特殊要求相關(guān)說明注釋idchar(8)非空，自動(dòng)增長主鍵地址idrateint(2)非空評(píng)分contentvarchar(256)非空評(píng)價(jià)內(nèi)容create_timedatetime非空評(píng)價(jià)時(shí)間user_idchar(8)非空評(píng)價(jià)所屬用戶id公告表用來存放管理員的公告信息，其中包括id（公告id）、content（公告內(nèi)容）、user_id（公告所屬用戶id）、create_time（發(fā)布時(shí)間）、top（是否置頂），其中公告id設(shè)為主鍵自動(dòng)增長，公告表物理結(jié)構(gòu)如REF_Ref1279\h表5-4所示：表5-SEQ表\*ARABIC\s14公告表字段名類型特殊要求相關(guān)說明注釋idchar(8)非空，自動(dòng)增長主鍵公告idcontentvarchar(256)非空公告內(nèi)容user_idchar(8)非空公告所屬用戶idcreate_timedatetime非空發(fā)布時(shí)間topint(2)非空1：否；2：是是否置頂房間表用來存放民宿房間信息。其中包含id（房間id）、num（房間數(shù)量）、type（房間房型）、location（房間床位）、sanitation（房間設(shè)施）、price（房間價(jià)格）、photo（房間圖片）、state（房間狀態(tài)）、version（版本號(hào)），其中房間id設(shè)為主鍵自動(dòng)增長。房間表物理結(jié)構(gòu)如REF_Ref2403\h表5-5所示：表5-SEQ表\*ARABIC\s15房間表字段名類型特殊要求相關(guān)說明注釋idchar(8)非空，自動(dòng)增長主鍵房間idnumint(2)非空房間數(shù)量typevarchar(16)非空房間房型locationint(2)非空房間床位sanitationvarchar(512)非空房間設(shè)施pricedecimal(10,2)非空天房間價(jià)格photovarchar(512)非空房間圖片stateint(2)非空1：已上架；2：已下架房間狀態(tài)versionint(2)非空樂觀鎖控制超賣版本號(hào)訂單表用于存放用戶的訂單信息，其中包括id（訂單id）、start_date（入住時(shí)間）、end_date（結(jié)束時(shí)間）、state（訂單狀態(tài)）、num（預(yù)訂房間數(shù)量）、user_id（訂單所屬用戶id）、total_price（訂單總價(jià)）、room_id（訂單所屬房間id）、room_type（訂單所屬房間房型）、room_price（訂單所屬房間價(jià)格）、room_photo（訂單所屬房間圖片）、remark（訂單備注）、create_time（創(chuàng)建時(shí)間）、guest_name（顧客姓名）、guest_phone（顧客手機(jī)號(hào)），其中訂單id設(shè)為主鍵自動(dòng)遞增。訂單表物理結(jié)構(gòu)如REF_Ref4081\h表5-6所示：表5-SEQ表\*ARABIC\s16訂單表字段名類型特殊要求相關(guān)說明注釋idchar(8)非空，自動(dòng)增長主鍵訂單idstart_datedate非空入住時(shí)間end_datedate非空結(jié)束時(shí)間stateint(2)非空1：預(yù)訂中；2：已入??；3：已完成；4：已取消訂單狀態(tài)numint(2)非空預(yù)訂房間數(shù)量user_idchar(8)非空訂單所屬用戶idtotal_pricedecimal(10,2)非空訂單總價(jià)room_idchar(8)非空訂單所屬房間idroom_typevarchar(16)非空訂單所屬房間房型room_pricedecimal(10,2)非空訂單所屬房間價(jià)格room_photovarchar(512)非空訂單所屬房間圖片remarkvarchar(128)非空訂單備注create_timedatetime非空創(chuàng)建時(shí)間guest_namevarchar(16)非空顧客姓名guest_phonechar(11)非空顧客手機(jī)號(hào)6系統(tǒng)功能實(shí)現(xiàn)6.1前臺(tái)頁面效果及功能實(shí)現(xiàn)6.1.1首頁功能實(shí)現(xiàn)用戶可以在首頁看到這個(gè)民宿設(shè)備、地址信息，每個(gè)房間的信息，公告信息；用戶加載頁面時(shí)會(huì)自動(dòng)獲取用戶當(dāng)前位置。點(diǎn)擊電話圖標(biāo)會(huì)彈出民宿聯(lián)系電話，點(diǎn)擊入住和退房時(shí)間選擇器可以選擇日期，在用戶登錄的狀態(tài)下，點(diǎn)擊每個(gè)房間對(duì)應(yīng)的預(yù)定按鈕彈出預(yù)訂頁面，否則會(huì)彈出“請(qǐng)先登錄”的提醒彈窗。首頁運(yùn)行效果如REF_Ref31407\h圖6-1所示：圖6-SEQ圖\*ARABIC\s11首頁運(yùn)行圖首頁功能小程序關(guān)鍵代碼如下：//獲取房間數(shù)據(jù)getRoomList:asyncfunction(){constres=awaitmyRequest({url:api.BASE_URL+"/app/room/list",method:"POST",data:{startDate:this.data.startDate.date,endDate:this.data.endDate.date}});},6.1.2日期選擇功能用戶點(diǎn)擊入住或退房日期選擇欄，界面下方會(huì)彈出對(duì)應(yīng)的入住和退房日期選擇框，滑動(dòng)年月日選擇器，即可選擇指定的日期。進(jìn)入小程序，入住日期默認(rèn)為今天的日期，并且設(shè)定退房日期不大于入住日期，最后入住和退房之間的天數(shù)會(huì)計(jì)算并顯示在界面上，以及入住和退房的日期，當(dāng)天是星期幾都會(huì)顯示在界面上。運(yùn)行效果如REF_Ref4024\h圖6-2所示：圖6-SEQ圖\*ARABIC\s12日期選擇運(yùn)行圖日期選擇功能小程序關(guān)鍵代碼如下：//結(jié)束日期選擇回調(diào)endDateChange:function(e){letendDate=e.detail.value;letendArray=endDate.split("-");letendYear=endArray[0];letendDay=endArray[2];letendMonth=endArray[1];letendWeek=this.getWeekday(newDate(endYear,endMonth,endDay).getDay());letstartDate=moment(this.data.startDate.date);letdiffDay=moment(endDate).diff(startDate,"days");this.setData({endDate:{day:endDay,year:endYear,month:endMonth,week:endWeek,date:endDate,yesterday:moment(endDate).subtract(1,"day").format("YYYY-MM-DD")},dayGap:diffDay},()=>{this.getRoomList();})},6.1.3圖集頁面功能實(shí)現(xiàn)用戶點(diǎn)擊跳轉(zhuǎn)到圖集頁，可以在圖集頁面看到“棲花尋夢(mèng)”民宿的相關(guān)圖片，包括房間內(nèi)部圖，窗外風(fēng)景圖，房間設(shè)施圖，餐桌圖等等，點(diǎn)擊圖片即可跳轉(zhuǎn)查看大圖。運(yùn)行效果如REF_Ref32728\h圖6-3所示：圖6-SEQ圖\*ARABIC\s13圖集頁面運(yùn)行圖修改用戶信息功能小程序關(guān)鍵代碼如下：//獲取圖集數(shù)據(jù)getAtlasList:asyncfunction(){constres=awaitmyRequest({url:api.BASE_URL+"/app/atlas/all",method:"POST",data:{paging:0}});}6.1.4預(yù)訂頁面功能實(shí)現(xiàn)在預(yù)定頁面，用戶可以在此頁面可以看到房間的詳細(xì)信息，入住退房時(shí)間，并且可以填寫顧客信息，填寫備注。用戶在填寫訂單的過程中，備注可以不用填寫，但是標(biāo)有*號(hào)的信息必須填寫，否則小程序會(huì)在輸入框下方顯示“顧客姓名不能為空”，“顧客手機(jī)號(hào)不能為空”的紅色字樣，并且顧客手機(jī)號(hào)碼長度必須正確，否則會(huì)出現(xiàn)“請(qǐng)輸入11位顧客手機(jī)號(hào)碼”的彈窗，只有填寫正確有效的顧客詳細(xì)信息才能提交成功，另外，小程序會(huì)根據(jù)入住天數(shù)和房間價(jià)格計(jì)算總共金額顯示在頁面下方。預(yù)訂頁面運(yùn)行效果如REF_Ref584\h圖6-4所示：圖6-SEQ圖\*ARABIC\s14預(yù)訂頁面運(yùn)行圖預(yù)訂頁面功能小程序關(guān)鍵代碼如下：//輸入框內(nèi)容變化的回調(diào)onChangeField:function(e){lettype=e.target.dataset.type;this.setData({orderParam:{...this.data.orderParam,[type]:e.detail}})},6.1.5我的訂單頁面功能實(shí)現(xiàn)用戶可以在我的訂單頁面查看自己的訂單信息，也可以根據(jù)訂單編號(hào)查找訂單，或者通過訂單的狀態(tài)來篩選訂單，在訂單處于預(yù)定中的狀態(tài)時(shí)，用戶可以點(diǎn)擊取消按鈕取消訂單。另外，點(diǎn)擊箭頭可以折疊或者展開訂單。我的訂單頁面效果運(yùn)行如REF_Ref12891\h圖6-5所示：圖6-SEQ圖\*ARABIC\s15我的訂單頁面運(yùn)行圖我的訂單訂單功能小程序關(guān)鍵代碼如下：//查詢框內(nèi)容改變回調(diào)onChangeSarch:function(e){this.setData({searchContent:e.detail});},6.1.6評(píng)價(jià)頁面功能實(shí)現(xiàn)用戶可以在評(píng)價(jià)頁面看到每個(gè)用戶的評(píng)價(jià)信息，用戶在登錄狀態(tài)下，點(diǎn)擊發(fā)布評(píng)價(jià)圖標(biāo)彈出彈窗，可以發(fā)布評(píng)價(jià)信息。評(píng)價(jià)頁面運(yùn)行效果如REF_Ref18685\h圖6-6所示：圖6-SEQ圖\*ARABIC\s16評(píng)價(jià)頁面運(yùn)行圖圖6-SEQ圖\*ARABIC\s17評(píng)價(jià)頁面彈窗運(yùn)行圖評(píng)價(jià)頁面功能小程序關(guān)鍵代碼如下：//提交評(píng)價(jià)操作submitComment:asyncfunction(){if(this.authUser()){return;}constres=awaitmyRequest({url:api.BASE_URL+"/app/comment/submit",method:"POST",data:{...this.data.params,token:Cache.getCache(getApp().globalData.SESSION_KEY_LOGIN_USER)}});},6.2后臺(tái)頁面效果及功能實(shí)現(xiàn)6.2.1首頁管理員可以在后臺(tái)首頁看到個(gè)人該管理員的個(gè)人信息，訂單狀態(tài)占比的可視圖，用戶數(shù)，房間數(shù)和訂單數(shù)在統(tǒng)計(jì)面板也被直觀展現(xiàn)，在公告面板可以看到最新公告，在近五天預(yù)訂中訂單數(shù)和已入住訂單數(shù)可視表中直觀的看到相應(yīng)的訂單數(shù)占比。首頁運(yùn)行效果如REF_Ref6464\h圖6-8所示：圖6-SEQ圖\*ARABIC\s18首頁運(yùn)行圖首頁service層關(guān)鍵代碼如下：/***獲取房間總數(shù)*/@OverridepublicResponseDTO<Integer>getRoomTotal(){returnResponseDTO.success(roomMapper.countByExample(newRoomExample()));}6.2.2公告管理管理員可以在后臺(tái)對(duì)公告進(jìn)行添加、編輯或刪除公告，編輯公告不僅可以編輯公告內(nèi)容，還能決定公告是否置頂，如果公告置頂，用戶在前端就會(huì)看見這條置頂公告。公告管理運(yùn)行效果如REF_Ref24230\h圖6-9所示：圖6-SEQ圖\*ARABIC\s19公告管理運(yùn)行圖公告管理service層關(guān)鍵代碼如下：/***獲取置頂?shù)墓嫘畔?@return*/@OverridepublicResponseDTO<AnnounceDTO>getTopAnnounce(){AnnounceExampleannounceExample=newAnnounceExample();announceExample.createCriteria().andTopEqualTo(AnnounceTopEnum.YES.getCode());List<Announce>announceList=announceMapper.selectByExample(announceExample);if(announceList!=null&&announceList.size()>0){returnResponseDTO.success(CopyUtil.copy(announceList.get(0),AnnounceDTO.class));}returnResponseDTO.success(CopyUtil.copy(newAnnounce(),AnnounceDTO.class));}6.2.3用戶管理管理員在后臺(tái)可以看到用戶的信息，包括用戶id、用戶頭像、用戶昵稱等等，網(wǎng)站主界面整體結(jié)構(gòu)比較簡(jiǎn)單明了。管理員可以通過選擇用戶角色為普通用戶、管理員、全部三種選項(xiàng)對(duì)用戶進(jìn)行篩選，還可以通過搜索用戶昵稱對(duì)用戶進(jìn)行快速查找。另外，可以編輯用戶信息，更改用戶角色為普通用戶或者管理員，還可對(duì)用戶進(jìn)行刪除。用戶管理運(yùn)行效果如REF_Ref13084\h圖6-10所示：圖6-SEQ圖\*ARABIC\s110用戶管理運(yùn)行圖用戶管理service層關(guān)鍵代碼如下：/***獲取當(dāng)前登錄用戶*@paramtoken*@return*/@OverridepublicResponseDTO<UserDTO>getLoginUser(Stringtoken){if(CommonUtil.isEmpty(token)){returnResponseDTO.errorByMsg(CodeMsg.USER_SESSION_EXPIRED);}Stringvalue=stringRedisTemplate.opsForValue().get("USER_"+token);if(CommonUtil.isEmpty(value)){returnResponseDTO.errorByMsg(CodeMsg.USER_SESSION_EXPIRED);}UserDTOselectedUserDTO=JSON.parseObject(value,UserDTO.class);returnResponseDTO.success(CopyUtil.copy(userMapper.selectByPrimaryKey(selectedUserDTO.getId()),UserDTO.class));}6.2.4房間管理管理員在后臺(tái)可以看到房間列表，每個(gè)房間都包含房間編號(hào)、房間房型、房間數(shù)量、房間圖片、房間價(jià)格、房間狀態(tài)等等。管理員可以通過房間狀態(tài)已上架、已下架對(duì)房間進(jìn)行篩選，也可以根據(jù)房間房型快速查找房間。管理員可以通過“添加”按鈕來添加新的房間，點(diǎn)擊“編輯”彈出彈窗，可以編輯房間具體信息，點(diǎn)擊“刪除”即可刪除房間。小程序會(huì)根據(jù)房間訂單的時(shí)間更新房間余量。房間管理運(yùn)行效果如REF_Ref9861\h圖6-11所示：圖6-SEQ圖\*ARABIC\s111房間管理運(yùn)行圖圖6-SEQ圖\*ARABIC\s112房間管理彈窗運(yùn)行圖房間管理service層關(guān)鍵代碼如下：@OverridepublicResponseDTO<Integer>getRoomTotal(){returnResponseDTO.success(roomMapper.countByExample(newRoomExample()));}7功能測(cè)試7.1核心功能測(cè)試7.1.1房間預(yù)訂功能測(cè)試房間預(yù)定功能是用戶在登錄狀態(tài)選擇好房間類型和入住時(shí)間，填寫顧客姓名、正確格式的顧客號(hào)碼和備注（選填）點(diǎn)擊提交訂單按鈕后完成預(yù)訂并跳轉(zhuǎn)我的訂單頁面。此功能設(shè)計(jì)如下7個(gè)測(cè)試用例，具體如REF_Ref23263\h表7-1所示：表7-SEQ表\*ARABIC\s11房間預(yù)訂測(cè)試用例用例編號(hào)操作步驟預(yù)期結(jié)果1用戶未登錄，點(diǎn)擊預(yù)訂按鈕提示用戶登錄2用戶不輸入任何內(nèi)容，點(diǎn)擊提交訂單按鈕提示用戶輸入內(nèi)容3用戶輸入顧客姓名，不輸入顧客號(hào)碼，備注，點(diǎn)擊提交訂單按鈕提示用戶輸入手機(jī)號(hào)碼4用戶輸入顧客姓名，輸入不正確格式的顧客號(hào)碼，不輸入備注，點(diǎn)擊提交訂單按鈕提示用戶輸入正確格式的號(hào)碼5用戶輸入顧客姓名，輸入正確格式的顧客號(hào)碼，不輸入備注，點(diǎn)擊提交訂單按鈕預(yù)訂成功6用戶輸入顧客姓名，輸入正確格式的顧客號(hào)碼，輸入備注，點(diǎn)擊提交訂單按鈕預(yù)定成功7在預(yù)訂頁面不點(diǎn)提交訂單按鈕，直接返回返回上一頁面以用例1、3、4、5為例，房間預(yù)訂測(cè)試結(jié)果如REF_Ref25255\h表7-2所示：表7-SEQ表\*ARABIC\s12房間預(yù)訂測(cè)試結(jié)果測(cè)試點(diǎn)輸入輸出1用戶未登錄，點(diǎn)擊預(yù)訂按鈕提示“請(qǐng)先登錄”3用戶輸入姓名黃二，不輸入顧客號(hào)碼，備注，點(diǎn)擊提交訂單按鈕提示“請(qǐng)輸入11位顧客手機(jī)號(hào)！”4用戶輸入姓名黃二，輸入153896451785，不輸入備注，點(diǎn)擊提交訂單按鈕提示“請(qǐng)輸入11位顧客手機(jī)號(hào)！”5用戶輸入姓名黃二，輸不輸入備注，點(diǎn)擊提交訂單按鈕預(yù)定成功并跳轉(zhuǎn)我的訂單頁7.1.2登錄功能后臺(tái)登錄功能是管理員輸入正確的用戶昵稱、正確的用戶密碼和根據(jù)圖片提示填寫正確的驗(yàn)證碼后，點(diǎn)擊登錄按鈕后成功登錄并跳轉(zhuǎn)首頁。為本小程序后臺(tái)管理員登錄功能設(shè)置5個(gè)測(cè)試用例，具體如REF_Ref4968\h表7-3所示：表7-SEQ表\*ARABIC\s13登錄功能測(cè)試用例用例編號(hào)操作步驟預(yù)期結(jié)果1不輸入用戶昵稱、用戶密碼和驗(yàn)證碼中任意一項(xiàng)，點(diǎn)擊“登錄”按鈕。登錄不成功，提示輸入內(nèi)容2輸入不正確的用戶昵稱，輸入正確或不正確的用戶密碼，正確的驗(yàn)證碼登錄不成功，提示輸入內(nèi)容錯(cuò)誤3輸入正確的用戶昵稱，輸入正確或不正確的用戶密碼，正確的驗(yàn)證碼登錄不成功，提示輸入內(nèi)容錯(cuò)誤4輸入正確的昵稱，正確的用戶密碼，不正確的驗(yàn)證碼登錄不成功，提示輸入內(nèi)容錯(cuò)誤5輸入正確的昵稱，正確的用戶密碼，正確的驗(yàn)證碼成功登錄以用例1、2、3、4、5為例，測(cè)試數(shù)據(jù)為用戶昵稱：莫阿娜密碼：123456驗(yàn)證碼：4567，登錄功能測(cè)試結(jié)果如REF_Ref6734\h表7-4所示：表7-SEQ表\*ARABIC\s14登錄功能測(cè)試結(jié)果測(cè)試點(diǎn)輸入輸出1不輸入用戶昵稱或用戶密碼或驗(yàn)證碼，點(diǎn)擊“登錄”按鈕。登錄不成功，提示“請(qǐng)輸入用戶昵稱”，“請(qǐng)輸入用戶密碼”，“請(qǐng)輸入驗(yàn)證碼”2用戶昵稱輸入xxx，用戶密碼輸入123456或11111，驗(yàn)證碼輸入4567登錄不成功，提示“用戶昵稱或密碼錯(cuò)誤”3用戶昵稱輸入莫阿娜，用戶密碼輸入123456或11111，驗(yàn)證碼輸入4567登錄不成功，提示“用戶昵稱或密碼錯(cuò)誤”4用戶昵稱輸入莫阿娜，用戶密碼輸入123456，驗(yàn)證碼輸入1111登錄不成功，提示“驗(yàn)證碼錯(cuò)誤”5用戶昵稱輸入莫阿娜，用戶密碼輸入123456，驗(yàn)證碼輸入4567成功登錄并跳轉(zhuǎn)到首頁7.1.3添加房間功能測(cè)試后臺(tái)房間管理頁面點(diǎn)擊“添加”按鈕可以添加房間。添加房間需要設(shè)置房間房型，上傳房間圖片，設(shè)置房間床位、房間數(shù)量、房間價(jià)格、房間狀態(tài)、房間設(shè)施。其中房間房型，房間圖片、房間設(shè)施為必選項(xiàng)，房間床位、房間數(shù)量、房間價(jià)格、房間狀態(tài)默認(rèn)值為1、1、0.00、已上架，為選填項(xiàng)。其中房間照片只能上傳一張，最后點(diǎn)擊“確定”按鈕就可添加房間。為添加房間功能設(shè)置5個(gè)測(cè)試用例，具體如REF_Ref10154\h表7-5所