PAGEI基于Vue框架的重點(diǎn)大學(xué)游學(xué)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)摘要目前，越來越多的人開始重視學(xué)習(xí)問題，許多家長傾向于在其子女升學(xué)的關(guān)鍵時(shí)期進(jìn)行重點(diǎn)大學(xué)的參觀安排，一個(gè)重點(diǎn)大學(xué)游學(xué)系統(tǒng)的建立，有利于平衡公眾參觀需求和校園管理的壓力，實(shí)現(xiàn)動(dòng)態(tài)的參觀名額分配，同時(shí)提升社會(huì)效益和教育資源的共享。該系統(tǒng)基于Vue框架，實(shí)現(xiàn)了用戶信息管理、大學(xué)信息管理、商品信息管理、大學(xué)評(píng)價(jià)、大學(xué)預(yù)約、商品購買、攻略分享等功能。為用戶獲取大學(xué)相關(guān)信息、進(jìn)行預(yù)約參觀的便利提供了一定的幫助。同時(shí)，系統(tǒng)還采用了Axios、Element-Ui等技術(shù)實(shí)現(xiàn)前端頁面的展示，利用MyBatis持久層框架和SpringBoot后端框架，使數(shù)據(jù)庫操作更加靈活和安全。綜上所述，該系統(tǒng)通過黑白盒測(cè)試保證了其穩(wěn)定性，并且其開發(fā)可以滿足用戶大學(xué)游學(xué)項(xiàng)目預(yù)約、大學(xué)文創(chuàng)產(chǎn)品購買的需求，一定程度上減少了用戶精力和時(shí)間的消耗，提供了良好的體驗(yàn)。關(guān)鍵詞：大學(xué)，游學(xué)系統(tǒng)，Vue，SpringBoot，MyBatisTheDesignandImplementationoftheStudyTourSystemforKeyUniversitiesBasedontheVueFrameworkABSTRACTAtpresent,moreandmorepeoplearebeginningtoattachimportancetotheissueoflearning.Manyparentstendtoarrangevisitstokeyuniversitiesduringthecrucialperiodoftheirchildren'scollegeentranceexamination.Theestablishmentofakeyuniversitystudytoursystemisconducivetobalancingthepublic'svisitdemandsandthepressureofcampusmanagement,achievingdynamicallocationofvisitquotas,andatthesametimeenhancingsocialbenefitsandthesharingofeducationalresources.ThissystemisbasedontheVueframeworksandrealizesfunctionssuchasuserinformationmanagement,universityinformationmanagement,commodityinformationmanagement,universityevaluation,universityreservation,commoditypurchase,andstrategysharing.Itprovidescertainassistanceforuserstoobtainrelevantinformationabouttheuniversityandmakeconvenientappointmentsforvisits.Meanwhile,thesystemalsoadoptstechnologiessuchasAxiosandElement-Uitorealizethedisplayoffront-endpages,andutilizestheMyBatispersistencelayerframeworkandSpringBootframeworktomakedatabaseoperationsmoreflexibleandsecure.Inconclusion,thesystemensuresitsstabilitythroughblackandwhiteboxtesting.Moreover,itsdevelopmentcanmeettheneedsofusersforreservinguniversitystudyToursandpurchasinguniversityculturalandcreativeproducts,reducingtheconsumptionofusers'energyandtimetoacertainextentandprovidingagoodexperience.Keywords:University,StudyTourSystems,Vue,Springboot,MyBatis第一章緒論本文首先介紹大學(xué)游學(xué)系統(tǒng)的功能結(jié)構(gòu)，通過對(duì)其功能模塊的分析，進(jìn)行一定的描述，主要包含開發(fā)背景、開發(fā)意義和相關(guān)現(xiàn)狀等等。1.1開發(fā)背景游學(xué)作為銜接教育和旅游的創(chuàng)新實(shí)踐形式，在政策引導(dǎo)和教育需求下快速發(fā)展，引發(fā)公眾關(guān)注。目前，通過對(duì)“教育+旅游”結(jié)合的游學(xué)活動(dòng)的開展，大學(xué)得以廣開教育大門，將圖書館、校史館等核心資源轉(zhuǎn)換為共享的公共資產(chǎn)，旨在為學(xué)生激發(fā)學(xué)習(xí)興趣、了解未來學(xué)習(xí)方向提供幫助。同時(shí)，其市場(chǎng)規(guī)模足夠龐大，中國的中小學(xué)生約為2.26億，越來越多的年輕父母愿意去關(guān)心孩子的身心健康和全面發(fā)展，對(duì)該模塊需求較大。總之，開展游學(xué)之旅有利于學(xué)生德智體美勞全方面的培養(yǎng)以及增強(qiáng)對(duì)社會(huì)主義核心價(jià)值觀的踐行，促進(jìn)其對(duì)社會(huì)的適應(yīng)REF_Ref7229\r\h[1]。然而，當(dāng)前大學(xué)資源開放的同時(shí)，面臨著資源分配不均、管理效率低等問題，傳統(tǒng)的人工管理模式更是難以應(yīng)對(duì)動(dòng)態(tài)人流和個(gè)性化的知識(shí)服務(wù)需求。由此，采用大學(xué)游學(xué)系統(tǒng)，以線上預(yù)約制為核心，結(jié)合大數(shù)據(jù)分析，優(yōu)化參觀時(shí)間分配和人流量的控制，調(diào)整放出的參觀名額，同時(shí)，讓使用者全面了解大學(xué)信息，針對(duì)院校特色資源進(jìn)行喜好的選擇，一定程度上減輕熱門高校的超負(fù)荷接待可能存在的安全隱患。線上預(yù)約，線下體驗(yàn)，參觀者身臨其境，感受大學(xué)環(huán)境所傳遞的努力價(jià)值，感受大學(xué)歷史建筑的承載的文化氣息，為未來學(xué)業(yè)路徑的規(guī)劃提供參考。1.2開發(fā)意義隨著研學(xué)旅行的概念提出，其在中國如火如荼的發(fā)展起來，不同的受眾群體，設(shè)計(jì)相應(yīng)的研學(xué)內(nèi)容，有益于進(jìn)行學(xué)生的素質(zhì)培養(yǎng)，包括知識(shí)、技能、價(jià)值觀等等，它是一次教育方式的創(chuàng)新，對(duì)教育空間進(jìn)行了拓展。而大學(xué)游學(xué)系統(tǒng)的開發(fā)，整合了大量的大學(xué)信息和與之相對(duì)應(yīng)的游學(xué)特色項(xiàng)目，加強(qiáng)了游學(xué)活動(dòng)的宣傳，鼓勵(lì)更多人了解和認(rèn)識(shí)其價(jià)值和意義REF_Ref7307\r\h[2]。1.3相關(guān)現(xiàn)狀近年來，我國游學(xué)市場(chǎng)迅速發(fā)展，其作為文旅融合發(fā)展催生的一種全新的教育方式，是一種以“學(xué)”為核心，以“游”為載體的體驗(yàn)過程，是以提升其服務(wù)對(duì)象綜合素質(zhì)為目而展開的一場(chǎng)活動(dòng)REF_Ref7336\r\h[3]。線上的大學(xué)游學(xué)預(yù)約平臺(tái)為用戶提供了更加全面的服務(wù)信息，比如大學(xué)和紀(jì)念品等，有效地加大了部分大學(xué)的傳播，讓用戶了解了更加多樣的大學(xué)信息，為名校進(jìn)行了一定的減流。在如今快速變化的現(xiàn)代社會(huì)中，大學(xué)作為培養(yǎng)高素質(zhì)技能型人才的重要陣地，承擔(dān)著提升學(xué)生創(chuàng)新精神與實(shí)踐能力的重任，但其傳統(tǒng)教學(xué)方式將重心放在理論知識(shí)的傳授。游學(xué)教育的推廣，挖掘了高校豐富且獨(dú)具特色的資源，以靈活多樣的組織形式激發(fā)學(xué)生的學(xué)習(xí)熱情。游學(xué)旅行的核心價(jià)值在于“游中學(xué)，行中悟”，其主要目的是讓學(xué)生平衡游和學(xué)的關(guān)系，在游中實(shí)踐，在學(xué)中接受知識(shí)REF_Ref7382\r\h[4]。截止目前，已經(jīng)有許多大學(xué)有自己的參觀預(yù)約平臺(tái)，如清華大學(xué)推出了游學(xué)組合服務(wù)，包括多條路線和特色項(xiàng)目等等，順應(yīng)高校特色，提供創(chuàng)新的游學(xué)項(xiàng)目，為用戶提供大學(xué)的最新消息，為游學(xué)者的參觀路線提供參考，大大程度上減少參觀者消耗精力并且提高了其體驗(yàn)感，同時(shí)通過系統(tǒng)上信息的整合查看，制定適合自己的個(gè)性化游學(xué)計(jì)劃，在各個(gè)方面進(jìn)行一定范圍內(nèi)的篩選，塑造一個(gè)屬于自己的游學(xué)之旅。在文獻(xiàn)REF_Ref7431\r\h[5]中也提到了根據(jù)《“十四五”文化和旅游發(fā)展規(guī)劃》說明了促進(jìn)文教結(jié)合、旅教結(jié)合以及發(fā)展研學(xué)旅行項(xiàng)目的重要性，學(xué)校和教師應(yīng)當(dāng)利用研學(xué)旅行開發(fā)其專屬的優(yōu)質(zhì)研學(xué)課程產(chǎn)品，同時(shí)高校作為重要的教育場(chǎng)所，應(yīng)把握政策機(jī)遇，積極開展研學(xué)旅行服務(wù)，為文旅融合發(fā)展和教育改革貢獻(xiàn)一份力量，打造一條科教旅游線路，讓學(xué)生在進(jìn)行游學(xué)的同時(shí)，游覽其自熱人文景觀，感受祖國的大好河山REF_Ref6735\r\h[6-REF_Ref6801\r\h7]。游學(xué)項(xiàng)目也是當(dāng)前旅游業(yè)發(fā)展的一個(gè)新方向，游學(xué)活動(dòng)方式多樣且豐富，學(xué)生可以接觸到不同的地理環(huán)境，實(shí)現(xiàn)理論知識(shí)和實(shí)踐融合REF_Ref7470\r\h[8]。游學(xué)旅行的市場(chǎng)規(guī)模持續(xù)擴(kuò)張，不僅拓展學(xué)生的視野，同樣帶來經(jīng)濟(jì)收益，促進(jìn)研學(xué)者發(fā)生旅游行為，對(duì)旅游行業(yè)具有顯著的拉動(dòng)作用，激活教育相關(guān)產(chǎn)業(yè)，帶動(dòng)多元產(chǎn)業(yè)鏈，推動(dòng)可持續(xù)高質(zhì)量發(fā)展以及推動(dòng)了傳統(tǒng)觀光式旅游向體驗(yàn)式、教育型旅游轉(zhuǎn)型REF_Ref7500\r\h[9]。以上可以看出，線上預(yù)約平臺(tái)將傳統(tǒng)旅游與教育相結(jié)合，創(chuàng)造新的服務(wù)模式，打破了傳統(tǒng)大學(xué)界限，該大學(xué)資源平臺(tái)可以讓用戶獲取全面準(zhǔn)確的信息，輕松預(yù)約大學(xué)參觀和其特色項(xiàng)目、購買紀(jì)念品等旅游產(chǎn)品,讓游學(xué)者在活動(dòng)中感知傳統(tǒng)文化，熟知鄉(xiāng)土鄉(xiāng)情，培養(yǎng)適應(yīng)未來的關(guān)鍵能力，學(xué)會(huì)在生活中生存，促進(jìn)教育的健康發(fā)展REF_Ref7532\r\h[10]。1.4系統(tǒng)設(shè)計(jì)內(nèi)容使用Java開發(fā)下的SpringBoot框架并整合了Mybatis框架，采用Vue和Ajax技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于Vue框架的大學(xué)游學(xué)系統(tǒng)，方便用戶針對(duì)自己的喜好選擇感興趣的大學(xué)和游學(xué)項(xiàng)目。對(duì)開發(fā)系統(tǒng)的設(shè)計(jì)背景、選題的意義和相關(guān)現(xiàn)狀進(jìn)行一些簡(jiǎn)單的介紹，然后對(duì)項(xiàng)目進(jìn)行了可行性分析和需求分析，在之后介紹了開發(fā)該系統(tǒng)需要的相關(guān)技術(shù)，接著進(jìn)行了數(shù)據(jù)庫的表結(jié)構(gòu)設(shè)計(jì)，再介紹軟件開發(fā)與實(shí)現(xiàn)的過程，最后通過一系列系統(tǒng)測(cè)試，確保該系統(tǒng)的穩(wěn)定性和可靠性。1.5論文結(jié)構(gòu)在決定對(duì)本系統(tǒng)進(jìn)行開發(fā)之前，首先進(jìn)行了跟本系統(tǒng)相關(guān)聯(lián)的調(diào)查和研究，通過查閱相關(guān)文獻(xiàn)和其他書籍資料，了解開發(fā)本系統(tǒng)需要的步驟規(guī)劃、需求目標(biāo)和技術(shù)手段等，結(jié)合以上，總結(jié)出以下章節(jié)協(xié)助軟件開發(fā)和論文撰寫。第一章緒論。該章節(jié)的主要內(nèi)容是針對(duì)論文選題的設(shè)計(jì)背景進(jìn)行了介紹，論述其開發(fā)意義、目的以及當(dāng)前的狀況，明確其開發(fā)的價(jià)值。系統(tǒng)分析。該章節(jié)主要主要是從技術(shù)、操作、教育價(jià)值三個(gè)方面進(jìn)行系統(tǒng)的可行性分析，并針對(duì)系統(tǒng)和用戶進(jìn)行需求分析。系統(tǒng)相關(guān)技術(shù)。在這一章中，主要介紹了系統(tǒng)中使用到的相關(guān)技術(shù)，包括SpringBoot框架、Ajax技術(shù)、Vue.js、MySQL數(shù)據(jù)庫等。系統(tǒng)概要設(shè)計(jì)。在該章中，展示該游學(xué)系統(tǒng)的總體設(shè)計(jì)，對(duì)該系統(tǒng)的各個(gè)模塊展開描述，了解其數(shù)據(jù)庫的建立。系統(tǒng)開發(fā)與實(shí)現(xiàn)。主要時(shí)介紹系統(tǒng)具有的功能模塊以及實(shí)現(xiàn)的效果圖，并展示部分實(shí)現(xiàn)代碼。第六章系統(tǒng)測(cè)試。該章節(jié)利用各個(gè)測(cè)試來保證系統(tǒng)功能是否能夠如期進(jìn)行操作，滿足用戶的需求和體驗(yàn)。第七章結(jié)論。該章節(jié)進(jìn)行了一個(gè)較為全面的總結(jié)，同時(shí)表達(dá)了對(duì)未來的一些展望。

系統(tǒng)分析2.1可行性分析可行性分析是通過系統(tǒng)性方法對(duì)項(xiàng)目的技術(shù)、經(jīng)濟(jì)、操作等多方面進(jìn)行評(píng)估，以確保其具備實(shí)現(xiàn)條件，為項(xiàng)目的成功和風(fēng)險(xiǎn)提供保障。在對(duì)決定對(duì)項(xiàng)目進(jìn)行開發(fā)之前，我們必須深刻思考其所需的技術(shù)手段和資金要求是否能夠滿足，如果資金存在不足的問題，項(xiàng)目的交付期將大大延期。同樣，如果存在不能解決的技術(shù)問題，將大大拖累項(xiàng)目的進(jìn)度，導(dǎo)致某些功能無法實(shí)現(xiàn)，降低了用戶的體驗(yàn)感?？傊?，可行性分析一定程度上預(yù)測(cè)了項(xiàng)目是否能夠如期完成，能否被用戶有效使用。以下是針對(duì)該旅游系統(tǒng)的部分可行性分析。2.1.1技術(shù)可行性系統(tǒng)采用前后端分離模式，后端使用SpringBoot框架、MySQL數(shù)據(jù)庫，其中SpringBoot是一個(gè)基于Spring框架的開源項(xiàng)目，其繼承了原框架的所有優(yōu)點(diǎn)，一定程度上簡(jiǎn)化了Java應(yīng)用開發(fā)的流程，解決了原來Spring框架需要熟練掌握才能進(jìn)行相關(guān)配置的問題REF_Ref7591\r\h[11]。同時(shí)，SpringBoot默認(rèn)使用嵌入式Web服務(wù)器，無需額外進(jìn)行配置即可輕松啟動(dòng)應(yīng)用程序。SpringBoot還提供基礎(chǔ)pom文件來簡(jiǎn)化Maven配置，數(shù)據(jù)傳送至服務(wù)器后，其處理請(qǐng)求采用SpringMVC框架，Mybatis用作數(shù)據(jù)訪問層的持久層框架。另外，Vue作為前端框架，是一種應(yīng)用廣泛的JavaScript前端框架。Vue框架開發(fā)網(wǎng)站前端的應(yīng)用思路為傳統(tǒng)網(wǎng)站前端設(shè)計(jì)效率低、開發(fā)難度大、不易維護(hù)等提出了解決方案，開發(fā)人員可以直接調(diào)用Vue提供的相關(guān)功能，提高了開發(fā)效率REF_Ref7620\r\h[12]。其中，Element-UI作為一款Vue.js2.0UI框架，為開發(fā)人員提供了大量的組件，包括輸入框、日期選擇器等，滿足了開發(fā)人員不同場(chǎng)景下的需求，為開發(fā)者快速構(gòu)建美觀簡(jiǎn)潔的前端頁面提供了很大的幫組。綜述，以上技術(shù)結(jié)合可以實(shí)現(xiàn)大學(xué)游學(xué)系統(tǒng)的開發(fā)。2.1.2操作可行性操作可行性主要是指用戶對(duì)于系統(tǒng)操作的上手程度和方便快捷性，該系統(tǒng)頁面簡(jiǎn)潔美觀，操作門檻低，其相關(guān)操作的指引也有添加，同時(shí)，本系統(tǒng)無需下載軟件，用戶只需要打開瀏覽器就可以訪問，避免了不同設(shè)備的適配問題。同時(shí)，系統(tǒng)維護(hù)不復(fù)雜，不會(huì)浪費(fèi)大量成本去維護(hù)，由此可見，該系統(tǒng)的一系列操作都是可行的。2.1.3教育價(jià)值可行性游學(xué)是落實(shí)核心價(jià)值體系中立德樹人基本要求的途徑之一，將其納入中小學(xué)生的教育計(jì)劃中，低年級(jí)注重價(jià)值觀的體驗(yàn)，高年級(jí)則側(cè)重強(qiáng)化方法論的實(shí)踐，同時(shí)結(jié)合各個(gè)高校的特色資源，進(jìn)行主題游學(xué)活動(dòng)，旨在將知識(shí)教育與現(xiàn)實(shí)生活接軌，注重景點(diǎn)觀光和研學(xué)結(jié)合，進(jìn)一步促進(jìn)學(xué)生“學(xué)”“思”“行”并進(jìn)，為學(xué)生提供知識(shí)融匯、合作探究的真實(shí)情境和培養(yǎng)問題意識(shí)，為解決傳統(tǒng)學(xué)科教育的頑疾提供了新視界REF_Ref7656\r\h[13]。比如博物館、校史館等歷史研學(xué)旅行，通過闡述館藏文物在歷史記憶與文化方面的相關(guān)知識(shí)，讓學(xué)生從感官上接觸到生動(dòng)鮮活的文物，體會(huì)其藝術(shù)美，積累審美經(jīng)驗(yàn)，為學(xué)校美育教育提供了幫助。2.2需求分析2.2.1功能總體需求分析該系統(tǒng)是一個(gè)前后端分離的大學(xué)游學(xué)系統(tǒng)，該系統(tǒng)分為用戶端、服務(wù)商端、管理員端三個(gè)部分。用戶端，主要是為系統(tǒng)用戶提供服務(wù)，用戶可以選擇合適的大學(xué)和文創(chuàng)商品進(jìn)行預(yù)約和購買，并進(jìn)行訂單支付，同時(shí)可以查看自己相關(guān)訂單的詳情，也可以針對(duì)大學(xué)和商品進(jìn)行評(píng)價(jià)，而其中服務(wù)商端主要是方便商務(wù)完善自己的申請(qǐng)信息，通過審核后可進(jìn)行大學(xué)信息發(fā)布和商品的增加上傳，以便用戶進(jìn)行操作。管理員端便是方便后臺(tái)進(jìn)行管理，對(duì)用戶、大學(xué)、商品、訂單等信息進(jìn)行管理。以下是部分子模塊的詳細(xì)描述。2.2.2登錄注冊(cè)功能用戶以未登錄的游客身份進(jìn)行系統(tǒng)訪問，部分功能會(huì)受到限制，比如預(yù)約、購買等操作。用戶如果想要體驗(yàn)以上功能，可以根據(jù)彈窗提示跳轉(zhuǎn)登錄頁面，輸入相應(yīng)的賬號(hào)和密碼，選擇登錄身份進(jìn)行登錄，如果賬號(hào)錯(cuò)誤，會(huì)出現(xiàn)該賬號(hào)不存在的提示，如果賬號(hào)和密碼不匹配會(huì)顯示賬號(hào)或密碼錯(cuò)誤，如果賬號(hào)存在且密碼匹配會(huì)跳轉(zhuǎn)系統(tǒng)首頁進(jìn)行后續(xù)操作。如果用戶沒有系統(tǒng)賬號(hào)，可以點(diǎn)擊登錄頁面的前去注冊(cè)，用戶輸入賬號(hào)，密碼，用戶名等信息，并選擇注冊(cè)身份，如果提示賬號(hào)已存在，用戶需要更換賬號(hào)重新進(jìn)行注冊(cè)，注冊(cè)完成后可以進(jìn)行正常登錄。2.2.3用戶預(yù)約功能用戶登錄后可以進(jìn)行大學(xué)游學(xué)項(xiàng)目的預(yù)約，從首頁瀏覽大學(xué)基本信息，點(diǎn)擊圖片跳轉(zhuǎn)其詳細(xì)頁面，點(diǎn)擊門票列表標(biāo)簽之后可以進(jìn)行游學(xué)項(xiàng)目的選擇，點(diǎn)擊預(yù)約，進(jìn)行相應(yīng)的訂單信息填寫，比如姓名、聯(lián)系電話、游學(xué)日期以及門票數(shù)量的選擇，其游學(xué)日期只能選擇當(dāng)前日期后的七天內(nèi)，并且其數(shù)量選擇不能超過門票對(duì)應(yīng)的庫存。完成訂單確認(rèn)后，用戶跳轉(zhuǎn)相應(yīng)的訂單頁查看訂單信息，選擇狀態(tài)為未支付的訂單在訂單生成的15分鐘內(nèi)進(jìn)行支付，如果超過15分鐘，訂單將自動(dòng)取消。已支付的訂單會(huì)獲取其相應(yīng)的入校二維碼，用于門票核銷。2.2.4用戶文創(chuàng)購買功能用戶登錄后可以進(jìn)行商品的購買，在商品頁面進(jìn)行瀏覽，點(diǎn)擊查看詳情跳轉(zhuǎn)商品詳情頁，在商品類型標(biāo)簽下可以查看商品的不同規(guī)格，根據(jù)用戶自身需求，進(jìn)行商品的購物車添加和商品的購買，在購物車頁面，用戶可以修改商品規(guī)格和其購物車數(shù)量，并且可以通過勾選前方的自選框進(jìn)行購買結(jié)算，也可以在商品詳情頁進(jìn)行購買，彈出訂單彈窗，確認(rèn)訂單內(nèi)容，其收貨地址是用戶的默認(rèn)地址，如果沒有地址添加可以先添加地址再確認(rèn)下單，下單后用戶可以進(jìn)行跳轉(zhuǎn)支付，支付完成后可以在訂單頁面進(jìn)行相應(yīng)的基本信息查詢，比如購買商品名稱，收貨地址信息，針對(duì)未支付和未發(fā)貨的商品，用戶可以進(jìn)行退款操作，進(jìn)行訂單的取消。已取消的訂單可以點(diǎn)擊重新下單，跳轉(zhuǎn)相應(yīng)的商品詳情頁進(jìn)行再一次購買。2.2.5用戶個(gè)人中心功能個(gè)人中心分為個(gè)人信息模塊和地址管理模塊，在個(gè)人信息方面，用戶可以修改自己的用戶名、聯(lián)系方式和頭像等信息，修改的用戶名不能為空，否則會(huì)出現(xiàn)警告提示，修改密碼時(shí)，需要保證新密碼和確認(rèn)密碼一致，否則會(huì)出現(xiàn)密碼不一致的提示，同時(shí)其新密碼不能為空。修改密碼成功后，會(huì)自動(dòng)登出跳轉(zhuǎn)登錄頁面，用戶需要重新登錄。在地址管理方面，用戶可以調(diào)整默認(rèn)地址，一個(gè)用戶只允許一個(gè)默認(rèn)地址的設(shè)置，還可以進(jìn)行地址的添加和刪除。2.2.6用戶瀏覽大學(xué)功能無論用戶是以游客身份還是登錄后訪問系統(tǒng)，用戶都可以進(jìn)行大學(xué)信息的瀏覽，能夠根據(jù)大學(xué)類型和地區(qū)進(jìn)行大學(xué)篩選，也可以進(jìn)行名稱模糊查詢，在對(duì)應(yīng)大學(xué)的詳情頁中，用戶可以查看更多的大學(xué)圖片以及大學(xué)的文字介紹，查看大學(xué)開放的游學(xué)項(xiàng)目以及價(jià)格，還有大學(xué)的相關(guān)評(píng)論，以及大學(xué)地圖查看，了解周邊環(huán)境，大學(xué)校內(nèi)地圖的查看，加深對(duì)大學(xué)的了解。同時(shí)可以查看其大學(xué)的推薦路線，了解更多的大學(xué)景點(diǎn)。2.2.7用戶評(píng)論功能用戶在大學(xué)詳情頁的時(shí)候，可以進(jìn)行大學(xué)評(píng)論并且進(jìn)行打分，也可以針對(duì)下面的評(píng)論進(jìn)行相應(yīng)的回復(fù)，點(diǎn)擊評(píng)論時(shí)會(huì)先進(jìn)行用戶是否登錄的驗(yàn)證，如果未登錄會(huì)出現(xiàn)提示登錄彈窗，進(jìn)行過相關(guān)大學(xué)項(xiàng)目預(yù)約的用戶，也可以在個(gè)人訂單頁面針對(duì)已完成的訂單進(jìn)行評(píng)價(jià)。2.2.8大學(xué)管理功能大學(xué)管理員登錄其賬號(hào)后，已經(jīng)完成審核的大學(xué)管理員可以進(jìn)行大學(xué)信息的管理，比如通過滑動(dòng)按鈕，開放或關(guān)閉大學(xué)營業(yè)，未開放的大學(xué)，用戶將不能進(jìn)行預(yù)約會(huì)彈出暫時(shí)不支持預(yù)約的提示，但是仍然可以查看大學(xué)相關(guān)的基本信息。同樣，還可以進(jìn)行其發(fā)布信息的修改和刪除。與大學(xué)相關(guān)的路線、以及該大學(xué)關(guān)聯(lián)的門票也可以進(jìn)行相應(yīng)的增加、刪除、編輯和查詢。2.2.9用戶管理功能登錄后的管理員可以進(jìn)行用戶賬號(hào)的管理，實(shí)現(xiàn)封禁和解禁操作，被封禁的用戶將不在能進(jìn)行正常登錄，輸入相應(yīng)的賬號(hào)和密碼后會(huì)出現(xiàn)封禁提示，同樣，管理員還可以修改大學(xué)管理員的審核狀態(tài)，可以通過審核狀態(tài)進(jìn)行相應(yīng)大學(xué)管理員的查看，其審核狀態(tài)分為審核中、審核通過、審核未通過，針對(duì)審核中和審核未通過的大學(xué)管理員將不能進(jìn)行正常的信息發(fā)布。管理員也可以通過搜索框針對(duì)用戶名稱等進(jìn)行相應(yīng)的查詢。2.3業(yè)務(wù)流程圖分析2.3.1注冊(cè)登錄該系統(tǒng)主要分為三個(gè)模塊用戶、服務(wù)商和管理員，每個(gè)模塊都具備登錄功能，服務(wù)商和用戶可以進(jìn)行注冊(cè)功能，登錄時(shí)需要輸入相應(yīng)的賬號(hào)和密碼，如果輸入的賬號(hào)和密碼與數(shù)據(jù)庫內(nèi)容不相匹配，系統(tǒng)會(huì)出現(xiàn)賬號(hào)或者密碼錯(cuò)誤的提示，反之，如果登錄信息輸入正確，會(huì)跳轉(zhuǎn)到系統(tǒng)首頁。如果沒有賬號(hào)，可以先前往注冊(cè)再登錄。登錄流程圖如圖2-1所示。圖2-1登錄流程圖用戶可以不登錄訪問系統(tǒng)部分頁面，但是系統(tǒng)部分功能需要登錄后才能進(jìn)行操作，如果用戶想要體驗(yàn)，可以前往注冊(cè)頁面，輸入相應(yīng)的注冊(cè)信息，系統(tǒng)會(huì)檢查注冊(cè)賬號(hào)是否已經(jīng)存在，如果存在會(huì)給出賬號(hào)已存在的提示，反之，注冊(cè)成功，用戶可以進(jìn)行登錄訪問。注冊(cè)流程圖如圖2-2所示。圖2-2注冊(cè)流程圖2.3.2管理員管理流程管理員進(jìn)行登錄之后可以對(duì)相應(yīng)的信息進(jìn)行管理，如用戶信息管理，產(chǎn)品信息管理、評(píng)論信息管理、分類信息管理、公告信息管理等等。管理員后臺(tái)管理流程圖如圖2-3所示。圖2-3管理員管理流程圖2.3.3服務(wù)商管理流程服務(wù)商登錄之后可以查看自己發(fā)布的產(chǎn)品信息，以及售出的大學(xué)門票和售出的商品的訂單信息，可以進(jìn)行相應(yīng)的管理，服務(wù)商管理流程圖如圖2-4所示。圖2-4服務(wù)商管理流程圖2.3.4用戶購票流程用戶進(jìn)行登錄前后都可以進(jìn)行大學(xué)信息瀏覽，但是登錄后才能進(jìn)行購票操作，用戶瀏覽大學(xué)信息后，進(jìn)行門票選擇，點(diǎn)擊購票，輸入和選擇相應(yīng)的門票訂單信息，提交訂單之后，進(jìn)行支付。用戶購票流程圖如圖2-5所示。圖2-5用戶預(yù)約門票流程圖2.3.5用戶取消訂單流程用戶登錄之后完成大學(xué)預(yù)約購票或者文創(chuàng)購買，會(huì)跳轉(zhuǎn)訂單頁面，如果用戶在訂單未進(jìn)行支付的情況下，可以直接取消訂單，如果用戶已經(jīng)完成了訂單的支付，那么要進(jìn)行判斷，如果用戶購買訂單信息中的狀態(tài)為待收貨，則提示訂單不在取消范圍內(nèi)，如果狀態(tài)為待發(fā)貨，則訂單取消成功。取消訂單流程圖如圖2-6所示。圖2-6用戶取消訂單流程圖2.4本章小結(jié)本章主要對(duì)基于Vue框架的大學(xué)游學(xué)系統(tǒng)在技術(shù)、教育價(jià)值和操作方面的可行性進(jìn)行分析，同時(shí)對(duì)系統(tǒng)需求進(jìn)行分析，最后根據(jù)需求對(duì)模塊進(jìn)行劃分，并對(duì)主要功能流程進(jìn)行描述。系統(tǒng)相關(guān)技術(shù)3.1SpringBoot框架系統(tǒng)后端采用SpringBoot框架，SpringBoot框架是一個(gè)優(yōu)勢(shì)顯著的框架。SpringBoot框架是由Spring框架優(yōu)化而來，Spring是一個(gè)功能強(qiáng)大而輕量級(jí)的開源框架，被廣泛應(yīng)用于Java應(yīng)用程序開發(fā)，其特點(diǎn)在于開發(fā)步驟簡(jiǎn)單，高內(nèi)聚低耦合，有助于簡(jiǎn)化配置和提高開發(fā)效率REF_Ref7712\r\h[14]。基于SpringBoot的數(shù)據(jù)庫接口系統(tǒng)主要包括基礎(chǔ)數(shù)據(jù)層、數(shù)據(jù)持久層、業(yè)務(wù)邏輯層、控制層等，數(shù)據(jù)層設(shè)計(jì)要求與數(shù)據(jù)庫一致，持久層負(fù)封裝與數(shù)據(jù)庫進(jìn)行聯(lián)絡(luò)的一些任務(wù)，基于MyBatis解決表單的增刪改查，業(yè)務(wù)邏輯層則負(fù)責(zé)業(yè)務(wù)模塊的邏輯應(yīng)用的設(shè)計(jì)，最后，控制層調(diào)用業(yè)務(wù)邏輯層的接口來實(shí)現(xiàn)業(yè)務(wù)流程，并設(shè)置后臺(tái)端口訪問的路徑REF_Ref7924\r\h[15-REF_Ref8100\r\h16]。3.2Vue框架系統(tǒng)前端采用Vue框架，Vue.js是一種輕量級(jí)的JavaScript框架，借用其生命周期的鉤子函數(shù)onMounted來觸發(fā)后端數(shù)據(jù)，具有十分出色的響應(yīng)設(shè)計(jì)能力，其通過VueRouter實(shí)現(xiàn)頁面跳轉(zhuǎn)，UI界面采用ElementUI組件庫，ElementUI提供了大量的實(shí)用組件，幫助開發(fā)人員提高了效率、降低了成本。Vue采用了MVVM架構(gòu)，將前端軟件分為視圖、模型和視圖模型三個(gè)部分。Vue相較于其他框架，其優(yōu)勢(shì)在于視圖層的處理和渲染，便于與其他項(xiàng)目進(jìn)行整合，同時(shí)通過組件化的開發(fā)方式來實(shí)現(xiàn)可重用性和模塊化開發(fā)，使得開發(fā)者可以將頁面分為多個(gè)獨(dú)立的組件。另外，還提供了響應(yīng)式數(shù)據(jù)綁定，讓開發(fā)者可以更加方便地管理和操作應(yīng)用程序狀態(tài)，大大提高了開發(fā)效率、代碼復(fù)用性以及可維護(hù)性REF_Ref7793\r\h[17-REF_Ref7797\r\h18]。除此之外，Vue還擁有大量的指令，計(jì)算屬性等功能，為開發(fā)者處理用戶輸入和展示的數(shù)據(jù)提供了便利REF_Ref12303\r\h[19]。同樣，也方便了用戶進(jìn)行相應(yīng)的操作，提供良好的使用體驗(yàn)。3.3MySQL數(shù)據(jù)庫MySQL是一個(gè)開源項(xiàng)目，可免費(fèi)獲取，對(duì)于個(gè)人開發(fā)者在成本上有顯著的優(yōu)勢(shì)，其支持跨平臺(tái)使用，能夠運(yùn)行在各種操作系統(tǒng)上，屬于關(guān)系型數(shù)據(jù)管理系統(tǒng)，具有高校、穩(wěn)定、方便等特點(diǎn)，其為后臺(tái)數(shù)據(jù)存儲(chǔ)提供了強(qiáng)大的支持。在系統(tǒng)開發(fā)中，其通常用于信息存儲(chǔ)和信息檢索等REF_Ref12329\r\h[20]。除此之外，其提供多種安全功能，如用戶密碼加密、用戶權(quán)限限制等。MySQL語法簡(jiǎn)單，易用，初學(xué)者也可以快速上手，使數(shù)據(jù)庫管理更加方便快捷。同時(shí)，其憑借高性能、易用性、靈活性在各個(gè)場(chǎng)景中被廣泛使用，如Web開發(fā)，移動(dòng)應(yīng)用等等。3.4MyBatis技術(shù)在持久層方面，該系統(tǒng)選用MyBatis框架，來保證數(shù)據(jù)庫操作的穩(wěn)定性。MyBatis框架是Apache的一個(gè)開源項(xiàng)目，能夠支持存儲(chǔ)過程和自定義SQL以及高級(jí)映射功能。在pom.xml文件中添加所需要的依賴，使用統(tǒng)一的方法進(jìn)行自動(dòng)化構(gòu)建，可提高開發(fā)效率。同時(shí)，為每個(gè)MySQL表創(chuàng)建相應(yīng)的映射器和實(shí)體類，通過配置文件的方式處理數(shù)據(jù)庫中的數(shù)據(jù)REF_Ref12356\r\h[21]。MyBatis對(duì)JDBC進(jìn)行了二次封裝，能夠與第三方數(shù)據(jù)庫連接池集成，提供了一種將SQL語句和Java代碼分離的機(jī)制；通過映射文件或者注解來定義SQL語句和參數(shù)的映射關(guān)系，傳遞給SqlSession實(shí)例中的insert()、delete()等方法，進(jìn)行相應(yīng)SQL語句的執(zhí)行，實(shí)現(xiàn)對(duì)數(shù)據(jù)庫內(nèi)容訪問的靈活性和可維護(hù)性REF_Ref8071\r\h[22]。3.5Ajax技術(shù)Ajax全稱為“AsynchronousJavaScriptandXML(異步JavaScript和XML)”，是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的開發(fā)技術(shù)，可以在不刷新整個(gè)頁面的情況下實(shí)現(xiàn)頁面的局部更新。Ajax的運(yùn)行步驟主要包括創(chuàng)建對(duì)象、發(fā)送請(qǐng)求和服務(wù)器響應(yīng)REF_Ref8126\r\h[23]。前端通過Ajax請(qǐng)求來訪問后端的數(shù)據(jù)接口，它的關(guān)鍵之處在于使用XMLHttpRequest對(duì)象向服務(wù)器發(fā)出請(qǐng)求后立即返回，不會(huì)因等待響應(yīng)結(jié)果而阻塞整個(gè)瀏覽器進(jìn)程。XMLHttpRequest對(duì)象具有status、responseXML等屬性，其中status表示Http狀態(tài)碼，其中200表示請(qǐng)求已經(jīng)成功，responseXML表示獲取的服務(wù)器響應(yīng)，還有responseText，其不同于responseXML的XML了形式，而是以字符串形式來完成響應(yīng)數(shù)據(jù)的返回REF_Ref12440\r\h[24]。系統(tǒng)概要設(shè)計(jì)4.1功能模塊設(shè)計(jì)4.1.1功能劃分該系統(tǒng)主要分為三個(gè)模塊，分別是管理員模塊、大學(xué)管理員模塊和用戶模塊。管理員模塊管理員主要功能就是信息管理和數(shù)據(jù)分析，信息管理主要有用戶信息管理模塊、分類信息管理模塊、評(píng)論信息管理模塊、產(chǎn)品信息管理模塊等，在用戶信息管理中，管理員可以對(duì)用戶的賬號(hào)狀態(tài)進(jìn)行修改，分為封禁和正常狀態(tài)，封禁狀態(tài)不能進(jìn)行登錄。在評(píng)論信息管理中，管理員可以針對(duì)大學(xué)、商品的評(píng)論進(jìn)行刪除、修改。在產(chǎn)品信息管理中，管理員主要對(duì)大學(xué)信息、商品、門票、商品規(guī)格等進(jìn)行修改、刪除、查詢等。大學(xué)管理員模塊大學(xué)管理員主要功能在于產(chǎn)品管理模塊、訂單管理模塊和數(shù)據(jù)分析，在產(chǎn)品模塊中，可以對(duì)大學(xué)、商品、門票和商品規(guī)格進(jìn)行增刪改查，可以對(duì)大學(xué)的開放狀態(tài)等進(jìn)行修改，同時(shí)訂單管理模塊，服務(wù)商也可以進(jìn)行相應(yīng)的刪除等操作。用戶模塊用戶在沒有登錄的情況下可以對(duì)系統(tǒng)進(jìn)行訪問，查看信息，但是部分操作受限，登錄之后訪問，可以進(jìn)行大學(xué)預(yù)約、文創(chuàng)購買、評(píng)論發(fā)布和查看訂單信息等，訂單信息可以進(jìn)行支付和取消操作。該系統(tǒng)的功能劃分大致如下圖4-1所示。圖4-1系統(tǒng)總體結(jié)構(gòu)圖4.1.2功能模塊用戶用例用戶登錄前，只能進(jìn)行相應(yīng)的信息查看，比如大學(xué)、商品，進(jìn)行相應(yīng)的搜索等。用戶登錄后訪問系統(tǒng)，同樣可以瀏覽大學(xué)信息、商品信息等信息，還可以進(jìn)行大學(xué)預(yù)約和商品購買、評(píng)論的發(fā)布以及訂單的查看。用戶用例如圖4-2所示。圖4-2用戶用例圖大學(xué)管理員用例大學(xué)管理員進(jìn)行登錄并且審核通過后，可以進(jìn)行大學(xué)信息、商品、門票和商品規(guī)格的發(fā)布，并對(duì)其進(jìn)行管理。同時(shí)還可以查看訂單信息和其對(duì)應(yīng)的數(shù)據(jù)分析。剛注冊(cè)的大學(xué)管理員可以完善申請(qǐng)信息后，點(diǎn)擊發(fā)送審核，等待管理員通過審核后，才可以進(jìn)行相應(yīng)的操作。大學(xué)管理員用例圖如圖4-3所示。圖4-3大學(xué)管理員用例圖管理員用例管理員進(jìn)行登錄之后，可以進(jìn)行產(chǎn)品管理、分類管理、用戶管理、評(píng)論管理、公告管理、訂單管理等，還可以查看大學(xué)相關(guān)門票和商品的售出數(shù)據(jù)分析。管理員用例如圖4-4所示。圖4-4管理員用例圖4.2數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)4.2.1概念結(jié)構(gòu)設(shè)計(jì)用戶實(shí)體系統(tǒng)的主要服務(wù)對(duì)象是用戶，其主要包含賬號(hào)、密碼、名稱、賬號(hào)狀態(tài)和聯(lián)系電話等屬性。E-R圖如圖4-5所示。圖4-5用戶E-R圖管理員實(shí)體圖管理員是進(jìn)行后臺(tái)管理的對(duì)象，主要產(chǎn)品管理、用戶管理等。其含有賬號(hào)、密碼、頭像、名稱等屬性。其E-R圖如圖4-6所示。圖4-6管理員E-R圖大學(xué)管理員實(shí)體圖大學(xué)管理員進(jìn)行登錄之后，如果其審核狀態(tài)為通過，可以進(jìn)行大學(xué)和商品等發(fā)布，可以查看售出的訂單信息以及對(duì)應(yīng)的數(shù)據(jù)分析。其具有賬號(hào)、密碼、頭像、賬號(hào)狀態(tài)、審核狀態(tài)、聯(lián)系電話等屬性。其E-R圖如圖4-7所示。圖4-7大學(xué)管理員E-R圖大學(xué)實(shí)體管理員可以對(duì)大學(xué)信息進(jìn)行管理，用戶可以瀏覽大學(xué)信息，服務(wù)商可以發(fā)布大學(xué)信息。其主要含有名稱、開放時(shí)間、開放狀態(tài)、類型等屬性。E-R圖如圖4-8所示。圖4-8大學(xué)E-R圖門票實(shí)體管理員可以管理門票，大學(xué)管理員可以添加大學(xué)對(duì)應(yīng)的游學(xué)項(xiàng)目門票，對(duì)已發(fā)布的門票進(jìn)行管理，用戶可以選擇想要的門票進(jìn)行購買預(yù)約。其具有名稱、價(jià)格、數(shù)量等屬性。E-R圖如圖4-9所示。圖4-9門票E-R圖評(píng)論實(shí)體登錄成功的用戶可以針對(duì)大學(xué)、商品進(jìn)行評(píng)論。其具有評(píng)論內(nèi)容、評(píng)論時(shí)間、評(píng)分等屬性。E-R圖如圖4-10所示。圖4-10評(píng)論E-R圖實(shí)體關(guān)系通過E-R模型作為數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)的方法，利用圖形展示，使其簡(jiǎn)單易懂。實(shí)體間的E-R圖如圖4-11所示。圖4-11實(shí)體間關(guān)系圖4.2.2數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)數(shù)據(jù)庫的表數(shù)據(jù)如下：1.用戶表(user)該表具有用戶ID、賬號(hào)、密碼等字段。用戶表如表4-1所示。表4-1用戶表字段名字段類型字段長度是否可以為空備注idint11否主鍵namevarchar10是名稱accountvarchar11否賬號(hào)passwordvarchar20否密碼contactPhonevarchar11是聯(lián)系電話avatarvarchar100是頭像rolevarchar20否角色statusint1否賬號(hào)狀態(tài)2.管理員表(admin)該表具有管理員ID、賬號(hào)、密碼等字段。管理員表如表4-2所示。表4-2管理員表字段名字段類型字段長度是否可以為空備注idint11否主鍵accountvarchar20否管理員賬號(hào)passwordvarchar20否密碼avatarvarchar100是頭像rolevarchar20否角色namevarchar10是名稱statusint1否賬號(hào)狀態(tài)3.大學(xué)管理員表(facilitator)該表具有ID、賬號(hào)、密碼、審核狀態(tài)等字段。大學(xué)管理員表如表4-3所示。表4-3大學(xué)管理員表字段名字段類型字段長度是否可以為空備注idint11否主鍵namevarchar10是名稱contactNamevarchar10是聯(lián)系人姓名contactPhonevarchar11是聯(lián)系電話statusint1否賬號(hào)狀態(tài)locationvarchar100是辦公地點(diǎn)accountvarchar20否賬號(hào)passwordvarchar20否密碼avatarvarchar100是頭像

表4-3大學(xué)管理員表（續(xù)）rolevarchar20否角色conditionint1是審核狀態(tài)4.地區(qū)表(area)該表具有地區(qū)ID、地區(qū)字段。地區(qū)表如表4-4所示。表4-4地區(qū)表字段名字段類型字段長度是否可以為空備注idint11否主鍵namevarchar10否地區(qū)名稱5.地址表(address)該表具有ID、收貨人姓名、聯(lián)系電話，詳細(xì)地址，用戶ID等字段。地址表如表4-5所示。表4-5地址表字段名字段類型字段長度是否可以為空備注idint11否主鍵contactNamevarchar20否收貨人姓名contactPhonevarchar11是聯(lián)系電話user_idint11否用戶IDlocationvarchar100否詳細(xì)地址is_defaultTinyint1否默認(rèn)地址6.商品表(good)該表具有商品ID、商品名稱、商品圖片等字段。商品表如表4-6所示。表4-6商品表字段名字段類型字段長度是否可以為空備注idint11否主鍵namevarchar50是商品名稱imgvarchar255是商品圖片conditionint1否售賣狀態(tài)introductionvarchar500是商品介紹area_idint11是地區(qū)分類pricedouble10,2是價(jià)格facilitator_idint11否大學(xué)管理員ID7.大學(xué)表(spot)該表具有ID、大學(xué)名稱、大學(xué)圖片等字段。大學(xué)表如表4-7所示。表4-7大學(xué)表字段名字段類型字段長度是否可以為空備注idint11否主鍵namevarchar20否大學(xué)名稱imgvarchar100否大學(xué)圖片locationvarchar100是大學(xué)位置conditionint1否開放情況contactPhonevarchar11是聯(lián)系電話contactName varchar10是聯(lián)系人姓名introductionvarchar500是大學(xué)介紹area_idint11是地區(qū)分類ticketdouble10,2是價(jià)格facilitator_idint11否大學(xué)管理員IDtimevarchar100是開放時(shí)間type_idint11是類型IDlngvarchar15是經(jīng)度latvarchar15是緯度8.商品評(píng)論表(good_comment)該表具有評(píng)論ID、評(píng)論內(nèi)容、評(píng)論時(shí)間等字段。評(píng)論表如表4-8所示。表4-8商品評(píng)論表字段名字段類型字段長度是否可以為空備注idint11否主鍵contentvarchar150否評(píng)論內(nèi)容user_idint11否用戶IDtimedatetime否評(píng)論時(shí)間good_idint11否商品IDrateint1是評(píng)分parent_idint11否父級(jí)評(píng)論IDparent_uservarchar10是回復(fù)人姓名9.大學(xué)評(píng)論表(spot_comment)該表具有評(píng)論ID、評(píng)論內(nèi)容、評(píng)論時(shí)間等字段。評(píng)論表如表4-9所示。表4-9大學(xué)評(píng)論表字段名字段類型字段長度是否可以為空備注idint11否主鍵contentvarchar150否評(píng)論內(nèi)容user_idint11否用戶IDtimedatetime否評(píng)論時(shí)間spot_idint11否大學(xué)IDrateint1是評(píng)分parent_idint11否父級(jí)評(píng)論IDparent_uservarchar10是回復(fù)人姓名10.商品訂單表(good_order)該表具有訂單ID、訂單總額、訂單數(shù)量、商品ID等字段。訂單表如表4-10所示。表4-10商品訂單表字段名字段類型字段長度是否可以為空備注idint11否主鍵good_idint11否商品IDtype_idint11否商品規(guī)格IDuser_idint11否用戶IDfacilitator_idint11否大學(xué)管理員IDcreateTimedatetime否訂單創(chuàng)立時(shí)間statusvarchar10否訂單狀態(tài)payTimedatetime是支付時(shí)間numint11否商品數(shù)量totalPricedouble10,2否訂單總額address_idint11否地址ID11.大學(xué)訂單表(spot_order)該表具有訂單ID、訂單總額、訂單數(shù)量等字段。訂單表如表4-11所示。表4-11大學(xué)訂單表字段名字段類型字段長度是否可以為空備注idint11否主鍵spot_idint11否大學(xué)IDticket_idint11否門票IDuser_idint11否用戶ID

表4-11大學(xué)訂單表（續(xù)）facilitator_idint11否大學(xué)管理員IDspot_datedate否游學(xué)日期createTimedatetime否訂單創(chuàng)立時(shí)間statusvarchar10否訂單狀態(tài)payTimedatetime是支付時(shí)間numint11否門票數(shù)量contactNamevarchar10否聯(lián)系人姓名contactPhonevarchar11否聯(lián)系人電話totalPricedouble10,2否訂單總額12.公告表(notice)該表具有公告ID、公告內(nèi)容、公告發(fā)布時(shí)間等字段。公告表如表4-12所示。表4-12公告表字段名字段類型字段長度是否可以為空備注idint11否主鍵titlevarchar50否公告標(biāo)題contentlongtext否公告內(nèi)容timedatetime否發(fā)布時(shí)間admin_idint11否管理員ID13.商品規(guī)格表(good_type)該表具有商品ID、商品圖片、商品名稱等字段。商品規(guī)格表如表4-13所示。表4-13商品規(guī)格表字段名字段類型字段長度是否可以為空備注idint11否主鍵good_idint11否商品IDphotovarchar100是圖片introductionvarchar500是介紹namevarchar50是名稱numint11否庫存pricedouble10,2否價(jià)格discountdouble10,2是折扣statusint1否售賣狀態(tài)14.大學(xué)門票表(spot_ticket)該表具有門票ID、門票數(shù)量、門票名稱等字段。大學(xué)門票表如表4-14所示。表4-14大學(xué)門票表字段名字段類型字段長度是否可以為空備注idint11否主鍵spot_idint11否大學(xué)IDfacilitator_idint11否大學(xué)管理員IDintroductionvarchar500是介紹namevarchar50是名稱numberint11否數(shù)量pricedouble10,2否價(jià)格discountdouble10,2是折扣statusint1否使用狀態(tài)create_timedatetime否創(chuàng)建時(shí)間15.購物車表(cart)該表具有購物車ID、用戶ID等字段。購物車表如表4-15所示。表4-15購物車表字段名字段類型字段長度是否可以為空備注idint11否主鍵numint11否商品數(shù)量good_idint11否商品IDtype_idint11否商品規(guī)格IDuser_idint11否用戶IDfacilitator_idint11否大學(xué)管理員ID16.大學(xué)介紹圖片表(spot_introduction)該表具有ID、圖片字段。大學(xué)介紹圖片表如表4-16所示。表4-16大學(xué)介紹圖片表字段名字段類型字段長度是否可以為空備注idint11否主鍵imagevarchar100否圖片spot_idint11否大學(xué)ID17.大學(xué)路線表(spot_line)該表具有路線ID、路線圖片、路線名稱等字段。大學(xué)路線表如表4-17所示。表4-17大學(xué)路線表字段名字段類型字段長度是否可以為空備注idint11否主鍵spot_idint11否大學(xué)IDcreateTimedatetime否創(chuàng)建時(shí)間imgvarchar100是路線圖片introductionvarchar500是路線介紹name varchar20是路線名稱locationvarchar100是路線位置18.大學(xué)類型表(type)該表具有類型ID、類型名稱字段。大學(xué)類型表如表4-18所示。表4-18大學(xué)類型表字段名字段類型字段長度是否可以為空備注idint11否主鍵namevarchar10否類型名稱4.3本章小結(jié)本章描述了基于Vue框架的重點(diǎn)大學(xué)游學(xué)系統(tǒng)的模塊與結(jié)構(gòu)，主要分為功能模塊的設(shè)計(jì)和數(shù)據(jù)庫結(jié)構(gòu)等等。系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)5.1登錄注冊(cè)模塊系統(tǒng)運(yùn)行成功后，用戶可以以未登錄狀態(tài)進(jìn)行系統(tǒng)首頁的訪問，首頁可以進(jìn)行大學(xué)基礎(chǔ)信息的瀏覽，還可以根據(jù)大學(xué)的地區(qū)類型和類型進(jìn)行大學(xué)的篩選，根據(jù)大學(xué)名稱進(jìn)行搜索。但是如果想要進(jìn)行部分操作，比如預(yù)約購票等，需選擇進(jìn)行登錄，跳轉(zhuǎn)登錄頁面。主頁面如圖5-1所示，登錄頁面如圖5-2所示。圖5-1首頁頁面圖5-2登錄頁面用戶登錄代碼具體如下：@PostMapping("/login")

publicResultlogin(@RequestBodyAccountaccount){

AccountdbUser=getUserInfo(account);

if(ObjectUtil.isNull(dbUser)){

thrownewCustomException(ResultCodeEnum.USER_NOT_EXIST_ERROR);

}

if(!dbUser.getPassword().equals(account.getPassword())){

if(!dbUser.getPassword().equals(DigestUtils.md5DigestAsHex(account.getPassword().getBytes()))){

thrownewCustomException(ResultCodeEnum.USER_ACCOUNT_ERROR);

}

}

StringtokenData=dbUser.getId()+"-"+RoleEnum.valueOf(account.getRole()).name();

Stringtoken=jwtUtil.createToken(tokenData);

dbUser.setToken(token);

returnResult.success(dbUser);

}

privateAccountgetUserInfo(Accountaccount){

switch(RoleEnum.valueOf(account.getRole())){

caseADMIN:

returnadminService.selectByAccount(account.getAccount());

caseFACILITATOR:

returnfacilitatorService.selectByAccount(account.getAccount());

default:

returnuserService.selectByAccount(account.getAccount());

}

}5.2注冊(cè)模塊用戶如果初次使用該系統(tǒng)，想要登錄，需要前往注冊(cè)頁面進(jìn)行系統(tǒng)賬號(hào)的注冊(cè)，用戶輸入賬號(hào)、密碼和用戶名進(jìn)行注冊(cè)。用戶注冊(cè)頁面如圖5-3所示。圖5-3注冊(cè)頁面用戶注冊(cè)代碼具體如下：validatePassword(rule,confirmPassword,callback){

if(confirmPassword===''){

callback(newError('請(qǐng)確認(rèn)密碼'))

}elseif(confirmPassword!==this.form.password){

callback(newError('密碼不一致'))

}else{

callback()

}

},

register(){

this.$refs.form.validate((valid)=>{

if(valid){

this.$axios.post('/register',this.form).then(res=>{

if(res.code==='200'){

this.$message.success('注冊(cè)成功')

this.$router.push('/login')

}else{

this.$message.error(res.msg)

}

}).catch(()=>{

});

}

})

},5.3個(gè)人信息中心模塊用戶登錄成功之后，可以點(diǎn)擊右上角的下拉標(biāo)識(shí)，選擇個(gè)人信息，查詢自己的相關(guān)信息，如頭像、聯(lián)系電話、名稱等，可以對(duì)其進(jìn)行編輯，同時(shí)可以選擇修改密碼按鈕，對(duì)賬號(hào)的密碼進(jìn)行修改，修改成功后會(huì)自動(dòng)退出系統(tǒng)，跳轉(zhuǎn)登錄頁面進(jìn)行重新登錄。個(gè)人信息頁面如圖5-4所示。圖5-4個(gè)人信息頁面用戶個(gè)人信息修改代碼具體如下：asyncupdateInfo(){

constuserUpdate=JSON.parse(JSON.stringify(this.userMessage))

if(!userU?.trim()){

this.$message.warning('用戶名稱不能為空');

return;

}

awaitthis.$axios.put('/user/update',userUpdate).then(res=>{

if(res.code==='200'){

this.$message.success("修改成功")

Object.assign(this.user,userUpdate);

localStorage.setItem('USER_user',JSON.stringify(userUpdate));

this.userInfoVisible=false

}

})

},asyncclearDefaults(){

try{

constres=awaitthis.$axios.put('/address/clearDefault',{

userId:this.user.id

});

if(res.code==='200'){

this.loadAddress();

}

}catch(error){

this.$message.error(`操作失?。?{error.response.data.msg}`);

}

},

handleDefault(row){

if(row.isDefault){

this.$message.warning('該地址已是默認(rèn)狀態(tài)');

return;

}

this.$confirm('確定設(shè)為默認(rèn)地址？','操作確認(rèn)',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()=>{

this.updateDefault(row,true);

this.loadAddress()

})

},

updateDefault(row,isDefault){

this.form={...row,isDefault:isDefault};

this.clearDefaults();

this.$axios.put('/address/update',this.form).then(res=>{

if(res.code==='200'){

this.addressData=this.addressData.map(item=>({

...item,

isDefault:item.id===row.id

}));

this.$message.success('設(shè)置默認(rèn)地址成功');

}else{

this.$message.error(res.msg)

}

})

},5.4大學(xué)模塊用戶登錄成功后，可以點(diǎn)擊首頁的大學(xué)信息，跳轉(zhuǎn)大學(xué)的詳情頁面，點(diǎn)擊不同的標(biāo)簽，能夠查看該大學(xué)的介紹、評(píng)價(jià)、門票和地圖。查看該大學(xué)的介紹，可以瀏覽更多大學(xué)圖片和文字詳情。查看該大學(xué)的評(píng)價(jià)，可以瀏覽該大學(xué)下的評(píng)論，同時(shí)也可以進(jìn)行評(píng)論和評(píng)論回復(fù)。查看該大學(xué)下的門票，可以進(jìn)行購買，輸入對(duì)應(yīng)的訂單信息，確認(rèn)購買后跳轉(zhuǎn)訂單頁面，點(diǎn)擊對(duì)應(yīng)訂單的進(jìn)行支付按鈕，跳轉(zhuǎn)門票支付頁面，進(jìn)行支付后完成購買。查看該大學(xué)下的地圖可以瀏覽大學(xué)周邊信息。查看大學(xué)介紹頁面如圖5-5所示，查看大學(xué)評(píng)價(jià)頁面如圖5-6所示，發(fā)布評(píng)論頁面如圖5-7所示，回復(fù)評(píng)論如圖5-8所示，查看大學(xué)門票頁面如圖5-9所示，門票購買頁面如圖5-10所示，訂單頁面如圖5-11所示，支付頁面如圖5-12所示，查看大學(xué)地圖頁面如圖5-13所示。圖5-5大學(xué)介紹頁面圖5-6大學(xué)評(píng)價(jià)頁面圖5-7大學(xué)評(píng)論頁面圖5-8評(píng)論回復(fù)頁面用戶進(jìn)行評(píng)論代碼具體如下：publicList<GoodComment>getCommentsWithReplies(IntegergoodId){

List<GoodComment>topComments=goodCommentMapper.selectTopComments(goodId);

topComments.forEach(goodComment->

goodComment.setReplies(getRepliesRecursive(goodComment.getId()))

);

returntopComments;

}

privateList<GoodComment>getRepliesRecursive(IntegerparentId){

List<GoodComment>replies=goodCommentMapper.selectReplies(parentId);

replies.forEach(reply->

reply.setReplies(getRepliesRecursive(reply.getId()))

);

returnreplies;

}<transitionname="fade">

<divv-if="activeReplyId===comment.id"class="reply-box">

<el-input

v-model="replyContent"

type="textarea"

:rows="2"

:placeholder="`回復(fù)@${comment.userName}`"

resize="none"

/>

<divclass="reply-actions">

<el-button@click="activeReplyId=null"size="mini">取消</el-button>

<el-buttontype="primary"size="mini"@click="handleReply(comment)">發(fā)送</el-button>

</div>

</div>

</transition>

<div

v-if="comment.replies"

class="nested-comments"

>

<SpotCommentList

:spot-comment-data="comment.replies"

:depth="depth+1"

@comment-refresh="$emit('comment-refresh')"

/>

</div>圖5-9門票查看頁面圖5-10門票購買頁面門票購買具體代碼如下：publicvoidadd(SpotOrderspotOrder){

spotOrder.setCreateTime(LocalDateTime.now());

if(spotOrder.getTotalPrice()!=null&&

spotOrder.getTotalPrice().compareTo(BigDecimal.ZERO)==0){

spotOrder.setStatus("已支付");

}else{

spotOrder.setStatus("未支付");

}

spotOrderMapper.insert(spotOrder);

}selectTicket(data){

constdiscountTotal=this.ticket.discount===null?1:(this.ticket.discount/10);

consttotalPrice=data.num*this.data.ticketPrice*discountTotal;

this.data.totalPrice=totalPrice;

returnMath.round(totalPrice*100)/100;

},

addSpotOrder(ticket){

this.$refs.buyTicket.validate((valid)=>{

if(valid){

this.data.userId=this.user.id;

this.data.spotId=this.spotId;

this.data.facilitatorId=this.spotsData.facilitatorId;

this.$axios.post('/spotOrder/add',this.data).then(res=>{

if(res.code==='200'){

this.$message.success("下單成功,請(qǐng)進(jìn)行支付");

this.typeTicket=false;

this.updateNum(ticket,this.data.ticketNum-this.data.num)

console.log('item內(nèi)容:',ticket)

console.log('新數(shù)據(jù)：',this.data.ticketNum-this.data.num);

this.push('/user/SpotOrder');

}else{

this.$message.error(res.msg);

}

})

}else{

returnfalse;

}

})

},圖5-11訂單頁面圖5-12支付頁面圖5-13大學(xué)地圖頁面5.5購物車模塊登錄后的用戶點(diǎn)擊右上角的下拉列表，選擇查購物車，跳轉(zhuǎn)頁面，可以瀏覽購物車信息，同時(shí)可以進(jìn)行相應(yīng)的下單和刪除。購物車頁面如圖5-14所示。圖5-14購物車頁面購物車具體代碼如下：setDefaultAddress(){

if(!this.addressId){

constdefaultAddress=this.addressData.find(item=>item.isDefault);

if(defaultAddress){

this.addressId=defaultAddress.id;

}

}

},

handleCart(item,newTypeId){

item.typeId=newTypeId;

constoldTypeId=item.typeId;

this.$confirm('確認(rèn)更換商品種類嗎？','提示',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()=>{

this.updateType(item,newTypeId);

this.loadCart(1)

}).catch(()=>{

item.typeId=oldTypeId;

});

},5.6商品購買模塊用戶登錄成功之后，點(diǎn)擊首頁的商品信息，跳轉(zhuǎn)商品信息頁面，進(jìn)行商品信息的瀏覽，點(diǎn)擊對(duì)應(yīng)的商品圖片或者查看詳情按鈕，跳轉(zhuǎn)商品詳情頁面，選擇介紹標(biāo)簽，可以查看商品介紹；選擇評(píng)論標(biāo)簽可以查看該商品下的評(píng)論，并進(jìn)行相應(yīng)的評(píng)論和評(píng)論回復(fù)；選擇商品類型標(biāo)簽，查看該商品下發(fā)布的商品規(guī)格，進(jìn)行購買或者加入購物車，輸入訂單信息，確認(rèn)下單后跳轉(zhuǎn)訂單頁面，點(diǎn)擊對(duì)應(yīng)訂單的進(jìn)行支付按鈕，跳轉(zhuǎn)支付頁面，進(jìn)行支付后完成購買。商品信息頁面如圖5-15所示，商品介紹頁面如圖5-16所示，商品規(guī)格信息如圖5-17所示，商品購買頁面如圖5-18所示，訂單頁面如圖5-19所示。圖5-15商品信息頁面圖5-16商品介紹頁面圖5-17商品規(guī)格頁面圖5-18商品購買頁面圖5-19訂單頁面訂單取消代碼具有如下：@Scheduled(cron="0*****")

publicvoidcheckOrder(){

LocalDateTimenow=LocalDateTime.now();

Durationduration=Duration.ofMinutes(15);

LocalDateTimeexpiryTime=now.minus(duration);

List<SpotOrder>expiredOrders=spotOrderMapper.selectOrder("未支付",expiryTime);

for(SpotOrderorder:expiredOrders){

order.setStatus("已取消");

spotOrderMapper.update(order);

}

}cancelOrder(item){

if(item.status==='待發(fā)貨'||item.status==='未支付'){

this.$confirm('確認(rèn)取消該訂單嗎？','提示',{

confirmButtonText:'確定',

cancelButtonText:'取消',

}).then(async()=>{

awaitthis.loadGoodType(item.typeId);

this.updateStatus(item,"已取消");

constnewNumber=this.type.num+item.num;

awaitthis.updateNum(this.type,newNumber);

}).catch(action=>{

constcancel=action==='cancel'?'已取消操作':'已關(guān)閉彈窗';

this.$(cancel);

});

}

else{

this.$message.warning('當(dāng)前訂單不在可取消范圍內(nèi)！')

}

},5.7大學(xué)管理員模塊大學(xué)管理員模塊主要是登錄后通過審核的大學(xué)管理員進(jìn)行對(duì)大學(xué)、門票、商品、商品規(guī)格、大學(xué)路線等的增刪改查。同時(shí)，大學(xué)管理員可以進(jìn)行售出訂單的查看。大學(xué)管理員首頁如圖5-20所示，大學(xué)管理頁面如圖5-21所示，大學(xué)信息發(fā)布如圖5-22所示，訂單查看如圖5-23所示，數(shù)據(jù)分析頁面如圖5-24所示。圖5-20大學(xué)管理員首頁頁面圖5-21大學(xué)管理頁面圖5-22大學(xué)發(fā)布頁面圖5-23訂單管理頁面圖5-24數(shù)據(jù)分析頁面數(shù)據(jù)分析代碼具體如下：fetchSalesData(){

this.$axios.get('/orderChart/selectSales',{

params:{

facilitatorId:this.user.id

}

}).then(res=>{

if(res.code==='200'){

this.salesData=res.data;

this.initChart();

}

else{

console.error('獲取銷售額數(shù)據(jù)失?。簲?shù)據(jù)為空');

}

}).catch(error=>{

console.error('獲取銷售額數(shù)據(jù)失敗：',error);

this.$message.error('獲取數(shù)據(jù)失敗，請(qǐng)稍后重試');

});

},

initChart(){

this.chart=echarts.init(this.$refs.chart);

constoption={

title:{

text:'已完成訂單銷售額折線圖(過去30天內(nèi))',

},

tooltip:{

trigger:'axis',

},

xAxis:{

type:'category',

data:this.salesData.map(item=>item.date),

},

yAxis:{

type:'value',

},

series:[

{

name:'銷售額',

type:'line',

data:this.salesData.map(item=>item.sales),

},

],

};

this.chart.setOption(option);

},5.8用戶管理模塊登錄后的管理員可以對(duì)用戶和大學(xué)管理員進(jìn)行管理，可以對(duì)其賬號(hào)進(jìn)行封禁和開放處理，封禁后的賬號(hào)將限制登錄，同時(shí)管理員還可以修改服務(wù)商的審核狀態(tài)，只有審核通過的商戶才可以進(jìn)行產(chǎn)品的發(fā)布和管理。用戶管理如圖5-25所示，服務(wù)商管理如圖5-26所示，數(shù)據(jù)分析如圖5-27所示。圖5-25用戶管理頁面圖5-26服務(wù)商管理頁面圖5-27數(shù)據(jù)分析頁面數(shù)據(jù)分析具體代碼如下：@GetMapping("/spot-stats")

publicResultgetSpotStats(){

returnorderInfoService.getSpotStats();

}@Select("SELECTASspotName,COUNT(o.id)AScountFROMspot_orderoLEFTJOINspotsONo.spot_id=s.idwhereo.status='已完成'GROUPBYo.spot_id")

List<OrderInfo>