1基于微信小程序的數(shù)據(jù)采集可視化平臺設(shè)計目錄第1章緒論 2 2 第2章數(shù)據(jù)采集端的基本結(jié)構(gòu)和組件 4 42.1.1SpringBoot框架介紹 4 5 2.2.2微信小程序架構(gòu)介紹 3.1.2數(shù)據(jù)可視化部分后臺架構(gòu) 3.2.1Vue框架介紹 3.2.2基于Vue的可視化界面架構(gòu)介紹 28 第5章總結(jié)與展望 2隨著計算機(jī)算力的大幅度提升，人工智能行業(yè)正在逐步的走進(jìn)人們的視線，深度學(xué)習(xí)，機(jī)器學(xué)習(xí)各種算法概念層出不窮。但是，正如一切事物的發(fā)展過程一樣，由數(shù)據(jù)支撐的人工智能行業(yè)逐漸顯示出了他的瓶頸一一數(shù)據(jù)不足，數(shù)據(jù)預(yù)處理復(fù)雜，大量數(shù)據(jù)獲取對個人與中小企業(yè)開發(fā)者十分具有難度，由于這種局限，由數(shù)據(jù)支撐的人工智能行業(yè)更多的由大型企業(yè)和實(shí)驗(yàn)室把控，因此需要一個由更多人參與的數(shù)據(jù)采集平臺來方便更多的小微企業(yè)與開發(fā)者們。數(shù)據(jù)采集平臺是一種統(tǒng)一的的數(shù)據(jù)采集和處理分發(fā)的集成服務(wù)提供者，它通過其本身提供數(shù)據(jù)采集服務(wù)和數(shù)據(jù)處理服務(wù)，同時整合互聯(lián)網(wǎng)環(huán)境下的參與用戶，向客戶提供一套完整的數(shù)據(jù)采集以及處理的方案。平臺數(shù)據(jù)可視化同時為數(shù)據(jù)采集平臺提供了更多元化的用戶群體，通過將運(yùn)營的數(shù)據(jù)可視化可以更加方便對平臺的采集群體傾向進(jìn)行分析，是的任務(wù)發(fā)布方的運(yùn)營者可以更好地針對相應(yīng)的用戶群體發(fā)布更加合適的任務(wù)，同時可以使得運(yùn)營數(shù)據(jù)更加的具象，方便提取數(shù)據(jù)重點(diǎn)。論文引入數(shù)據(jù)采集平臺相關(guān)構(gòu)建方法和使用組件，利用Java語言的SpringBoot框架作為后臺服務(wù)的主要模塊框架，同時使用Mysql和Redis作為存儲和緩存數(shù)據(jù)庫，加強(qiáng)后臺服務(wù)模塊的健壯性。使用微信小程序作為數(shù)據(jù)采集的前臺模塊，是的用戶更好上手使用，提高前臺模塊的易用性。引入可視化平臺的相關(guān)構(gòu)建方法和使用組件，利用Python語言的Django框架作為后臺服務(wù)的主要模塊框架，同時使用Mysql作為存儲數(shù)據(jù)庫，使用Python的第三方庫可以極大提高處理數(shù)據(jù)的能力。使用Vue框架作為可視化平臺的前端展示框架，JavaScript的第三方庫對數(shù)據(jù)可視化做了很好的支持。針對后臺服務(wù)中可能出現(xiàn)的并發(fā)問題，本文結(jié)合Java中的線程池和鎖以及Redis數(shù)據(jù)庫的緩存機(jī)制進(jìn)行優(yōu)化，在并發(fā)數(shù)量支持得到了極大提升。關(guān)鍵詞：數(shù)據(jù)采集可視化平臺；微信小程序；Springboot;Mysql;Redis;Dajngo;Vue所謂的數(shù)據(jù)就是常說的數(shù)值，也就是某種可以通過我們實(shí)驗(yàn)，觀察或計算得出的結(jié)果。數(shù)據(jù)有很多種類，數(shù)字是其中最簡單的。文字、圖像、聲音等也都是數(shù)據(jù)的一種。科學(xué)研究、設(shè)計、查證、數(shù)學(xué)等都有數(shù)據(jù)的身影。技術(shù)及應(yīng)用系統(tǒng)以用于模擬、延伸和擴(kuò)展人的智能，是一門新的技術(shù)科學(xué)。它了解智能的實(shí)質(zhì)，企圖生產(chǎn)出一種以人類智能相似的方式做出反應(yīng)的新的能智能機(jī)器，包括機(jī)器人、語言識別、圖像識別、自然語言處理和專家系統(tǒng)等都屬于該領(lǐng)域的研究。理論和技Redis緩存首頁的任務(wù)數(shù)據(jù)審核改變態(tài)，回復(fù)用戶審核任務(wù)發(fā)布頻，文字的采集任務(wù)。任務(wù)管理用戶可以查看任務(wù)的進(jìn)行狀的數(shù)據(jù)。圖2-2數(shù)據(jù)采集端后臺架構(gòu)主要如上圖2-2所示，從微信小程序端發(fā)送過來的Http請求被Controller層(MVC中的C)中去查詢業(yè)務(wù)邏輯，首先匹配到Redis中讀取緩存，若是找不到相關(guān)的緩存，則通過Mybatis去Mysql中查詢數(shù)據(jù)，寫入Redis,之后再返回給微信小程序段，完成一次Http請求。下面會詳細(xì)說明每一步所用到的結(jié)構(gòu)設(shè)計或組件的功能路徑去SpringBoot容器中尋找所有已經(jīng)注冊在容器中的ControllerBean,根據(jù)路由信息匹配到相應(yīng)的Bean,并將解析好的http上下文根據(jù)Bean的屬性配置解析為相應(yīng)的參數(shù)以供Controller使用。@Controller綁定到Spring的容器中，由Spring的容器通過DispathcherServlet對這些bean進(jìn)行綁定的分發(fā)嗎，并且傳入上下文。通過這樣的方式，用戶就可以通過如果一個架構(gòu)符合REST原則，就稱它為RESTful架構(gòu)。即：6(1)每一個URI代表一種資源；(2)客戶端和服務(wù)器之間，傳遞這種資源的某種表現(xiàn)層；(3)客戶端通過四個HTTP動詞，對服務(wù)器端資源進(jìn)行操作，實(shí)現(xiàn)"表現(xiàn)層狀態(tài)轉(zhuǎn)通過RestFul的設(shè)計模式，我們可以使得Url表達(dá)出更多含義更容易讓人理解并進(jìn)行使用和解析。例如如下所示代碼根據(jù)用戶名獲取微信的Openid,僅通過Url就可以明@GetMapping("/users/{username@PathVariable("username")S}與上文Restful相關(guān)，通過用戶的請求我們可以判斷出用戶的行為，而對于Get請求 (即獲取信息)來說，用戶行為是冪等的，即在底層數(shù)據(jù)沒有被改寫的情況下，不論多少次的數(shù)據(jù)查詢查詢到的數(shù)據(jù)應(yīng)當(dāng)是完全一致的1PageHelper.startPage(pageNumb,page("從緩存獲取的數(shù)據(jù)"+list);//從數(shù)據(jù)庫中獲取信息15.("從數(shù)據(jù)庫中獲取數(shù)據(jù)");19.("數(shù)據(jù)插入緩存"+str);通過代碼我們不難看出主要邏輯分為三個部分，查找是否存在key->存在取出返回，不存在去數(shù)據(jù)庫查找再存入，這樣就避免了每次查找都要去mysql中讀取數(shù)據(jù)，使得數(shù)據(jù)使用Redis同樣也會存在一些問題，在本項(xiàng)目中主要遇到的問題有兩個。1、緩存和主存信息不同步。在最開始開發(fā)時，我只是單純數(shù)據(jù)時刷新，但是這時會遇到一個一個問題就是用戶更新數(shù)據(jù)后，redis中的key還存在，所以直接數(shù)據(jù)并未被更新。這時就會導(dǎo)致主存不同步的問題，在寫入時我們可以使用spring框架中的AOP開始事務(wù)功能保證每一次寫入redis和mysql的原子性，在出現(xiàn)問題時，同時回退，保證兩者之間的數(shù)據(jù)統(tǒng)一。2、在極端情況下主要保證主存的可用性，所以每一次寫入redis時，我們要刪鍵，這樣就可以保證即使再刪除時出現(xiàn)問題，下一次查詢也會直接去mysql中查詢最新用戶對于打開時間比較敏感，過長的時間會導(dǎo)致用淘汰機(jī)制，我這邊使用的是給key添加過期時間，在時間過期后自動刪除相應(yīng)的key和value,同時也開啟了redis的策略，每過一段時間淘汰最久沒有被訪問到的key。雙管齊MyBatis和Mysql:在這一部分我將mybatis和mysql放到一起進(jìn)行說明。Mysql:mysql是當(dāng)前市面上最流行的關(guān)系型數(shù)據(jù)庫之一，是Oracle旗下的一款產(chǎn)品，最為主要的是mysql提供了社區(qū)的開源版本，是的中小型開發(fā)者可以免費(fèi)使用，所以本項(xiàng)目也使用了mysql作為主要數(shù)據(jù)庫。關(guān)系型數(shù)據(jù)庫主要通過一張張表結(jié)構(gòu)來存儲大量的數(shù)據(jù)，并對其進(jìn)行分類。而在本項(xiàng)目中主要用到mysql的兩個特性為事務(wù)和索引，將在下面詳8MyBatis,是github上的一款開源的由java編寫的持久層框架，主要負(fù)責(zé)將java代碼映射為jdbc同時轉(zhuǎn)換為相應(yīng)的sql語句進(jìn)行查詢，并將查詢后的結(jié)果再次轉(zhuǎn)換為java對象供代碼使用。Mybatis使用xml進(jìn)行配置，使得其與java的業(yè)務(wù)邏輯代碼解耦，同時防止了sql諸如等sql安全問題。圖2-3上圖2-3主要展示了上圖2-3主要展示了mybatis的工作原理，通過圖片我們可以清晰的看出，mybatis主要通過項(xiàng)目中配置的mybatis-config.xml來生成設(shè)計模式中工廠模式的SqlSessionFactory,生成出這個大工廠后，就監(jiān)聽每一次的代碼中的sql調(diào)用，生成出sqlsession,同時去查找當(dāng)前查找所映射的mapper.xml來生成相應(yīng)的sql語句，從而進(jìn)行<!--任務(wù)類型排查找--><selectid="job_img_find"resultType介紹了mybatis的使用后，我們來看mysql。jobjobjob_typevarchar(255)job_contentvarchar(255)job_publisher_openidvarchar(255)job_startvarchar(255)job_audit_typevarchar(255)job_rulesjob_post如上圖2-4所示，項(xiàng)目的主要表結(jié)構(gòu)，主要分為任務(wù)，任務(wù)用戶關(guān)系表，任務(wù)提交關(guān)系表，任務(wù)規(guī)則關(guān)系表，用戶表。其中因?yàn)槿蝿?wù)和用戶了任務(wù)提交表，任務(wù)用戶表，任務(wù)接取表做了中間表存儲雙方的主鍵和中間狀態(tài)關(guān)Mysql在本項(xiàng)目中除了使用關(guān)系型結(jié)構(gòu)做表關(guān)系映射外主要有兩個方面的一個是mysql的索引。Mysql的底層主要是使用B+樹來做存儲，B+樹的主要結(jié)構(gòu)如下圖圖2-5555589QQQQQQQQQB+樹作為mysql的底層的數(shù)據(jù)結(jié)構(gòu)的特點(diǎn)主要有：這樣的一些特點(diǎn)和可以保證B+樹的磁盤讀寫代價低，查詢效率更加穩(wěn)數(shù)據(jù)庫的掃描。同樣，因?yàn)橛辛薆+樹作為索引，mysql的Innodb引擎則針對B+樹的特色對索引進(jìn)行了升級。Innodb是用了以主鍵索引為主的聚集索引，主要如下圖2-5所示。使用了聚集索引的mysql將當(dāng)前字段的所有數(shù)據(jù)保存在以主鍵為主的樹的葉子節(jié)點(diǎn)上，與傳統(tǒng)的非聚集索引相比，通過主鍵檢索的速度將會更加的快速，同時可以利用其B+樹的底層為鏈主鍵索引輔助鍵索引757577575MicrosoftMicrosoftMicrosoft第二個主要用到的特性為mysql的事務(wù)隔離機(jī)制，mysql的事務(wù)隔離機(jī)制主要由于事圖2-7隔離級別√√√×√√××√×××而這四種個隔離級別主要由以下幾種并發(fā)問題導(dǎo)致和解決：1、更新丟失：□臟讀：一個事務(wù)讀取其他事務(wù)未提交的數(shù)據(jù)2、不可重復(fù)讀：事務(wù)A多次讀取某數(shù)據(jù)，事務(wù)B對數(shù)據(jù)修改，導(dǎo)致事務(wù)A多次致·InnoDB采用MVCC解決每條數(shù)據(jù)后面加了隱藏的兩列(創(chuàng)建版本號和刪除版本號),每個事務(wù)在開始的時候都會有一個遞增的版本號·2、查詢時當(dāng)前事務(wù)的版本號需要小于刪除的版本號3、幻讀：事務(wù)(T1)讀取了幾行數(shù)據(jù)，接著在隨后的查詢中，第一個事務(wù)(T1)就會發(fā)現(xiàn)多了一些原本不存在的記錄，就好像發(fā)生了o若走主鍵外的索引，對當(dāng)前索引以及主鍵索引上對應(yīng)的記錄都上鎖o根據(jù)檢索條件向左尋找最靠近檢索條件的記錄值A(chǔ),作為左區(qū)間，向右尋找防止間隙內(nèi)有新數(shù)據(jù)被插入。(2)防止已存在的數(shù)據(jù)，更新成間隙內(nèi)的數(shù)通過mysql的innodb的隔離級別，我們可以很輕松的解決由于數(shù)據(jù)并發(fā)問題所導(dǎo)致的數(shù)微信小程序是微信開發(fā)的一個用于在微信中嵌入web應(yīng)用供用戶使用的一款開發(fā)這框架，微信小程序的開發(fā)流程和前端的開發(fā)流程十分相似，并且使去用戶登錄，鑒權(quán)，等各類web網(wǎng)站本來就有的問題，是的開發(fā)者更加的專注于業(yè)務(wù)邏輯的表達(dá)。同時微信小程序自帶天生的微信流量，更加方便我們項(xiàng)目這種需要大量互聯(lián)兩個大的架構(gòu)模塊：視圖View模塊和服務(wù)Service模塊，他們獨(dú)立運(yùn)行在不同的個WebView組件中(網(wǎng)頁的一個頁面),由開發(fā)者編寫wxml和wxss代碼來展示頁面的UI,小程序支持同時展示多個View,View模塊和Service的數(shù)據(jù)交互主要通過微信小程設(shè)計與View中的Js設(shè)計相似，每個應(yīng)用只有一個Service進(jìn)程，主管整個微信小程序的生命周期，每個View發(fā)送過來的通訊消息都在Service的整個主進(jìn)下面我們通過代碼展示一次完整的通向java后臺的http請求。型為submit,Service層會通過submit找到這條消息并進(jìn)行解析圖2-8音頻采集○圖片采集○文字采集字?jǐn)?shù)限制在200字以內(nèi)樣例添加：是聯(lián)系方式：請輸入您的主要聯(lián)系方式發(fā)布任務(wù)否無style="margin-bottom:2px;margin-rialign:middle;width:30px;height:30px;<textclass="weui-label"style='font-size:800'>標(biāo)題：</text><viewclass="weui-cellweui-cell_input<inputplaceholder="請輸入任務(wù)標(biāo)題"name="title"value='{{forminfo}}'/>…<buttonclass="weui-btn"type="primary"formType='submit'>發(fā)布任務(wù)</button>后臺代碼如下，通過formSubmit函數(shù)接受View層發(fā)送過來的消息，之后將View的數(shù)據(jù)獲取并構(gòu)成一個js對象，之后調(diào)用微信底層模塊request方法，發(fā)送http請求，請求的對象由app.globalData(微信小程序的全局配置)決定，發(fā)送的請求因?yàn)橛袌D片文件的存在，所以還用到了wx.upLoadFile進(jìn)行圖片的異步上傳到后臺，在最后通過解析后臺返回的http狀態(tài)碼，如果是200則進(jìn)入Success函數(shù)，通過showPop函數(shù)在View界面展示提交成功的彈窗，若是后臺返回鵝狀態(tài)碼不是200,則進(jìn)入Fail函數(shù)，跳轉(zhuǎn)到設(shè)置好的錯誤界面引導(dǎo)用戶根據(jù)提示進(jìn)行下一步操作。varformData=e.detavaropenid=app.globalDat…url:app.globalData.URL+/user/inter'content-type':'application/x-www-fapp.globalData.account=res.data.user_varaccount=(res.data.user_accou29.url:app.globalData.URL+/user/35.'content-type':'application48.url:app.globalData.URL+'/job/exurl:.../pages/error/}url:.../pages/error/url:../pages/error/通過上文中的方法，類似的我們很快可以構(gòu)建出很多的View界面與Service進(jìn)行消息交互來改變View界面的數(shù)據(jù)狀態(tài)進(jìn)行不同效果的展示，同時利用微信的底層模塊與后臺進(jìn)行通訊，完成數(shù)據(jù)的更新和展示。第3章數(shù)據(jù)可視化部分的基本結(jié)構(gòu)和組件Django,一款使用Python編寫的開源框架。與上文中介紹的Spring不同的是，Spring是一款軟件開發(fā)框架，主要用來作用與軟件開發(fā)的各個領(lǐng)域和方向。而Django不模式類似為Model(模型),View(視圖),Template(模板),模型層又可以被稱作數(shù)據(jù)層，主要用來將數(shù)據(jù)進(jìn)行處理和轉(zhuǎn)換，將其輸入至視圖層中，而視圖層類似以MVC中的將其利用模型層獲取并整理數(shù)據(jù)，最后將其輸出至請求的相應(yīng)中返回給模板層進(jìn)行數(shù)據(jù)Django相對于上文中的Spring相比，更加的專注于WEB應(yīng)用的開發(fā)，首先，因?yàn)槭荳EB應(yīng)用的開發(fā)框架，所以與WEB框架無關(guān)的一些配置，在Django中是不會提供原生庫依賴進(jìn)行支持，這樣就使得Dajngo的配置參數(shù)相對于Spring這種大型軟件的開發(fā)框架來說更加的少，輕便，是的開發(fā)更加的快速，開箱即用。同時Dj專門開發(fā)出了ORM對象關(guān)系映射系統(tǒng)，方便更加優(yōu)雅的進(jìn)行數(shù)據(jù)庫查詢，并對底層進(jìn)行了很好的優(yōu)化，更有緩存，國際化，管理頁面等每個WEB項(xiàng)目都會遇到的功能的開箱即用的組件，加上Python原生的對數(shù)據(jù)處理的支持，使用Django來做數(shù)據(jù)可視化部DjangoRestFrameWork是一款基于Django的rest設(shè)計模式的框架，在Django框架的基礎(chǔ)上，DjangoRestFrameWork原生的提供了對rest設(shè)計模式的支持，對于Rest設(shè)計模式中的“動作”這個概念做了很好的處理，使得開發(fā)據(jù)可視部分的前端較為復(fù)雜，所以對前端的開發(fā)使用了前后可以使得數(shù)據(jù)更加靈活的進(jìn)行展示，但是同時也會因以需要使用JSON數(shù)據(jù)格式進(jìn)行數(shù)據(jù)交互，而使用DjangoRestFrameWork可以原生的支后臺架構(gòu)類似，主要由前端發(fā)送過來請求，之后由服務(wù)器端的邏文中數(shù)據(jù)采集的后臺架構(gòu)，數(shù)據(jù)可視化的數(shù)據(jù)架構(gòu)則更加的簡單，去掉了使用redis的緩更多的部署數(shù)據(jù)庫訪問，而是后臺的數(shù)據(jù)計算，所以使用緩存的意義不大，直接請求即可。同時去掉了Mybatis而是使用了Django支持的更加優(yōu)雅的ORM系統(tǒng)進(jìn)行數(shù)據(jù)庫訪VUEVUE-數(shù)據(jù)可視化前端時間博度jegn-00M任務(wù)審核時用戶發(fā)布的任對用廣的展樂以畫為殖理的圖3-1對于上文中出現(xiàn)的技術(shù)架構(gòu)不再進(jìn)行贅述，本部分更多的介紹Django中獨(dú)有的后臺架構(gòu)，首先，DajngoRestFrameWork的架構(gòu)設(shè)計。router=CustomRouter(trailing_slrouter.register(r'job_audit',job_audit.JobAuditViewSet,basename="job_filter_backends=[DjangoFilterBackend,filters.SearchFilter,filtefilterset_fields=['audit_state','job_permission_classes=[IsAuthenticated,Admauthentication_classes=[JWTAuthejob_id=models.AutoFijob_type=models.Chajob_content=models.Charjob_example=models.CharFieldjob_publisher_openid=models.CharFieldjob_start=models.CharFieldjob_end=models.CharFieldjob_receive_numb=modeljob_complete_numb=modeljob_join_numb=modelaudit_state=models.CharField(job_tag_type=models.CharFieldjob_tag_content=models.CharFieldjob_audit_type=models.CharFieldjob_audit_content=models.Charemail=models.CharField(ma上文代碼為最標(biāo)準(zhǔn)的DjangoRestFrameWork代碼架構(gòu)的一個實(shí)現(xiàn)，首先通過集成由系統(tǒng)，并將我們需要的路由通過寫定的Url關(guān)鍵字綁定在域名之后。之后再將當(dāng)前的視圖類繼承DjangoRestFrameWork自己的視圖類ModelViewSet,這個視圖類原生的提供種HTTP請求時，DjangoRestFrameWork將自動的對模型層中的數(shù)據(jù)進(jìn)行這四種類型的操作，代碼中的QuerySet綁定的便是相關(guān)的數(shù)據(jù)模型，在下面的類定義繼承自Django自帶的Model類，其中的每個字段根據(jù)數(shù)據(jù)庫一—對應(yīng)，DjanoRestFrameWork將自己取數(shù)據(jù)庫通過ORM進(jìn)行對應(yīng)的查詢操作，filterset_fields,綁定的則為分界詞，通過分界使用的權(quán)限認(rèn)證手段和對權(quán)限認(rèn)證的工具，本項(xiàng)目使用的JWT認(rèn)證。接口的實(shí)現(xiàn)效果如下圖3-2所示。圖3-2JWT:JSONWebToken是一個繼續(xù)json對象的交換的場所，最出名的是各個網(wǎng)站間的單點(diǎn)Bearer,服務(wù)器收到后會器使用公式進(jìn)行解密，息進(jìn)行用戶的權(quán)限校驗(yàn)，判斷用戶是否具有使用當(dāng)前接口的權(quán)限，通過這樣就組成了"deta1":"Authenticationcredentialswerenotpr3.2基于VUE框架的架構(gòu)設(shè)計Vue是一款現(xiàn)在的Web應(yīng)用前端開發(fā)框架，Vue將開發(fā)聚焦在視圖層的層面上，通過自底像上進(jìn)行渲染。Vue會在核心的main.js文件中，先是通過創(chuàng)建一個總的貫穿上下文的JS-DOM對象渲染出根節(jié)點(diǎn)<div>之后將各種需要依賴javaScript庫文件導(dǎo)入根節(jié)點(diǎn)中供項(xiàng)目使用。之后用戶只用將每個視同編寫完成綁定到根節(jié)點(diǎn)上即可。通過這樣計，就可以使得每個視圖的數(shù)據(jù)可以直接綁定到HTML上，直接進(jìn)行渲染和映射。同時Vue提供了極其強(qiáng)大的功能復(fù)用，組件。組件相當(dāng)于一個預(yù)輸入的Vue視圖，可以在Vue的視圖中對其進(jìn)行引用，并且向其中傳入數(shù)據(jù)以及監(jiān)聽其中的函數(shù)回調(diào)，從而實(shí)現(xiàn)與上文中微信小程序不同的是，Vue采用的是基于視圖的設(shè)計模式，所以Vue項(xiàng)目基于每個頁面的視圖進(jìn)行編寫，同時通過Router組件來對每個路由進(jìn)行匹配，同時通過<h3class="title">用戶登錄</h3>…}}this.otherQuery=this.}}…this.$refs.loginForm.valthis.$store.dispatch('user/login',tthis.$router.push({path:}}}l如上文代碼所示，每一個Vue視圖可以分為三個部分，1、展示部分：這一部分主要由HTML編寫，在這里編寫的Html將被渲染到最后的主DOM上，進(jìn)行頁面展示2、樣式模塊：這一部分主要由CSS以及各種CSS的加強(qiáng)庫如SCSS等，這里編寫的樣式模塊主要對上面展示模塊的HTML進(jìn)行樣式渲染3、邏輯部分：Vue視圖中最主要的模Vue主進(jìn)程中，所以在這里定義的數(shù)據(jù)可以直接被渲染到Vue的DOM上，并且可以通過函數(shù)可以控制部分暴露出的Vue操作主Dom邏輯，例如上文代碼中的watch函數(shù)，用來監(jiān)聽Router的路由跳轉(zhuǎn)，將跳轉(zhuǎn)過來的路由綁定到需要重點(diǎn)向的路由上，在登錄結(jié)束后進(jìn)程中，但可以在預(yù)處理函數(shù)邏輯里引用以及視圖層上直接進(jìn)行綁定，例如上文中的handeLogin函數(shù)被watch函數(shù)綁定，對頁面進(jìn)行重定向跳轉(zhuǎn)。最后渲染出的視圖如下圖3-4所示通過如上部分的代碼編寫，我們可以很快地編寫出每使用ajax進(jìn)行Http異步請求，本項(xiàng)目主要使用axios庫，對每個類型的http請求進(jìn)行封理，都確認(rèn)無誤后將其返回給邏輯層用來監(jiān)聽的回調(diào)函數(shù)進(jìn)行相應(yīng)對視圖層進(jìn)行數(shù)據(jù)渲8.*獲取http不同請求方式對應(yīng)的函數(shù)15.return(url,data,config)=>getP23.*@param{Object}需28.asyncfunctiongetPromise(method,url,data,userConfig={}){36.http.cache.delet45.promise=newPromise(async(resolve,reject)=>{46.constaxiosRequest=ht51.handleResponse({config55.//避免cancelrequest時出現(xiàn)errormessage56.handleReject(error,config)59.returnhandleReject(error,conf61.//console.log(finally',config)64.//添加請求隊列65.http.queue.set(config)67.http.cache.set(config.requestId,promise)73.*處理http請求成功結(jié)果77.*@param{Function}promise完成函數(shù)78.*@param{Function}promise拒絕函數(shù)80.functionhandleResponse({config,response,resolve,r82.if(code!==0&&code!=='83.reject({message:response.message,code:code,data:response.datal{}})85.resolve(config.originalResponse?response:response.data,config)87.http.queue.delete(co91.*處理http請求失敗結(jié)果96.*@return{Promiseor.message,response:erroor.message,response:erro){)99.if(axios.isCance117.nextError上文中展示了，在請求前檢查請求中是否包含token,沒有則加入token,在請求結(jié)束后通過狀態(tài)碼判斷，若是沒有權(quán)限則跳轉(zhuǎn)登錄界面。之后封裝后相關(guān)的get調(diào)用函數(shù)，配置后臺的URL地址后就可以在邏輯層中調(diào)用并進(jìn)行使用對視圖層進(jìn)行數(shù)據(jù)渲染。渲染后界面如下圖所示：圖3-50◎第4章高并發(fā)問題的處理和思考4.1可能出現(xiàn)的高并發(fā)問題同一時間之內(nèi)有大量的請求來訪問同一個服務(wù)或者同一個接口，導(dǎo)致程序無法處理出現(xiàn)阻塞現(xiàn)象，體現(xiàn)在WEB上面就是網(wǎng)頁的響應(yīng)十分緩慢或者干脆掛掉不顯示，給用戶帶來問題一般是訪問的次數(shù)超過了服務(wù)可以處理的上限，無法分配多余的線程去監(jiān)聽過來的4.2問題的思考和處理2、減少并發(fā)量ngnix做方向代理進(jìn)行負(fù)載均衡將請求分配到不同的服務(wù)器或者服務(wù)器集群，將數(shù)據(jù)庫中的字段根據(jù)標(biāo)簽，比如不同數(shù)字開頭的ID存放在不同的庫中來對庫的訪問進(jìn)行分流，將這樣可以在線程結(jié)束處理后立刻讀取下一個請