表41所示：表4SEQ表\*ARABIC\s11用戶表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp50非空創(chuàng)建時(shí)間usre_namevarchar100非空賬號(hào)passwordvarchar20非空密碼sexvarchar18可以為空性別avatavarchar500可以為空頭像phone_numbervarchar11可以為空手機(jī)號(hào)碼mailboxvarchar200可以為空郵箱房源信息表：表里包括ID創(chuàng)建時(shí)間，房屋名稱，房屋戶型，地址，租賃方式，朝向，租金，建筑面積等信息，用來(lái)房源的具體信息。房源信息如表4-2所示：表4SEQ表\*ARABIC\s12房源信息表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp20非空創(chuàng)建時(shí)間house_namevarchar50非空房屋名稱house_typevarchar200非空戶型imagelongtext200非空?qǐng)D片addressvarchar200可以為空地址statusvarchar200可以為空房源狀態(tài)rental_methodvarchar200可以為空租賃方式rouse_areadouble200可以為空建筑面積orientationvarchar200可以為空朝向rentvarchar200可以為空租金describelongtext100可以為空描述updatedate30非空發(fā)布日期clicktimedatetime200非空最近點(diǎn)擊時(shí)間clicktimedatetime200非空點(diǎn)擊次數(shù)discussnumbigint200非空評(píng)論數(shù)storeupnumbigint200非空收藏?cái)?shù)租房信息表：表里包括創(chuàng)建租房信息的時(shí)間、標(biāo)題和封面，租房的價(jià)格、面積、朝向、維護(hù)配套設(shè)施以及樓層等相關(guān)信息。租房信息表如表4-3所示：表43租房信息表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp20可以為空創(chuàng)建時(shí)間titlevarchar200可以為空標(biāo)題coverlongtext50可以為空封面priceint200可以為空價(jià)格（元/月）areavarchar200可以為空面積orientationvarchar200可以為空朝向floorsvarchar200可以為空樓層elevatorsvarchar200可以為空電梯watervarchar200可以為空用水electricityvarchar200可以為空用電gasvarchar200可以為空用氣heatingvarchar100可以為空采暖maintenancevarchar100可以為空維護(hù)房屋戶型表：表里包括創(chuàng)建的時(shí)間、房屋的戶型、具體圖片信息。房屋戶型表如表4-4所示：表44房屋戶型表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp20可以為空創(chuàng)建時(shí)間house_typetimestamp200可以為空戶型imagelongtext200可以為空標(biāo)題租房申請(qǐng)表：表里包括ID，創(chuàng)建時(shí)間，房屋名稱，房屋戶型，地址，租賃方式，朝向，租金，建筑面積等信息，用來(lái)記錄租房人申請(qǐng)租房的具體信息。租房申請(qǐng)如表4-5所示：表45租房申請(qǐng)表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp20非空創(chuàng)建時(shí)間house_namevarchar50非空房屋名稱house_typevarchar200非空戶型imagelongtext200非空?qǐng)D片addressvarchar200可以為空地址rental_methodvarchar200可以為空租賃方式rouse_areadouble200可以為空面積orientationvarchar200可以為空朝向rentdouble200可以為空租金renting_timedatetime100可以為空租房時(shí)間renting_termint30非空租期totaldouble200非空總計(jì)user_namevarchar100非空賬號(hào)namevarchar200非空姓名phone_numbervarchar11非空手機(jī)號(hào)碼notesdatetime200可以為空租房備注examinebigint200非空是否審核replylongtext200可以為空審核回復(fù)留言板表：表里包括留言時(shí)創(chuàng)建時(shí)間、用戶id和用戶信息、留言和回復(fù)內(nèi)容（附加圖片）的信息。留言板如表4-6所示：表46留言板表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp20非空創(chuàng)建時(shí)間user_idbigint50非空用戶iduser_namevarchar200可以為空用戶名avatarurllongtext200可以為空頭像contentvarchar200可以為空留言內(nèi)容cpicturelongtext200可以非空留言圖片replyvarchar200可以為空回復(fù)內(nèi)容rpicturelongtext200可以為空回復(fù)圖片房源信息評(píng)論表：表里包括ID,創(chuàng)建時(shí)間、評(píng)論回復(fù)內(nèi)容，評(píng)論人的用戶名和id等信息，用來(lái)記錄房源的評(píng)論信息。房源信息評(píng)論如表4-7所示：表47房源信息評(píng)論表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp20非空創(chuàng)建時(shí)間refidbigint20非空關(guān)聯(lián)表iduser_idbigint50非空用戶iduser_namevarchar200可以為空用戶名avatarurllongtext200可以為空頭像contentvarchar200可以為空評(píng)論內(nèi)容replyvarchar200可以為空回復(fù)內(nèi)容收藏表：表里包括ID，創(chuàng)建時(shí)間，收藏房源的圖片和標(biāo)題，類型和推薦類型等信息。收藏表如表4-8所示：表48收藏表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDaddtimetimestamp20非空創(chuàng)建時(shí)間refidbigint20非空關(guān)聯(lián)表iduser_idbigint50非空用戶idtable_namevarchar200可以為空表名titlevarchar200可以為空標(biāo)題picturelogtext0可以為空?qǐng)D片typevarchar200可以為空類型inteltypevarchar200可以為空推薦類型remarkvarchar200可以為空備注配置表：表里包括id，配置參數(shù)名稱，配置參數(shù)值，url，用于存儲(chǔ)和各種數(shù)據(jù)的結(jié)構(gòu)化形式。配置表如表4-9所示：表49配置表字段數(shù)據(jù)類型長(zhǎng)度約束條件描述idbigint20非空，主鍵IDnamevarchar100非空配置參數(shù)名稱valuevarchar100非空配置參數(shù)值urlvarchar100非空url4.6系統(tǒng)流程設(shè)計(jì)4.6.1數(shù)據(jù)爬取數(shù)據(jù)來(lái)源于貝殼網(wǎng)租房鏈接上成都市的租房數(shù)據(jù)，利用Scrapy網(wǎng)絡(luò)爬蟲的主要作用是在海量的網(wǎng)絡(luò)信息中按一定規(guī)則進(jìn)行爬取和存儲(chǔ)信息REF_Ref10780\n\h[6]，來(lái)解析該網(wǎng)頁(yè)的內(nèi)容，找到匹配的內(nèi)容會(huì)存入數(shù)據(jù)庫(kù)內(nèi)；如果爬取還有下一個(gè)鏈接則需要將下一頁(yè)鏈接加入訪問(wèn)隊(duì)列，再一次解析匹配內(nèi)容、訪問(wèn)隊(duì)列為空時(shí)，會(huì)把最終匹配的數(shù)據(jù)存儲(chǔ)至數(shù)據(jù)庫(kù)。解析數(shù)據(jù)是響應(yīng)中的內(nèi)容可能有多種形式,使用正則表達(dá)式、解析庫(kù)等方法進(jìn)行解析,提取有效信息REF_Ref11381\n\h[8]。數(shù)據(jù)爬取流程圖如圖4-9所示：圖4-9數(shù)據(jù)爬取流程圖4.6.2登錄流程登錄頁(yè)面應(yīng)先選擇一個(gè)登錄角色的類型，登錄的信息與數(shù)據(jù)庫(kù)的數(shù)據(jù)進(jìn)行交互成功，登錄合法的賬號(hào)和密碼，連接成功后會(huì)自動(dòng)切換到系統(tǒng)的主頁(yè)面；如果賬號(hào)和密碼出錯(cuò)會(huì)處理出錯(cuò)事務(wù)。登錄頁(yè)面的流程圖如4-10所示。圖4-10系統(tǒng)登錄頁(yè)面的流程4.6.3租房申請(qǐng)管理用戶在房源信息管理模塊選擇合適的房源，通過(guò)對(duì)某一房源填寫其租房信息，將租房請(qǐng)求發(fā)送給管理員，可以在個(gè)人中心查看租房申請(qǐng)記錄。在管理端由管理員在租房申請(qǐng)?zhí)庍M(jìn)行對(duì)用戶的租房申請(qǐng)審核，管理員可以查看申請(qǐng)記錄并審批，并且把租房狀態(tài)反饋給用戶。如果審批通過(guò)顯示租房成功，則在房源信息欄返回現(xiàn)有房源信息，反之租房申請(qǐng)一直處于待審核狀態(tài)，用戶必須經(jīng)過(guò)管理員同意才能租房。租房申請(qǐng)流程如圖4-11所示：圖4-11租房申請(qǐng)流程第5章系統(tǒng)實(shí)現(xiàn)從上面的系統(tǒng)設(shè)計(jì)可知，根據(jù)項(xiàng)目工程的基本原理，本系統(tǒng)用SQL作為后臺(tái)的數(shù)據(jù)管理倉(cāng)庫(kù)，將其被創(chuàng)建成功有效的數(shù)據(jù)表并導(dǎo)入數(shù)據(jù)，在應(yīng)用層上與所搭建的框架成功進(jìn)行數(shù)據(jù)交互，達(dá)到系統(tǒng)的最終功能設(shè)計(jì)效果。5.1數(shù)據(jù)可視化5.1.1數(shù)據(jù)獲取網(wǎng)站的選?。貉芯扛鞣N租房網(wǎng)站的租房信息，嘗試爬取不同網(wǎng)站的租房信息對(duì)比其字段屬性是否完整，對(duì)最終選取貝殼網(wǎng)成都市的租房數(shù)據(jù)（/zufang/pg{}/#contentList）作為該系統(tǒng)的數(shù)據(jù)源；其中利用Scrapy爬蟲技術(shù)將貝殼網(wǎng)的成都市數(shù)據(jù)獲取成功并存儲(chǔ)在數(shù)據(jù)庫(kù)中。貝殼網(wǎng)房源頁(yè)面圖和房屋基本信息圖如圖5-1、5-2所示。圖51貝殼網(wǎng)房源頁(yè)面圖圖52房屋基本信息圖爬取數(shù)據(jù)前要先創(chuàng)建一個(gè)ScrapySpider類，主要功能是爬取貝殼租房成都市的租房信息，由于這個(gè)網(wǎng)頁(yè)地址有下一鏈接，因此在start_urls會(huì)提供多個(gè)url，對(duì)每一個(gè)url進(jìn)行遍歷，進(jìn)而從start_requests發(fā)出請(qǐng)求。在_init__方法中，會(huì)通過(guò)類的成員變量realtime來(lái)判斷是否是實(shí)時(shí)的，如果是實(shí)時(shí)的則從命令行參數(shù)realtime中獲取對(duì)應(yīng)的參數(shù)的值。start_requests()方法會(huì)創(chuàng)建一個(gè)生成器，它會(huì)為提供的url發(fā)送請(qǐng)求，對(duì)于帶有{}的URL會(huì)使用for循環(huán)遍歷所有頁(yè)面，其次對(duì)parse()方法繼續(xù)提取解析。數(shù)據(jù)獲取代碼如代碼5-1所示。代碼5-1數(shù)據(jù)爬取代碼classZufangxinxiSpider(scrapy.Spider):name='zufangxinxiSpider'spiderUrl='/zufang/pg{}/#contentList'start_urls=spiderUrl.split(";")protocol=''hostname=''realtime=Falsedef__init__(self,realtime=False,*args,**kwargs):super().__init__(*args,**kwargs)self.realtime=realtime=='true'defstart_requests(self):plat=platform.system().lower()ifnotself.realtimeand(plat=='linux'orplat=='windows'):connect=self.db_connect()cursor=connect.cursor()ifself.table_exists(cursor,'ry1m3e78_zufangxinxi')==1:cursor.close()connect.close()self.temp_data()returnpageNum=1+1forurlinself.start_urls:if'{}'inurl:forpageinrange(1,pageNum):next_link=url.format(page)yieldscrapy.Request(url=next_link,callback=self.parse)else:yieldscrapy.Request(url=url,callback=self.parse)進(jìn)一步解析頁(yè)面詳情信息，通過(guò)對(duì)租房信息中地址、面積、樓層、用水電氣情況、朝向、有無(wú)電梯、租金等信息詳細(xì)爬取出來(lái)。使用detail_parse函數(shù)先提取出response中的metadata賦值給fields變量，然后嘗試通過(guò)正則表達(dá)式匹配提取response，提取結(jié)果做相應(yīng)的處理，最后將結(jié)果保存回fields；處理過(guò)程中如果出現(xiàn)異常則返回空值。5.1.2數(shù)據(jù)清洗與預(yù)處理數(shù)據(jù)清洗與預(yù)處理：主要包括對(duì)數(shù)據(jù)進(jìn)行清洗的一些操作，如重復(fù)數(shù)據(jù)過(guò)濾、空數(shù)據(jù)過(guò)濾、填充空數(shù)據(jù)、異常值過(guò)濾等。使用duplicated()和drop_duplicates()方法來(lái)過(guò)濾重復(fù)數(shù)據(jù)；使用isnull()和dropna()方法來(lái)過(guò)濾空行數(shù)據(jù)；fillna()方法來(lái)填充空數(shù)據(jù)；對(duì)異常值進(jìn)行過(guò)濾，設(shè)置其濾出范圍為大于800和小于100的；使用條件np.abs(b)>3*1找出數(shù)組中絕對(duì)值大于3倍標(biāo)準(zhǔn)差的值，存儲(chǔ)在cond中。去除多余的HTML標(biāo)簽，使用正則表達(dá)式來(lái)去除HTML標(biāo)簽。使用df2.drop(labels=index,axis=0)根據(jù)行索引刪除其中的數(shù)據(jù)行。數(shù)據(jù)清洗與預(yù)處理的代碼如代碼5-2所示。代碼5-2數(shù)據(jù)清洗與預(yù)處理代碼defpandas_filter(self):engine=create_engine('mysql+pymysql://root:123456@localhost/spiderry1m3e78?charset=UTF8MB4')df=pd.read_sql('select*fromzufangxinxilimit50',con=engine)df.duplicated()df.drop_duplicates()df.isnull()df.dropna()df.fillna(value='暫無(wú)')a=np.random.randint(0,1000,size=200)cond=(a<=800)&(a>=100)a[cond]b=np.random.randn(100000)cond=np.abs(b)>3*1b[cond]df2=pd.DataFrame(data=np.random.randn(10000,3))cond=(df2>3*df2.std()).any(axis=1)index=df2[cond].indexdf2.drop(labels=index,axis=0)defremove_html(self,html):ifhtml==None:return''pattern=pile(r'<[^>]+>',re.S)returnpattern.sub('',html).strip()5.1.3數(shù)據(jù)存儲(chǔ)和管理數(shù)據(jù)存儲(chǔ)和管理：把上階段清洗完成后的租房數(shù)據(jù)存儲(chǔ)至MySQL庫(kù)，它提供高效的數(shù)據(jù)存儲(chǔ)和管理能力，支持與后臺(tái)數(shù)據(jù)管理的訪問(wèn)和交互。配置數(shù)據(jù)庫(kù)連接的相關(guān)參數(shù)和創(chuàng)建對(duì)象，主機(jī)地址默認(rèn)為locahost，端口號(hào)為3307，租房信息表如圖5-3所示。圖53租房信息表圖5.1.4數(shù)據(jù)分析數(shù)據(jù)分析是從存儲(chǔ)的數(shù)據(jù)中提取出對(duì)當(dāng)前分析任務(wù)相關(guān)的數(shù)據(jù)子集，使用協(xié)同過(guò)濾算法技術(shù)來(lái)發(fā)現(xiàn)數(shù)據(jù)中的模式和關(guān)聯(lián)。從多方面來(lái)進(jìn)行租房信息分析：對(duì)租房信息從租金、朝向、戶型、用水情況和房源信息展示等進(jìn)行分析，同時(shí)管理員和用戶都可以通過(guò)點(diǎn)擊右上角的看板，會(huì)跳轉(zhuǎn)到新頁(yè)面，可視化頁(yè)面展示出租房信息的統(tǒng)計(jì)，可以直觀的看出其受熱度。租金柱狀圖：名為zufangxinxiChat1的函數(shù)，它用于生成一個(gè)基于ECharts的柱狀圖，它通過(guò)發(fā)送HTTP請(qǐng)求獲取數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的內(nèi)容構(gòu)建圖表的配置項(xiàng)，并使用這些配置項(xiàng)顯示圖表，同時(shí)還支持根據(jù)窗口大小調(diào)整圖表的大小。執(zhí)行操作前用getDataList()獲取數(shù)據(jù)列表，用this方法中Count()獲取租房信息數(shù)量，this.zufangxinxiChat1()執(zhí)行租房信息聊天1，將其調(diào)用到名為zufangxinxiChat1的函數(shù)，實(shí)現(xiàn)柱狀圖的實(shí)現(xiàn)。租金柱狀圖代碼如代碼5-3所示。代碼53租金柱狀圖代碼zufangxinxiChat1(){this.$nextTick(()=>{VarzufangxinxiChart1=echarts.init(document.getElementById("zufangxinxiChart1"),'macarons');this.$http({url:"zufangxinxi/sectionStat/jiage",method:"get",}).then(({data})=>{if(data&&data.code===0){letres=data.data;letxAxis=[];letyAxis=[];letpArray=[]for(leti=0;i<res.length;i++){ if(this.boardBase&&i==this.boardBase.barNum){ break; }varoption={}; lettitleObj=this.bar.title titleObj.text='價(jià)格(元/月)統(tǒng)計(jì)' constlegendObj=this.bar.legend letxAxisObj=this.bar.xAxis xAxisObj.type='category' xAxisObj.data=xAxis letyAxisObj=this.bar.yAxis yAxisObj.type='value' letseriesObj={data:yAxis,type:'bar'}通過(guò)分析，可以明顯看出成都市地區(qū)套房租金價(jià)位偏高，普遍情況趨于3000元以上，而單間和小套二的戶型集中于1000元以下，這也就說(shuō)明租金與用房人數(shù)、房屋的地理位置成正比關(guān)系。周圍配套設(shè)施完善、人口活躍度高的黃金地帶反而租金就越高，一般租客的最佳選擇租金在1000-2000的范圍內(nèi)，居住環(huán)境好。租金柱狀圖如圖5-4所示。圖54租房柱狀圖用水儀表盤：先創(chuàng)建方法用于生成一個(gè)儀表盤（gauge）的配置選項(xiàng)。先設(shè)置option的空對(duì)象標(biāo)題為"用水統(tǒng)計(jì)"，再遍歷pArray數(shù)組，并為每個(gè)元素添加title和detail屬性，名為seriesObj的對(duì)象中包含了數(shù)據(jù)、類型等信息。接著，它將this.gauge.series的屬性合并到seriesObj中。最后名為gridObj的對(duì)象，并將背景顏色、顏色、標(biāo)題、提示框、系列和網(wǎng)格等屬性合并到option對(duì)象中。用水情況的代碼如圖5-4所示。代碼54用水儀表盤代碼varoption={};lettitleObj=this.gauge.title titleObj.text='用水統(tǒng)計(jì)'for(letx=0;x<pArray.length;x++){ pArray[x]=Object.assign(pArray[x],{Title:{offsetCenter:[String((-160+(x)*60)+'%'),'80%']},detail:{ offsetCenter:[String((-160+(x)*60)+'%'),'105%'] } })} letseriesObj={ data:pArray, type:'gauge',} seriesObj=Object.assign(seriesObj,this.gauge.series) constgridObj=this.gauge.grid option={backgroundColor:this.gauge.backgroundColor, color:this.gauge.color, title:titleObj, tooltip:this.gauge.tooltip, series:[seriesObj], grid:gridObj,}從用水的統(tǒng)計(jì)來(lái)看，房屋的配套中用水情況一般都是民水，民水民電在成本上更有優(yōu)勢(shì)，適合普通住宅使用；而商水商電雖然費(fèi)用較高，但在合租情況下能提供更清晰的費(fèi)用分?jǐn)?。顯而易見(jiàn)，一般租客結(jié)合到個(gè)人的實(shí)際租房情況和偏好來(lái)決定選用民水的要高。用水統(tǒng)計(jì)如圖5-5所示。圖55用水統(tǒng)計(jì)圖同理，使用以上的方法和函數(shù)的調(diào)用、設(shè)置圖形的內(nèi)置參數(shù)等操作，將朝向(折線圖)、面積統(tǒng)計(jì)（扇形圖）、標(biāo)題詞云圖、租房熱門前10的租房信息各自進(jìn)行分析并加以展示。從數(shù)據(jù)顯示中可以看出來(lái)租客選擇朝向在東邊和房屋面積為50以下和100-150平方米的房源居多，其中選擇以上兩種面積共占比在60%左右，說(shuō)明租客選擇其房屋大小和實(shí)際居住人數(shù)具有一定的關(guān)系，同時(shí)合租平攤租金更趨于理想化。面積統(tǒng)計(jì)和朝向統(tǒng)計(jì)分別如圖5-6、5-7所示。圖56面積統(tǒng)計(jì)圖圖57朝向統(tǒng)計(jì)圖標(biāo)題詞云圖將租房的文本數(shù)據(jù)以視覺(jué)形式展現(xiàn)，租客可以迅速把握標(biāo)題的整體特征和重點(diǎn)，其中根據(jù)標(biāo)題詞匯的顏色字體大小來(lái)決定租房信息最活躍的。在租房數(shù)據(jù)中，通過(guò)詞云圖可以直觀地看到哪些詞匯或主題最為頻繁，從而了解到租房市場(chǎng)的熱點(diǎn)和趨勢(shì)。標(biāo)題詞云圖如圖5-8所示。圖58標(biāo)題詞云圖5.1.5可視化大屏可視化引入Echarts庫(kù)將數(shù)據(jù)加載到圖表中，并使用ajax請(qǐng)求獲取數(shù)據(jù)；調(diào)用setOption方法將配置項(xiàng)應(yīng)用到圖表上，為圖表添加事件監(jiān)聽(tīng)器，以便在用戶交互時(shí)執(zhí)行相應(yīng)的操作。最后調(diào)整樣式，如顏色、字體等以及響應(yīng)窗口大小，可自動(dòng)調(diào)整圖表的大小和布局。數(shù)據(jù)大屏中顯示租房數(shù)據(jù)總計(jì)520條、其租房信息熱門榜TOP前10的租房信息展示，更加直觀地看出租房信息的名稱、地址和其他信息。此外還可以顯示租金、朝向、面積、用水情況、標(biāo)題詞云圖等圖表信息。數(shù)據(jù)大屏如圖5-9所示。圖59數(shù)據(jù)大屏5.2用戶端系統(tǒng)5.2.1.登錄模塊登錄準(zhǔn)確輸入對(duì)應(yīng)的用戶名和密碼，對(duì)密碼長(zhǎng)度進(jìn)行要求，必須大于6位數(shù)，不符合條件會(huì)列出提示信息，其頁(yè)面如5-10所示。圖510登錄界面具體實(shí)現(xiàn)登錄邏輯如代碼5-5所示。代碼55登錄邏輯代碼submitForm(formName)

{

if

(this.roles.length!=1)

{

if

(!this.role)

{

this.$message.error("請(qǐng)選擇登錄用戶類型");

return

false;

}

}

else

{

this.role

=

this.roles[0].roleName;

this.loginForm.tableName

=

this.roles[0].tableName;

}this.loginPost(formName)

},5.2.2.個(gè)人中心用戶登錄成功后，在個(gè)人中心這一模塊進(jìn)行對(duì)自己的信息查看和修改密碼、生效后的密碼需要重新驗(yàn)證登錄，通過(guò)在“我的收藏”查看用戶已收藏的房源信息，從而根據(jù)點(diǎn)擊和收藏為用戶提供房源推薦的優(yōu)質(zhì)服務(wù)。在“租房申請(qǐng)”這一欄可以查看租房申請(qǐng)的信息以及審核情況，等待管理員審核通過(guò)后，用戶才可以正常用房。整個(gè)房源信息會(huì)更新處理，并提示該房源是否存在。個(gè)人中心頁(yè)面如圖5-11所示。圖511個(gè)人中心5.2.3.房源信息推薦模塊在游客模式下首頁(yè)的房源推薦是根據(jù)用戶點(diǎn)擊房源的次數(shù)而進(jìn)行推薦的，而用戶登錄成功后，其推薦的方式就是根據(jù)對(duì)房源收藏進(jìn)行協(xié)調(diào)推薦，同時(shí)更友好地給用戶展示其房源詳情。系統(tǒng)房源收藏和推薦頁(yè)面如圖5-12、5-13所示。圖512房源收藏圖513房源信息推薦5.2.4.房源信息模塊 用戶可以在房源信息這一模塊展示所有房源，還根據(jù)自己的需求來(lái)查詢其房源信息，勾選欄中房屋狀態(tài)分為已租和待租，租賃方式分為整租和合租，是否有電梯等操作。當(dāng)用戶點(diǎn)擊查看房源成功后，還可以進(jìn)行對(duì)該房屋查看房源詳情并提交租房申請(qǐng)，房源信息頁(yè)面展示如圖5-14所示。圖514房源信息該代碼快利用Vue組件的created()生命周期鉤子函數(shù)。如果URL中存在centerType參數(shù)，屬性設(shè)置為true。設(shè)置baseUrl為$config中的baseUrl。分別初始化三個(gè)數(shù)組用于對(duì)房源狀態(tài)、租賃方式、有無(wú)電梯查詢其全部房源信息；同時(shí)又調(diào)用getFenlei()方法獲取分類信息；調(diào)用getList()方法獲取列表數(shù)據(jù)，傳入?yún)?shù)page為-1，fenlei為'全部'；最后調(diào)用getHotList()方法獲取熱門列表數(shù)據(jù)。房源信息查詢代碼如代碼5-6所示。代碼56房源信息代碼created()

{if(this.$route.query.centerType){this.centerType

=

true}this.baseUrl

=

this.$config.baseUrl;

this.fangyuanzhuangtaiOptions

=

'已租,待租'.split(',');

this.zulinfangshiOptions

=

'整租,合租'.split(',');

this.youwudiantiOptions

=

'有,無(wú)'.split(',');

this.getFenlei();

this.getList(1,

'全部');

this.getHotList();

},

getList(page,

fenlei,

ref

=

'')

{if(fenlei

==

'全部')

this.swiperIndex

=

-1;for(let

i=0;i<this.fenlei.length;i++)

{if(fenlei

==

this.fenlei[i][this.feileiColumn])

{this.swiperIndex

=

i;break;}}if(fenlei){this.curFenlei

=

fenlei;}5.2.5.租房申請(qǐng)模塊用戶通過(guò)上述操作后，在房屋查看房源詳情頁(yè)面的最下方點(diǎn)擊“立即租房”，即可提交租房申請(qǐng)，填寫其預(yù)租的房源信息，包括房屋戶型、地址和租賃方式、租金和租期（按月來(lái)計(jì)）等信息，租房申請(qǐng)頁(yè)面展示如圖5-15所示。圖515租房申請(qǐng)?jiān)摯a塊使用vue組件方法$messag()來(lái)顯示消息框發(fā)送了一個(gè)POST請(qǐng)求到服務(wù)器的租房申請(qǐng)的接口，URL路徑可以是update、save或add，請(qǐng)求的數(shù)據(jù)為this.ruleForm對(duì)象。當(dāng)請(qǐng)求成功后，會(huì)執(zhí)行函數(shù)接收響應(yīng)數(shù)據(jù)作為參數(shù)。先通過(guò)檢查響應(yīng)數(shù)據(jù)的code屬性是否為0來(lái)判斷操作是否成功；如果成功，會(huì)顯示一個(gè)成功消息框，并在關(guān)閉后返回上一頁(yè)，反之會(huì)提示出錯(cuò)提示。租房申請(qǐng)核心代碼塊如代碼5-7所示。代碼57房源信息代碼this.$http.post(`zufangshenqing/${this.ruleForm.id?'update':this.centerType?'save':'add'}`,

this.ruleForm).then(res

=>

{if

(res.data.code

==

0)

{this.$message({message:

'操作成功',type:

'success',duration:

1500,onClose:

()

=>

{this.$router.go(-1);}});}

else

{this.$message({message:

res.data.msg,type:

'error',duration:

1500});5.2.6.留言板模塊用戶可以在留言板處對(duì)某一房源的進(jìn)行合理的評(píng)價(jià)，在評(píng)論編輯框輸入留言的內(nèi)容并附加圖片，點(diǎn)擊立即提交就說(shuō)明留言成功；同時(shí)整個(gè)頁(yè)面還可以預(yù)覽他人的留言內(nèi)容和圖片信息，留言板頁(yè)面如圖5-16所示。圖516留言板5.3管理端系統(tǒng)5.3.1.登錄窗口登錄模塊分為管理員登錄和用戶登錄，默認(rèn)輸入管理員的用戶名和密碼，對(duì)密碼長(zhǎng)度進(jìn)行要求，必須大于6位數(shù)，不符合條件會(huì)列出提示信息，登錄窗口頁(yè)面如圖5-17所示。圖517登錄窗口登錄窗口邏輯代碼塊檢查用戶名和密碼是否為空，如果為空則顯示錯(cuò)誤消息并返回。判斷角色是否單一還是多個(gè)，會(huì)根據(jù)選擇的角色獲取對(duì)應(yīng)的菜單表名，并將其賦值給this.tableName；最后調(diào)用this.loginPost()方法進(jìn)行登錄操作。管理端登錄窗口的代碼如代碼5-8所示。代碼58登錄窗口代碼login()

{if

(!this.rulesForm.username)

{this.$message.error("請(qǐng)輸入用戶名");return;}if

(!this.rulesForm.password)

{this.$message.error("請(qǐng)輸入密碼");return;}if(this.roles.length>1)

{if

(!this.rulesForm.role)

{this.$message.error("請(qǐng)選擇角色");return;}let

menus

=

this.menus;for

(let

i

=

0;

i

<

menus.length;

i++)

{if

(menus[i].roleName

==

this.rulesForm.role)

{this.tableName

=

menus[i].tableName;}}}

else

{this.tableName

=

this.roles[0].tableName;this.rulesForm.role

=

this.roles[0].roleName;}this.loginPost()

},5.3.2.用戶管理管理員擁有最高權(quán)限可管理其用戶端系統(tǒng)里面的用戶信息，進(jìn)行查看、刪除和修改等操作。用戶管理頁(yè)面如圖5-18所示。圖518用戶管理該代碼塊功能是管理員對(duì)用戶信息進(jìn)行新增和刪除操作。add(path)方法用于添加一個(gè)查詢參數(shù)，先創(chuàng)建了空的查詢對(duì)象query，再判斷this.centerType為真（設(shè)置為1），并將其添加到查詢對(duì)象中；使用$router.push()方法把查詢對(duì)象作為參數(shù)傳遞。使用delClick()方法可刪除用戶。彈出顯示框，若管理員點(diǎn)擊確認(rèn)按鈕，它會(huì)發(fā)送一個(gè)POST請(qǐng)求到用戶刪除的接口，傳遞用戶的ID作為參數(shù)。如果請(qǐng)求成功并且返回的數(shù)據(jù)中的code為0，它會(huì)顯示一個(gè)成功消息框，并在關(guān)閉后返回上一頁(yè)。如果用戶點(diǎn)擊取消按鈕或者請(qǐng)求失敗，則不執(zhí)行任何操作。用戶管理中添加和刪除用戶代碼如代碼5-9所示。代碼59添加和刪除用戶代碼add(path)

{let

query

=

{}if(this.centerType){query.centerType

=

1}this.$router.push({path:

path,query:query});},async

delClick(){await

this.$confirm('是否刪除此用戶？')

.then(_

=>

{

this.$http.post('yonghu/delete',

[this.detail.id]).then(async

res

=>

{if

(res.data.code

==

0)

{this.$message({type:

'success',message:

'刪除成功!',duration:

1500,onClose:

()

=>

{history.back()}});}

});

}).catch(_

=>

{});},5.3.3.房屋戶型管理員可以對(duì)某一房源的戶型進(jìn)行登記，在下拉框內(nèi)選擇該房屋匹配的戶型，上傳該戶型的具體圖片，成功提交后數(shù)據(jù)則會(huì)及時(shí)更新。管理員會(huì)對(duì)這些數(shù)據(jù)進(jìn)行增刪改查的操作。房屋戶型頁(yè)面如圖5-19所示。圖519房屋戶型5.3.4.房源信息管理員將已添加成功的房源，勾選選項(xiàng)卡選擇其名稱、地址和、租房狀態(tài)及租賃方式等信息，對(duì)修改和添加的租房數(shù)據(jù)進(jìn)行一個(gè)刷新處理，頁(yè)面會(huì)展示所有的房源信息；同時(shí)管理員可以對(duì)房源的評(píng)論進(jìn)行查看，很明顯地看出來(lái)房源的評(píng)論情況。房源頁(yè)面如圖5-20所示。圖520房源信息5.4.5.租房申請(qǐng)管理員進(jìn)入頁(yè)面會(huì)提示申請(qǐng)通過(guò)和待審核的租房申請(qǐng)，由管理員來(lái)進(jìn)行操作；通過(guò)申請(qǐng)也會(huì)在用戶端系統(tǒng)顯示租房成功，待審核的需要管理員來(lái)審核。租房申請(qǐng)頁(yè)面如圖5-21所示。圖521租房申請(qǐng)?jiān)摯a塊管理員對(duì)用戶提交的租房申請(qǐng)進(jìn)行審核通過(guò)，使用shHandler的函數(shù)，結(jié)合Vue.js框架中的$confirm()方法來(lái)顯示一個(gè)確認(rèn)對(duì)話框。當(dāng)用戶點(diǎn)擊"確定"按鈕時(shí)，會(huì)執(zhí)行發(fā)送請(qǐng)求到相關(guān)路徑，并將this.detail作為請(qǐng)求的數(shù)據(jù)。如果響應(yīng)數(shù)據(jù)中的code字段為0，表示操作成功，則關(guān)閉sfshVisiable對(duì)話框，并顯示一條成功消息。租房申請(qǐng)審核通過(guò)的代碼如代碼5-10所示。代碼510租房申請(qǐng)通過(guò)代碼shHandler(){

this.$confirm(`確定操作?`,

"提示",

{

confirmButtonText:

"確定",

cancelButtonText:

"取消",

type:

"warning"

}).then(()

=>

{

this.detail.sfsh

=

this.shForm.sfsh;

this.detail.shhf

=

this.shForm.shhf;

this.$http.post(`${this.tablename}/update`,

this.detail).then(res

=>

{

if

(res.data.code

==

0)

{

this.sfshVisiable

=

false;

this.$message({

message:

"操作成功",

type:

"success",

duration:

1500,

});

}

});

});

},5.4.6.租房信息租房信息來(lái)源于貝殼租房網(wǎng)站上的成都市租房數(shù)據(jù)，爬取數(shù)據(jù)成功則會(huì)顯示爬取成功，管理員并進(jìn)行增刪改查操作；租房信息頁(yè)面如圖5-22所示。圖522租房信息5.4.7.留言板管理留言板管理是通過(guò)用戶端在留言板生成下來(lái)的評(píng)論反饋，由管理員進(jìn)行后臺(tái)對(duì)留言板進(jìn)行一系列的管理操作，可以查看、回復(fù)當(dāng)前用戶的評(píng)論等其他操作。留言板管理頁(yè)面如圖5-23所示。圖523留言板管理第6章系統(tǒng)測(cè)試6.1測(cè)試目的與任務(wù)測(cè)試是為了測(cè)試整個(gè)項(xiàng)目是否能正常成功運(yùn)行，測(cè)試人員可以通過(guò)黑盒測(cè)試來(lái)對(duì)系統(tǒng)程序的內(nèi)在功能和頁(yè)面操作進(jìn)行一系列的測(cè)試，檢測(cè)數(shù)據(jù)是否加載錄入成功等問(wèn)題，以達(dá)到預(yù)期的最佳效果。測(cè)試數(shù)據(jù)源于貝殼租房網(wǎng)站上采集成都市的租房信息，前端在登錄窗口進(jìn)行身份驗(yàn)證測(cè)試、房源詳情的數(shù)據(jù)是否與存儲(chǔ)在數(shù)據(jù)庫(kù)中的信息相匹配，在評(píng)價(jià)管理能否用戶評(píng)論成功?？梢暬故境鰜?lái)的圖表要有特征性、多元化，能真實(shí)地體現(xiàn)數(shù)據(jù)的價(jià)值。6.2軟件測(cè)試方法黑盒測(cè)試的測(cè)試對(duì)象是軟件系統(tǒng)是否按照規(guī)格說(shuō)明和需求完成所要實(shí)現(xiàn)的功能，而不是程序的底層代碼。在軟件系統(tǒng)的測(cè)試人員不需要知道軟件系統(tǒng)的內(nèi)部實(shí)現(xiàn)，只需要知道軟件的功能和性能要求，測(cè)試人員需要檢驗(yàn)系統(tǒng)是否滿足用戶需求，并且發(fā)現(xiàn)其邏輯問(wèn)題和功能缺陷等問(wèn)題。本章主要使用黑盒測(cè)試來(lái)測(cè)試租房數(shù)據(jù)可視化系統(tǒng)的功能模塊。6.3系統(tǒng)功能測(cè)試6.3.1.登錄測(cè)試登錄模塊測(cè)試是每一個(gè)系統(tǒng)進(jìn)入頁(yè)面的門禁，由管理員給用戶分配賬號(hào)和密碼后，確認(rèn)登錄角色成功登錄系統(tǒng)頁(yè)面，才能正常使用該系統(tǒng)，管理員身份登錄的測(cè)試結(jié)果如表6-1所示。測(cè)試內(nèi)容管理員登錄的測(cè)試輸入/動(dòng)作期望的輸出/相應(yīng)實(shí)際情況典型值:帳號(hào)：admin密碼：123456角色：管理員能正常進(jìn)入管理員的后臺(tái)管理進(jìn)入了管理員的后臺(tái)管理頁(yè)面邊界值:帳號(hào)：admin密碼：123456角色：管理員友好的出錯(cuò)提示用戶名或密碼錯(cuò)誤異常值:帳號(hào)：admin密碼：123角色：用戶友好的出錯(cuò)提示請(qǐng)選擇正確的登錄角色(登錄失敗)表6-1管理員登錄的測(cè)試登錄正確的用戶名和密碼登陸時(shí)，系統(tǒng)會(huì)自動(dòng)跳轉(zhuǎn)系統(tǒng)的主頁(yè)面，以用戶登錄的測(cè)試結(jié)果如表6-2所示。表6-2用戶登錄的測(cè)試測(cè)試內(nèi)容用戶登錄的測(cè)試輸入/動(dòng)作期望的輸出/相應(yīng)實(shí)際情況典型值:帳號(hào)：0101密碼：123456角色：用戶1能正常進(jìn)入用戶登錄頁(yè)面進(jìn)入用戶登錄的主頁(yè)面邊界值:帳號(hào)：0102密碼：123456角色：用戶2友好的出錯(cuò)提示用戶名或密碼錯(cuò)誤異常值:帳號(hào)：姓名2密碼：123456角色：管理員友好的出錯(cuò)提示請(qǐng)選擇正確的登錄角色(登錄失敗)6.3.2用戶租房申請(qǐng)的測(cè)試用戶在用戶端系統(tǒng)上提交租房申請(qǐng)后，可以查看申請(qǐng)是否被管理員審核成功，成功后在用戶租房申請(qǐng)會(huì)成功顯示已租房的房源信息。租房申請(qǐng)其測(cè)試結(jié)果如表6-3所示。表6-3租房申請(qǐng)的測(cè)試測(cè)試內(nèi)容用戶租房申請(qǐng)的測(cè)試輸入/動(dòng)作期望的輸出/相應(yīng)實(shí)際情況用戶提交租房申請(qǐng)能正常待管理員審核通過(guò)，并提示給用戶租房成功申請(qǐng)通過(guò)，租房成功超時(shí)進(jìn)行操作友好的出錯(cuò)提示租房房源已不存在租房申請(qǐng)待審核友好的出錯(cuò)提示操作失敗，待管理員審核成功6.3.3管理員房源信息的測(cè)試管理員在房源信息模塊這一欄，可以對(duì)房源信息進(jìn)行增刪改查的操作，為后面的租房數(shù)據(jù)提供數(shù)