《基于VUE的美食點(diǎn)評(píng)APP的設(shè)計(jì)與實(shí)現(xiàn)》12000字（論文）

.緒論1.1研究的背景\t"/item/%E9%A4%90%E9%A5%AE%E6%96%87%E5%8C%96/_blank"餐飲文化是一個(gè)廣泛的社會(huì)性概念，一般來說，主要包括以下一些內(nèi)容：菜品文化、小吃文化、餐廳文化、服務(wù)文化、營(yíng)銷文化[1]。由于科技的騰飛，經(jīng)濟(jì)的發(fā)展，我國(guó)人民生活水平在不斷地提高。人們開始追求美食帶來的除了飽腹以外的作用，人們更加追求的是美食帶來的精神層面上的享受和體驗(yàn)?；ヂ?lián)網(wǎng)也在不斷發(fā)展，人人都擁有手機(jī)，可以隨時(shí)隨地自由自在地上網(wǎng)。美食APP軟件開發(fā)逐漸流行起來，結(jié)合市面上多種美食誘惑，吸引著大量的用戶群體。希望可以通過此APP帶給用戶更好的美食體驗(yàn)。隨著社會(huì)不斷地發(fā)展，人們的生活水平也不斷提升，開始注重果腹以外的對(duì)食物的追求。吃被賦予了更厚重的意義，美食所帶來的的美妙體驗(yàn)豐富了人們的生活，讓美味帶走人們的煩惱和疲憊?；ヂ?lián)網(wǎng)蔓延觸達(dá)到人們生活的各個(gè)角落，美食也不只局限于自家餐桌，乘著各種各樣的APP飛入了普羅大眾的手中。所以我想做一款專門為了美食分享、查詢、營(yíng)銷一體的美食點(diǎn)評(píng)APP。在過去，往往提到的是生存。雖然生活和生存只相差一個(gè)字，但是這倆個(gè)詞的意義是大不相同的。生存只是為了活著，而生活是追求人生的廣度和寬度，層次在生存之上。十九大報(bào)告關(guān)于這個(gè)詞的轉(zhuǎn)變正證明了中國(guó)人民的生活水平得到了很大的提升，人們開始更注重生活品質(zhì)和精神世界。現(xiàn)如今，中國(guó)開始追求生活品質(zhì)。顯而易見的，這不是國(guó)家對(duì)人們的要求，而是人們自身對(duì)未來的需求。不是所有國(guó)家都有這種底氣的，中國(guó)走到現(xiàn)在這一步，是全體辛勤的中國(guó)人民一點(diǎn)一點(diǎn)努力奮斗出來的。世界上還有很多國(guó)家還在生存或在生活線上下掙扎，讓中國(guó)人民站在生活線上，中國(guó)不斷的奮斗，世界都看得到。生活離不開衣食住行，吃占了四分之一。追求更好的生活也包括了追求更好的美食體驗(yàn)，所以越來越多的人們關(guān)注美食資訊：如何制作？哪家餐廳更值得推薦?人們對(duì)這一方面的需求明顯增加，但是又苦于沒有渠道方便快捷得了解。VUE是一種容易使用、靈活、高效的漸進(jìn)式j(luò)avascript框架[2]。跨平臺(tái)技術(shù)一面世，大量的JavaScript框架和工具開始迅速流行。而Vue.js就是其中最為優(yōu)越的存在，Vue.js成為渲染搭建用戶前端界面的方便快捷不直接操作底層DOM的框架技術(shù)[3]。Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。Vue.js采用自底向上增量開發(fā)的設(shè)計(jì)，和其他框架都不同。它的核心庫(kù)只關(guān)注視圖層，初學(xué)者很容易上手學(xué)習(xí)[4]。Vue.js完全有能力驅(qū)動(dòng)采用單文件組件和Vue.js[5]生態(tài)APP支持的庫(kù)來開發(fā)復(fù)雜的單頁(yè)應(yīng)用。1.2研究的目的與意義品嘗完一道美食，一定很想和周遭的朋友同事們分享，會(huì)有呼朋引伴再來一次的沖動(dòng)；去到一家掛羊頭賣狗肉的不良餐廳一定想大肆曝光，不想有其他朋友再次“踩坑”。如果有這樣一個(gè)美食點(diǎn)評(píng)交流的平臺(tái)，用戶可以在上面分享美食，也可以查看和評(píng)論其他人的美食分享。對(duì)于美食資訊的傳播和美食文化的宣傳會(huì)是非常有利的，也方便了用戶對(duì)美食資訊的查找和分享。各種美食APP出現(xiàn)了十余年了，十多年的時(shí)間里百家爭(zhēng)鳴、百花齊放。最早的美食點(diǎn)評(píng)APP-大眾點(diǎn)評(píng)，2003年到如今約17年了，依然屹立不倒，和美團(tuán)合并后成為人們手機(jī)中不可或缺的一個(gè)應(yīng)用。從國(guó)內(nèi)人民的反應(yīng)可以看出來，美食類APP的需求只多不少，人們使用APP的理由大致可以分為：分享、查找、娛樂。人們使用美食類APP來分享個(gè)人體會(huì)或者菜肴做法；查找餐廳信息；觀看他人分享圖片或視頻。互聯(lián)網(wǎng)的發(fā)展，給了美食類APP無限的發(fā)展空間，也給了人們無限了解美食的途徑。通過這段時(shí)間對(duì)應(yīng)用開發(fā)的學(xué)習(xí)，我逐漸熟悉和掌握了Vue.js和JavaSpringBoot前后端開發(fā)。對(duì)Vue的組件化和JavaSpringBoot的約定優(yōu)于配置[6]有了更深刻的理解。1.3國(guó)內(nèi)現(xiàn)有狀況分析各種美食APP出現(xiàn)了十余年了，十多年的時(shí)間里百家爭(zhēng)鳴、百花齊放。最早的美食點(diǎn)評(píng)APP-大眾點(diǎn)評(píng)，2003年到如今約17年了，依然屹立不倒，和美團(tuán)合并后成為人們手機(jī)中不可或缺的一個(gè)應(yīng)用。從國(guó)內(nèi)人民的反應(yīng)可以看出來，美食類APP的需求只多不少，人們使用APP的理由大致可以分為：分享、查找、娛樂。人們使用美食類APP來分享個(gè)人體會(huì)或者菜肴做法；查找餐廳信息；觀看他人分享圖片或視頻?；ヂ?lián)網(wǎng)的發(fā)展，給了美食類APP無限的發(fā)展空間，也給了人們無限了解美食的途徑[7]。2.可行性分析開發(fā)APP不是隨性而為的事情，需要考慮方方面面是否可行，如果有多個(gè)方面不可行，那么開發(fā)APP就是一件寸步難行的事情。在開發(fā)APP之前需要把一些必須事項(xiàng)論證可行才能開始后面的開發(fā)。否則投入后才發(fā)現(xiàn)不可行所造成的精力、金錢上的損失是很重大的。所以我們需要在技術(shù)、經(jīng)濟(jì)、操作等多個(gè)方面考慮開發(fā)APP的可行性。考慮得越全面越有利于后續(xù)的開發(fā)。2.1技術(shù)可行性美食點(diǎn)評(píng)APPAPP的設(shè)計(jì)與實(shí)現(xiàn)使用Vue+JavaSpringBoot作為前后端的框架，整個(gè)APP采用客戶端和服務(wù)器直接相通相連，實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)的通信的C/S架構(gòu)，數(shù)據(jù)存儲(chǔ)管理計(jì)劃使用MySQL數(shù)據(jù)庫(kù)。采用HTML5+CSS+JavaScript+Java進(jìn)行前后端代碼的編寫，在VSCode+HBuilderX平臺(tái)上進(jìn)行開發(fā)，VSCode有豐富的各種各樣的插件，HBuilderX有非常充足的生態(tài)資源[8]。同時(shí)對(duì)電腦的配置要求并不高。2.2經(jīng)濟(jì)可行性主要服務(wù)器是在阿里云上租的Linux一年約114元，其他IDE皆是開源且免費(fèi)的，查看的資料網(wǎng)上皆有免費(fèi)版。所以支出只有租賃服務(wù)器的費(fèi)用，這部分的費(fèi)用較低，可以承受。并且本APP為本人獨(dú)立開發(fā)，只需要電腦和手機(jī)即可。不需要花費(fèi)大量的人力的物力。2.3操作可行性操作可行性，主要評(píng)估用戶使用該軟件是否易懂易操作。經(jīng)過HBuilderX打包成apk后可以直接在手機(jī)上安裝使用。界面設(shè)計(jì)得簡(jiǎn)潔大方，底部的TabBar只設(shè)置了4個(gè)，符合當(dāng)代操作需求[9]。整個(gè)APP功能劃分清晰，操作簡(jiǎn)單便捷。綜合以上的分析，本次的APP開發(fā)各方面都符合預(yù)期。可以進(jìn)行開發(fā)，而不會(huì)產(chǎn)生負(fù)面的效果。3.需求分析3.1系統(tǒng)總體需求美食點(diǎn)評(píng)APP中前端部分角色只是用戶，后臺(tái)角色是管理員。為了開發(fā)出來的軟件可以服務(wù)到廣大的用戶，我們就需要調(diào)查清楚用戶的需求。通過查閱相關(guān)書籍了以及觀察各個(gè)競(jìng)品的數(shù)據(jù)進(jìn)行了簡(jiǎn)單的整理和調(diào)研。了解到現(xiàn)在用戶不僅僅是需要了解美食，更重要的是想分享和展示自己，用戶越來越在乎產(chǎn)品的社交性[10]。而美食點(diǎn)評(píng)APP的開發(fā)正可以滿足用戶的需求：分享美食、展示自己、聊天交友。以下為美食點(diǎn)評(píng)APP的功能模塊分析：界面設(shè)計(jì)：美食點(diǎn)評(píng)APP分前、后端開發(fā)：前端--用戶界面簡(jiǎn)潔明快、色調(diào)統(tǒng)一；后端--管理員界面簡(jiǎn)單大方、清晰明了。前端用戶界面以紅色暖調(diào)為主，美食就是能夠給人帶來幸福和溫暖的，這也是我選擇紅色作為主色調(diào)的原因。前端功能模塊：前端分為四個(gè)Page：首頁(yè)、發(fā)現(xiàn)、消息、我的。首頁(yè)主要用于實(shí)時(shí)顯示發(fā)布的點(diǎn)評(píng)文章，文章按照各個(gè)分類顯示在前端上，用戶可以點(diǎn)擊想查看的分頁(yè)進(jìn)入，查看文章。也可以輸入關(guān)鍵詞，搜索想查詢的點(diǎn)評(píng)文章內(nèi)容。發(fā)現(xiàn)主要是首頁(yè)功能的延伸，用戶可以在發(fā)現(xiàn)頁(yè)面查看想看的點(diǎn)評(píng)內(nèi)容。最重要的功能是發(fā)布點(diǎn)評(píng)，用戶可以發(fā)布點(diǎn)評(píng)文章到廣場(chǎng)中。消息頁(yè)顯示好友私聊的消息，用戶可以在消息界面和好友聊天，探討美食。我的界面主要用于查看用戶自己的信息，比如點(diǎn)贊記錄、收藏的文章以及修改個(gè)人信息。3、管理員功能模塊：管理系統(tǒng)主要由用戶管理、文章管理、評(píng)論管理三個(gè)模塊構(gòu)成。用戶管理模塊可以設(shè)置用戶狀態(tài)和信息，比如禁言一些不合法發(fā)言的用戶，維護(hù)平臺(tái)的安全性和健康性。文章管理可以查看文章信息和管理文章狀態(tài)，不合法的文章后臺(tái)可以不讓它上架。評(píng)論管理可以刪除不合理評(píng)論，可以用于后續(xù)維護(hù)APP的UGC生態(tài)[11]。3.1.1預(yù)定登陸注冊(cè)模塊的功能需求 我們不允許用戶使用游客狀態(tài)的身份進(jìn)入郵箱，用戶要使用本APP需要先注冊(cè)后登陸。功能需求如下：（1）如果用戶之前注冊(cè)過，那么定位為老用戶。老用戶通過之前注冊(cè)過的賬號(hào)以及對(duì)應(yīng)密碼進(jìn)行登錄美食點(diǎn)評(píng)APP，進(jìn)入美食點(diǎn)評(píng)APP。還未注冊(cè)的用戶，首先要進(jìn)行賬號(hào)的注冊(cè)，然后在美食點(diǎn)評(píng)APP的登錄界面輸入賬號(hào)和密碼，從而進(jìn)入美食點(diǎn)評(píng)APP。（2）注冊(cè)失敗時(shí)需要提醒客戶是因?yàn)槭裁磳?dǎo)致注冊(cè)失?。河脩裘孛?、驗(yàn)證碼失效、密碼不符合規(guī)范等。注冊(cè)成功后就跳轉(zhuǎn)到登陸主界面，提示用戶登錄。（3）注冊(cè)時(shí)的密碼需要經(jīng)過不對(duì)稱加密[12]再存儲(chǔ)到數(shù)據(jù)庫(kù)中，目的是為了保證用戶賬號(hào)的安全性。3.1.2預(yù)定首頁(yè)模塊的功能需求 APP前端的首頁(yè)部分可以瀏覽廣場(chǎng)上的熱門文章以及各種各類的文章，還可以搜索感興趣的點(diǎn)評(píng)，滿足用戶個(gè)性化的瀏覽需求。功能需求如下：（1）在首頁(yè)，用戶可以在搜索框輸入想要查找的美食文章。比如輸入“西餐”，點(diǎn)擊“搜索文章”，即可彈出相關(guān)的內(nèi)容。（2）首頁(yè)有相對(duì)應(yīng)美食種類的分區(qū)，用戶選擇相對(duì)應(yīng)分區(qū)進(jìn)入分類美食文章頁(yè)。（3）不用身份等級(jí)的用戶看到的內(nèi)容做區(qū)分，部分VIP點(diǎn)評(píng)文章只開放給VIP等級(jí)的用戶，普通分區(qū)的文章全用戶可見。3.1.3發(fā)現(xiàn)模塊的功能需求用戶進(jìn)入發(fā)現(xiàn)頁(yè)面可以在廣場(chǎng)上自由瀏覽點(diǎn)評(píng)，也可以發(fā)布自己的點(diǎn)評(píng)文章。用戶在發(fā)現(xiàn)頁(yè)要能精確推送用戶感興趣的美食分區(qū)的點(diǎn)評(píng)。文章類型要能顯示在文章展示窗口。（3）用戶點(diǎn)擊文章進(jìn)入文章詳情頁(yè)。（4）玩家長(zhǎng)按文章展示窗口要彈出“是否不再推送相關(guān)分類美食信息”以供玩家選擇。玩家選擇“是”，之后不再推送相關(guān)內(nèi)容。3.1.4文章詳情頁(yè)模塊的功能需求文章詳情頁(yè)要展示美食點(diǎn)評(píng)文章的具體信息，讓用戶一進(jìn)入就了解美食點(diǎn)評(píng)文章的全貌。詳情頁(yè)包括：標(biāo)題、文章主要內(nèi)容、圖片、視頻、點(diǎn)贊數(shù)、收藏?cái)?shù)等。（1）用戶可以在詳情頁(yè)給點(diǎn)評(píng)文章點(diǎn)贊、收藏，以及能看到點(diǎn)贊數(shù)和收藏?cái)?shù)。（2）用戶能轉(zhuǎn)發(fā)點(diǎn)評(píng)到朋友圈中。（3）用戶要能在點(diǎn)評(píng)下方評(píng)論，以及回復(fù)評(píng)論。（4）用戶點(diǎn)擊頭像要能進(jìn)入聊天界面。3.1.5消息模塊的功能需求消息模塊要能夠接收到系統(tǒng)給全用戶發(fā)送的公告、通知，也能收到其他用戶的私信。以及在消息模塊進(jìn)行信息的交互。（1）要能和用戶進(jìn)行對(duì)話交互。（2）收到新信息要有提示，對(duì)話聊天條要有紅點(diǎn)顯示（3）要有刷新按鈕，刷新信息。要能夠一鍵已讀，方便一些網(wǎng)紅用戶清除消息記錄。3.1.6個(gè)人主頁(yè)模塊的功能需求個(gè)人主頁(yè)模塊要能夠查看收藏文章、評(píng)論文章、已發(fā)布文章、點(diǎn)贊文章還有能夠修改個(gè)人信息。個(gè)人主頁(yè)功能具體功能如下：（1）查看“我的收藏”，跳轉(zhuǎn)到文章列表頁(yè)（2）查看“我的評(píng)論”，跳轉(zhuǎn)到文章列表頁(yè)（3）查看“我發(fā)表的”，跳轉(zhuǎn)到文章列表頁(yè)（4）查看“我的點(diǎn)贊”，跳轉(zhuǎn)到文章列表頁(yè)（5）修改個(gè)人信息3.1.7用戶交互模塊的功能需求用戶主要是通過點(diǎn)評(píng)下面的評(píng)論區(qū)和用戶聊天功能來進(jìn)行交互的。具體功能如下：點(diǎn)擊評(píng)論下方的評(píng)論框輸入評(píng)論點(diǎn)擊用戶頭像跳轉(zhuǎn)到私人聊天區(qū)，進(jìn)行聊天交流點(diǎn)贊文章收藏文章3.1.8系統(tǒng)管理模塊的功能需求美食點(diǎn)評(píng)APP的系統(tǒng)管理模塊介紹如下。管理員進(jìn)入后臺(tái)，需要先進(jìn)行身份驗(yàn)證，需要輸入賬號(hào)密碼。驗(yàn)證通過后才能進(jìn)入后臺(tái)的管理界面。美食點(diǎn)評(píng)的后臺(tái)界面具體功能如下：（1）添加用戶，設(shè)置用戶信息（2）修改用戶狀態(tài)（3）發(fā)布點(diǎn)評(píng)文章（4）設(shè)置文章狀態(tài)（5）設(shè)置評(píng)論狀態(tài)3.2系統(tǒng)非功能性需求分析非功能需求分析在系統(tǒng)分析階段的作用也十分重要，它會(huì)影響到用戶的使用體驗(yàn)。所以說非功能分析和功能分析是具有相同重要性的需求分析[13]。3.2.1響應(yīng)時(shí)間需求進(jìn)入美食點(diǎn)評(píng)APP，用戶的每一次點(diǎn)擊數(shù)據(jù)的響應(yīng)時(shí)間最好不超過0.5秒，數(shù)據(jù)要能夠及時(shí)地刷新，界面要沒有明顯的卡頓。在網(wǎng)絡(luò)狀態(tài)不好的情況下，要及時(shí)顯示菊花Loading界面，提示用戶網(wǎng)絡(luò)重連中，這樣用戶的體驗(yàn)才會(huì)比較舒適。在這樣的要求下，用戶才會(huì)比較順滑沒有卡點(diǎn)。3.2.2安全性需求（1）在美食點(diǎn)評(píng)系統(tǒng)中如果用戶的賬號(hào)被毀，那么他們所付出的大量心血都會(huì)付之一炬。所以安全性是非常重要的。（2）可以在賬號(hào)上做相應(yīng)安全上的限制，比如密碼必須超過6位，包含英文和數(shù)字，密碼準(zhǔn)入數(shù)據(jù)庫(kù)需要做不對(duì)稱加密。3.2.3易用性需求（1）系統(tǒng)UI簡(jiǎn)潔大方，各種功能模塊一目了然。 （2）適配各種機(jī)型，滿足全面屏手機(jī)的需求。3.3系統(tǒng)用例圖美食點(diǎn)評(píng)APP系統(tǒng)的用戶可劃分為倆類：用戶、管理員。下面將會(huì)繪畫出用例圖來介紹用戶和管理員這倆類用戶的功能。3.3.1用戶功能用例圖如圖3-1所示。圖3-1用戶的功能用例圖圖3-1描述了用戶的登陸成功后可實(shí)現(xiàn)的功能包括“發(fā)布文章”、“評(píng)論”、“點(diǎn)贊”、“收藏”、“查看文章”。3.3.2后臺(tái)管理員功能用例圖如圖3-2所示。圖3-2后臺(tái)管理員的功能用例圖圖3-2描述了美食點(diǎn)評(píng)APP管理員進(jìn)度后臺(tái)后都可以做哪些操作來管理這個(gè)美食點(diǎn)評(píng)APP。管理員可以操作和管理的功能模塊包括“設(shè)置用戶狀態(tài)”、“設(shè)置用戶信息”、“管理文章”、“發(fā)布文章”。4.系統(tǒng)概要設(shè)計(jì)4.1系統(tǒng)功能模塊分析美食點(diǎn)評(píng)APP中Apk部分角色只是用戶，后臺(tái)角色是管理員。為了開發(fā)出來的軟件可以服務(wù)到廣大的用戶，我們就需要調(diào)查清楚用戶的需求。通過查閱相關(guān)書籍了以及觀察各個(gè)競(jìng)品的數(shù)據(jù)進(jìn)行了簡(jiǎn)單的整理和調(diào)研。了解到現(xiàn)在用戶不僅僅是需要了解美食，更重要的是想分享和展示自己，用戶越來越在乎產(chǎn)品的社交性。而美食點(diǎn)評(píng)APP的開發(fā)正可以滿足用戶的需求：分享美食、展示自己、聊天交友。以下為美食點(diǎn)評(píng)APP的功能模塊分析：1、界面設(shè)計(jì)：美食點(diǎn)評(píng)APP分前、后端開發(fā)：前端--用戶界面簡(jiǎn)潔明快、色調(diào)統(tǒng)一；后端--管理員界面簡(jiǎn)單大方、清晰明了。前端用戶界面以紅色暖調(diào)為主，美食就是能夠給人帶來幸福和溫暖的，這也是我選擇紅色作為主色調(diào)的原因。2、前端功能模塊：一共分為兩個(gè)前端：用戶所見的美食點(diǎn)評(píng)app前端和管理員可見的后臺(tái)管理界面的前端。美食點(diǎn)評(píng)APP的客戶端分了四個(gè)tab：首頁(yè)、發(fā)現(xiàn)、消息、我的。只有登錄后才能進(jìn)入APP，首頁(yè)模塊可以瀏覽、搜索別人發(fā)布的美食分享，點(diǎn)擊進(jìn)入，可以瀏覽內(nèi)容、點(diǎn)贊、收藏、評(píng)論。發(fā)現(xiàn)模塊消息模塊可以看到別人發(fā)送給自己的消息，自己也可以和別人進(jìn)行溝通交流。我的界面可以看個(gè)人信息、進(jìn)行一些個(gè)性化操作。后臺(tái)管理界面分為：用戶管理、文章管理和評(píng)論管理。主要是用來管理用戶的信息，進(jìn)行刪除和添加以及禁言的操作；管理文章信息刪除和新增文章；管理文章中的評(píng)論刪除操作。美食點(diǎn)評(píng)系統(tǒng)主要功能是針對(duì)美食愛好者提供一個(gè)可以自由分享和查找美食資料的平臺(tái)。所以需要有倆個(gè)前端來對(duì)應(yīng)不同角色的用戶：面向廣大美食愛好者的美食點(diǎn)評(píng)APP；面向管理美食點(diǎn)評(píng)信息的管理員的系統(tǒng)后臺(tái)。系統(tǒng)功能模塊結(jié)構(gòu)如圖4-1所示。圖4-1功能模塊結(jié)構(gòu)圖一、前端APP系統(tǒng)聊天模塊主要是方便用戶社交和溝通，增強(qiáng)用戶使用美食點(diǎn)評(píng)APP的粘性。用戶點(diǎn)擊頭像就可以進(jìn)入私聊頁(yè)面，可以實(shí)時(shí)發(fā)起溝通。隨時(shí)隨地分享美食見聞。評(píng)論點(diǎn)評(píng)信息模塊是用于用戶可以直接在文章底下評(píng)論，和聊天模塊的作用類似。但是在評(píng)論模塊，用戶發(fā)表的評(píng)論是全平臺(tái)可見的。有用戶分享，有用戶針對(duì)分享點(diǎn)評(píng)，才是一個(gè)app比較完整的交互的生態(tài)。用戶喜好模塊主要是用來收集用戶對(duì)喜歡的文章的點(diǎn)贊、收藏、評(píng)論。把它們放在同一個(gè)“籃子”里面進(jìn)行管理，方便用戶查找。這是除了用戶發(fā)表點(diǎn)評(píng)外的另一個(gè)“私人小天地”。設(shè)置個(gè)人主頁(yè)的作用很顯然了，就是設(shè)置用戶的個(gè)人信息。現(xiàn)在的用戶非常注重個(gè)性化和隱私。設(shè)置個(gè)人信息這個(gè)功能模塊是必不可少的。除了設(shè)置個(gè)人信息外，還可以查看用戶在app中的相關(guān)操作。二、后端管理系統(tǒng)用戶評(píng)論管理主要是用來管理用戶評(píng)論，比如隱藏用戶評(píng)論、推用戶評(píng)論上精選、刪除用戶評(píng)論。發(fā)布點(diǎn)評(píng)這個(gè)功能是賦予管理員發(fā)布帖子的權(quán)利。管理員可以發(fā)布質(zhì)量較高的文章，這樣可以促進(jìn)APP的用戶活躍度，以及反向鼓勵(lì)用戶多發(fā)帖子。較多的帖子和較高的文章質(zhì)量才能有效地促進(jìn)APP的DAU。用戶信息管理可以用于管理用戶的各種信息，比如用戶狀態(tài)等。點(diǎn)評(píng)管理主要是用于管理用戶的文章狀態(tài)，比如手動(dòng)推文章上精選熱搜、修改文章的部分參數(shù)、管理文章下面的評(píng)論數(shù)據(jù)。4.2數(shù)據(jù)庫(kù)設(shè)計(jì)4.2.1美食點(diǎn)評(píng)APP系統(tǒng)關(guān)系模型很明顯的在上面的功能分析里面也提到，這個(gè)美食點(diǎn)評(píng)系統(tǒng)的實(shí)體主要就是由：文章、評(píng)論、用戶等這幾個(gè)組成的。下面是繪制的美食點(diǎn)評(píng)APP系統(tǒng)整體的E-R圖，如圖4-2、4-3所示。圖4-2文章模塊E-R圖圖4-3聊天模塊E-R圖4.2.2數(shù)據(jù)庫(kù)簡(jiǎn)要說明設(shè)計(jì)數(shù)據(jù)庫(kù)需要遵循：方便、高效、不冗余的原則[14]。使用Mysql作為本次系統(tǒng)的數(shù)據(jù)庫(kù)。該系統(tǒng)數(shù)據(jù)庫(kù)名稱為：“meituan”。內(nèi)含10張數(shù)據(jù)庫(kù)表數(shù)據(jù)庫(kù)圖如4-3所示。圖4-3數(shù)據(jù)庫(kù)圖系統(tǒng)數(shù)據(jù)庫(kù)擁有8個(gè)實(shí)體對(duì)象，具體內(nèi)容如下：文章實(shí)體：文章id、發(fā)布文章用戶id、文章類型、文章點(diǎn)贊數(shù)、文章標(biāo)題、文章內(nèi)容、文章創(chuàng)建時(shí)間文章圖片實(shí)體：圖片id、文章id、圖片地址文章類型實(shí)體：文章類型id、文章類型名聊天記錄實(shí)體：目前聊天用戶id、對(duì)方用戶id、聊天內(nèi)容、創(chuàng)建時(shí)間收藏點(diǎn)評(píng)實(shí)體：收藏id、用戶id、文章id評(píng)論實(shí)體：評(píng)論id、用戶id、文章id、回復(fù)id、回復(fù)層級(jí)、回復(fù)信息、創(chuàng)建時(shí)間收藏實(shí)體：收藏id、用戶id、文章id用戶實(shí)體：用戶id、用戶昵稱、用戶性別、用戶類型、用戶等級(jí)、用戶狀態(tài)4.2.3數(shù)據(jù)庫(kù)表邏輯設(shè)計(jì)（1）文章信息表（article）記錄點(diǎn)評(píng)文章的基本數(shù)據(jù)庫(kù)字段信息 ，如表4-2所示。表4-1文章信息表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明article_idVarchar(100)100否主鍵publish_user_idint(0)32否發(fā)布用戶idarticle_typeint(0)32否文章類型article_starint(0)32是點(diǎn)贊數(shù)article_titlevarchar(100)100是文章標(biāo)題article_contentvarchar(1000)1000是文章內(nèi)容create_timedatetime(0)128是創(chuàng)作時(shí)間（2）文章圖片表（article_img）保存文章圖片表的基本數(shù)據(jù)庫(kù)字段信息 ，如表4-2所示。表4-2文章圖片表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明img_idvarchar(100)100否主鍵article_idvarchar(100)100否文章idimg_srcVarchar(100)100否圖片地址（3）評(píng)論信息表（comment）用于保存用戶評(píng)論的基本數(shù)據(jù)庫(kù)字段信息 ，如表4-3所示。表4-3評(píng)論信息表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明comment_idvarchar(100)100否主鍵user_idint(0)32否用戶idarticle_idint(0)32否文章idreply_user_idint(0)32否回復(fù)用戶idpidvarchar(100)100否層級(jí)表示comment_msgvarchar(100)100否評(píng)論內(nèi)容create_timedatetime32否評(píng)論時(shí)間（4）文章類型表（article_type）文章類型信息字段于此表當(dāng)中，相關(guān)表結(jié)構(gòu)如表4-4所示。表4-4文章類型表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明article_type_idint(0)32否主鍵article_type_nameint(0)32否文章類型（5）聊天記錄表（chat_record）用于保存用戶聊天信息，相關(guān)表結(jié)構(gòu)如表4-5所示。表4-5聊天記錄表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明idvarchar(100)100否主鍵current_user_idint(0)32否當(dāng)前用戶idchat_user_idint(0)32否聊天用戶idchar_contentvarchar(255)255否聊天內(nèi)容create_timedatetime32否開始時(shí)間（6）收藏信息表（collection）用于記錄收藏的基本信息，相關(guān)表結(jié)構(gòu)如表4-6所示。表4-6收藏信息表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明collection_idvarchar(100)100否主鍵user_idint(0)32否用戶idarticle_idvarchar(100)128否文章id（7）收藏信息表（fabulous）收藏信息表相關(guān)表結(jié)構(gòu)如表4-7所示。表4-7點(diǎn)贊信息表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明fabulous_idvarchar(100)100否主鍵user_idint（0）128是用戶idarticle_idvarchar（100）32否文章id（8）用戶信息表（user）用戶信息表相關(guān)表結(jié)構(gòu)如表4-7所示。表4-8用戶信息表字段名稱數(shù)據(jù)類型長(zhǎng)度是否為空說明user_idvarchar(100)100否主鍵sexvarchar(8)8否性別user_typevarchar（8）8否用戶類型passwordvarchar(100)100否密碼ageint32否年齡user_namevarchar(100)100否用戶昵稱user_avatarvarchar(100)100否用戶等級(jí)statusint32否用戶狀態(tài)5.系統(tǒng)的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)5.1系統(tǒng)開發(fā)環(huán)境CPU:Intel(R)Core(TM)i5-7200U內(nèi)存：4GB硬盤：256GB固態(tài)硬盤數(shù)據(jù)庫(kù):MYSQL服務(wù)器：Linux顯卡：GTX960M開發(fā)軟件：VSCODE+HBuilderX開發(fā)框架：前端：VUE；后端：SSM5.2系統(tǒng)目標(biāo)美食點(diǎn)評(píng)APP面向的人群包括有想要尋找好餐廳的顧客，以及想要分享美食的用戶。前端用戶使用的APK就是專門為了用戶設(shè)計(jì)的，可以讓用戶在APP上找到想要的美食，分享好的用餐體驗(yàn)文章以及和用戶進(jìn)行溝通、收藏、點(diǎn)贊文章。后臺(tái)功能主要是管理員來操作，主要功能是管理前臺(tái)的APP的UGC信息，避免一些不文明的行為：對(duì)用戶解禁言、對(duì)文章進(jìn)行刪除和修改、用戶信息進(jìn)行管理。本系統(tǒng)的目標(biāo)就是方便用戶自由地分享內(nèi)容，快速地查找到想要的餐廳或者美食相關(guān)信息。5.3功能模塊實(shí)現(xiàn)5.3.1聊天模塊設(shè)計(jì)思路：該模塊主要實(shí)現(xiàn)用戶聊天方面的功能。用戶在瀏覽點(diǎn)評(píng)時(shí)點(diǎn)擊發(fā)布者的頭像就跳轉(zhuǎn)到聊天頁(yè)面，或者點(diǎn)擊文章評(píng)論區(qū)的頭像也可以跳轉(zhuǎn)到聊天頁(yè)面。在聊天界面可以實(shí)時(shí)聊天。用戶通過點(diǎn)擊主頁(yè)頭像跳轉(zhuǎn)到聊天界面進(jìn)行聊天。實(shí)現(xiàn)邏輯：用戶點(diǎn)擊其他用戶的頭像跳轉(zhuǎn)到相對(duì)應(yīng)聊天界面。部分代碼的實(shí)現(xiàn)邏輯如圖圖5-1(a)、圖5-1(b)所示。圖5-1(a)聊天模塊部分代碼的實(shí)現(xiàn)邏輯圖5-1(b)聊天模塊部分代碼的實(shí)現(xiàn)邏輯用戶進(jìn)入聊天界面需要和對(duì)方聊天，對(duì)方回復(fù)的消息需要及時(shí)同步用戶，未瀏覽過的聊天需要有紅點(diǎn)表示用戶點(diǎn)擊。實(shí)現(xiàn)邏輯：用戶聊天語句使用is_current(item.chatUserId)來判斷顯示在左側(cè)還是右側(cè)。用isBack來判斷是否點(diǎn)擊過。部分代碼的實(shí)現(xiàn)邏輯如圖5-2所示。圖5-2聊天模塊部分代碼的實(shí)現(xiàn)邏輯聊天模塊界面展示圖，如圖5-3所示。圖5-3聊天模塊界面展示圖5.3.2評(píng)論點(diǎn)評(píng)信息模塊設(shè)計(jì)思路：這個(gè)模塊主要實(shí)現(xiàn)用戶在文章下方評(píng)論，對(duì)方需要收到消息提示，以及也可以進(jìn)行消息的回復(fù)。其他用戶也可以點(diǎn)擊評(píng)論進(jìn)行評(píng)論的回復(fù)。實(shí)現(xiàn)邏輯：部分代碼邏輯圖如圖5-4(a)、圖5-4(b)所示圖5-4(a)點(diǎn)評(píng)模塊部分代碼邏輯圖圖5-4(b)點(diǎn)評(píng)模塊部分代碼邏輯圖5.3.3設(shè)置個(gè)人主頁(yè)模塊設(shè)計(jì)思路：用戶可以在個(gè)人主頁(yè)面看到收藏的文章、點(diǎn)贊的文章、自己發(fā)布的文章以及修改自己的個(gè)人信息。實(shí)現(xiàn)過程：點(diǎn)擊“我發(fā)布的”進(jìn)入“我發(fā)布的”的Page，渲染發(fā)布的文章列表?！拔尹c(diǎn)贊的”和“我評(píng)論的”以及“我收藏的”同“我發(fā)布的”邏輯上是類似的。進(jìn)入個(gè)人設(shè)置頁(yè)面，顯示個(gè)人資料的完整度，這個(gè)判斷數(shù)據(jù)庫(kù)中NULL字段的個(gè)數(shù)就可以得出了。點(diǎn)擊修改可以修改頭像、昵稱、性別。用戶類型可以顯示但不能修改。部分邏輯代碼圖和功能圖5-5(a)、5-5(b)所示。圖5-5(a)個(gè)人主頁(yè)部分邏輯代碼圖圖5-5(b)個(gè)人主頁(yè)部分邏輯代碼圖這一模塊的界面展示圖，如圖5-6所示。圖5-6個(gè)人主頁(yè)模塊界面展示圖5.3.4發(fā)布文章模塊設(shè)計(jì)思路：在“發(fā)現(xiàn)”頁(yè)面的右上角加個(gè)“發(fā)布”按鈕，點(diǎn)擊“發(fā)布”進(jìn)入發(fā)布文章頁(yè)面，填寫文章標(biāo)題，選擇文章類型，添加文章圖片在撰寫文章的具體內(nèi)容，最后點(diǎn)擊發(fā)布就可以發(fā)布文章了。實(shí)現(xiàn)過程：用戶點(diǎn)擊“發(fā)布”進(jìn)入新的Page，輸入點(diǎn)評(píng)相關(guān)數(shù)據(jù)保存進(jìn)數(shù)據(jù)庫(kù)，在“我發(fā)布的”頁(yè)面中需要渲染出新增的文章。部分邏輯代碼圖和功能圖5-7(a)、5-7(b)所示。圖5-7(a)發(fā)布文章部分邏輯代碼圖5-7(b)發(fā)布文章部分邏輯代碼發(fā)布文章功能模塊界面展示圖，如圖5-8所示。圖5-8發(fā)布文章功能模塊界面展示圖5.3.5系統(tǒng)管理設(shè)計(jì)思路：系統(tǒng)管理主要分為三個(gè)部分用戶管理、文章管理、評(píng)論管理。用戶管理主要是用于管理用戶的賬號(hào)狀態(tài)；文章管理用于管理文章的各種信息以及刪除和添加；評(píng)論管理用于管理不合適的評(píng)論信息，做到及時(shí)刪除。實(shí)現(xiàn)過程：將用戶設(shè)置為禁言狀態(tài)時(shí)，用戶就無法評(píng)論和發(fā)表點(diǎn)評(píng)，主要是通過點(diǎn)擊按鈕時(shí)調(diào)用觸發(fā)事件來判斷用戶是否需要禁言。刪除用戶就是直接從數(shù)據(jù)庫(kù)中刪除該用戶的信息。文章管理中的添加文章的邏輯和前端APP中用戶點(diǎn)擊發(fā)布的邏輯一致。評(píng)論管理中點(diǎn)擊刪除，文章評(píng)論數(shù)據(jù)從數(shù)據(jù)庫(kù)中去除，前端文章詳情頁(yè)要重新渲染文章數(shù)據(jù)。系統(tǒng)管理功能模塊界面展示圖，如圖5-9(a)、5-9(b)、5-9(c)所示。圖5-9(a)系統(tǒng)管理部分前端代碼圖5-9(b)系統(tǒng)管理部分前端代碼圖5-9(c)系統(tǒng)管理部分前端代碼發(fā)布文章功能模塊界面展示圖，如圖5-10所示。圖5-10系統(tǒng)管理功能模塊界面展示圖 6.系統(tǒng)測(cè)試6.1測(cè)試目的軟件測(cè)試是在各種系統(tǒng)設(shè)計(jì)以及實(shí)現(xiàn)后必不可少的一個(gè)環(huán)節(jié)。我們要及時(shí)對(duì)系統(tǒng)不正確的地方，比如說：邏輯上的BUG、系統(tǒng)功能上的BUG進(jìn)行修改。只有不斷地測(cè)試，才能夠使系統(tǒng)盡可能得完美。因?yàn)橐粋€(gè)系統(tǒng)的穩(wěn)定性、可修復(fù)性是很重要的衡量一個(gè)系統(tǒng)是否優(yōu)秀的重要條件之一，我們必須在我們能做到的范圍中，盡可能地做到最好。讓使用我們系統(tǒng)的用戶感受到最完美的體驗(yàn)。6.2系統(tǒng)的功能測(cè)試 系統(tǒng)的功能測(cè)試也稱作黑盒測(cè)試[15]，相比較于白盒測(cè)試，是不涉及到代碼，指針對(duì)功能的測(cè)試。登陸管理模塊測(cè)試用例見表6-1表6-1登陸管理模塊測(cè)試用例步驟操作數(shù)據(jù)預(yù)期測(cè)試結(jié)果實(shí)際結(jié)果1不輸入用戶名、密碼，登錄文字高亮提示“請(qǐng)輸入賬號(hào)密碼！”結(jié)果ok，和預(yù)想一致2輸入錯(cuò)誤的用戶名，密碼用戶名：ttt密碼：ttt文字高亮提示“用戶名不存在”結(jié)果ok，和預(yù)想一致3輸入正確密碼用戶名：tsn密碼：tangsinuo用戶成功登錄結(jié)果ok，和預(yù)想一致4注冊(cè)用戶用戶名：ttt密碼：ttt再次確認(rèn)密碼：ttt文字高亮提示“該用戶名已被占用”結(jié)果ok，和預(yù)想一致5注冊(cè)用戶用戶名：tttt密碼：ttt再次確認(rèn)密碼：ttt11文字高亮提示“密碼輸入錯(cuò)誤”結(jié)果ok，和預(yù)想一致6注冊(cè)用戶用戶名：密碼：ttt再次確認(rèn)密碼：ttt請(qǐng)輸入用戶名結(jié)果ok，和預(yù)想一致（2）發(fā)布點(diǎn)評(píng)信息模塊測(cè)試用例見表6-2表6-2點(diǎn)評(píng)信息模塊測(cè)試用例步驟操作數(shù)據(jù)預(yù)期測(cè)試結(jié)果實(shí)際結(jié)果1輸入文章標(biāo)題、圖片、內(nèi)容點(diǎn)擊發(fā)布文章標(biāo)題：test內(nèi)容：test發(fā)布成功結(jié)果ok，和預(yù)想一致2輸入圖片、內(nèi)容點(diǎn)擊發(fā)布發(fā)布失敗結(jié)果ok，和預(yù)想一致個(gè)人主頁(yè)模塊測(cè)試用例見表6-3表6-3個(gè)人主頁(yè)模塊測(cè)試用例步驟操作數(shù)據(jù)預(yù)期測(cè)試結(jié)果實(shí)際結(jié)果1收藏文章收藏夾有相應(yīng)文章結(jié)果ok，和預(yù)想一致2點(diǎn)贊文章喜歡里有相應(yīng)文章結(jié)果ok，和預(yù)想一致3編輯個(gè)人信息成功結(jié)果ok，和預(yù)想一致4設(shè)置個(gè)人頭像圖片成功結(jié)果ok，和預(yù)想一致5查看發(fā)布文章成功結(jié)果ok，和預(yù)想一致（4）聊天評(píng)論模塊測(cè)試用例見表6-4表6-4聊天評(píng)論模塊測(cè)試用例步驟操作數(shù)據(jù)預(yù)期測(cè)試結(jié)果實(shí)際結(jié)果1評(píng)論文章成功結(jié)果ok，和預(yù)想一致2點(diǎn)擊用戶頭像進(jìn)入個(gè)人聊天頁(yè)面結(jié)果ok，和預(yù)想一致3發(fā)送信息文字成功結(jié)果ok，和預(yù)想一致4發(fā)送圖片圖片成功結(jié)果ok，和預(yù)想一致（5）系統(tǒng)管理模塊測(cè)試用例見表6-5表6-5系統(tǒng)管理模塊測(cè)試用例步驟操作數(shù)據(jù)預(yù)期測(cè)試結(jié)果實(shí)際結(jié)果1添加用戶姓名:123密碼：123添加成功結(jié)果ok，和預(yù)想一致2添加用戶姓名:123密碼：123添加失敗結(jié)果ok，和預(yù)想一致3編輯角色權(quán)限成功結(jié)果ok，和預(yù)想一致4刪除角色成功結(jié)果ok，和預(yù)想一致5添加用戶信息成功結(jié)果ok，和預(yù)想一致6編輯用戶信息成功結(jié)果ok，和預(yù)想一致7刪除用戶成功結(jié)果ok，和預(yù)想一致6.3性能測(cè)試本次美食點(diǎn)評(píng)系統(tǒng)使用ApacheJMeter[16]進(jìn)行性能測(cè)試，發(fā)布點(diǎn)評(píng)信息、點(diǎn)擊查看美食信息，以及后臺(tái)頁(yè)面，并分析測(cè)試結(jié)果。當(dāng)線程數(shù)為10，并發(fā)數(shù)10時(shí)該系統(tǒng)的第一次性能測(cè)試記錄見表6-6：表6-6第一次性能測(cè)試記錄表[17]Label請(qǐng)求數(shù)平均響應(yīng)時(shí)間最小響應(yīng)時(shí)間最大響應(yīng)時(shí)間錯(cuò)誤請(qǐng)求數(shù)量百分比吞吐量點(diǎn)評(píng)文章頁(yè)面1000.50.310207.2961/sec首頁(yè)搜索界面1000.50.310207.9914/sec管理員后臺(tái)1000.50.310208.3424/sec將線程數(shù)修改為20、并發(fā)數(shù)20時(shí)該系統(tǒng)的第二次性能測(cè)試記錄見表6-7：表6-7第二次性能測(cè)試記錄表Label請(qǐng)求數(shù)平均響應(yīng)時(shí)間最小響應(yīng)時(shí)間最大響應(yīng)時(shí)間錯(cuò)誤請(qǐng)求數(shù)量百分比吞吐量點(diǎn)評(píng)文章頁(yè)面4000691.4/sec首頁(yè)搜索界面4000.50.520692.9/sec管理員后臺(tái)1000693.7/sec將線程數(shù)設(shè)置為40、并發(fā)數(shù)40時(shí)該系統(tǒng)的第三次性能測(cè)試記錄見表6-8：表6-8第三次性能測(cè)試記錄表Label請(qǐng)求數(shù)平均響應(yīng)時(shí)間最小響應(yīng)時(shí)間最大響應(yīng)時(shí)間錯(cuò)誤請(qǐng)求數(shù)量百分比吞吐量點(diǎn)評(píng)文章頁(yè)面9000.80.5301788.1/sec首頁(yè)搜索界面9000.80.5301790.9/sec管理員后臺(tái)9000.80.5301791.6/sec6.4測(cè)試