基于Android的IT博客APP的設(shè)計與實現(xiàn)

保定理工學(xué)院本科畢業(yè)設(shè)計緒論1.1研究目的和意義隨著時代的進步，人們的生活、學(xué)習(xí)方式都有了很大的改變，人們對網(wǎng)絡(luò)的依賴性越來越強，對手機、電腦等電子產(chǎn)品的依賴性也越來越強。因此很有必要開發(fā)一個適合自己的IT博客APP，這不僅可以讓學(xué)生在網(wǎng)絡(luò)上學(xué)習(xí)任何想要學(xué)習(xí)的東西，還可以讓學(xué)生們共同分享自己的學(xué)習(xí)心得，相互學(xué)習(xí)，不失為是一種有效的、科學(xué)的學(xué)習(xí)方式。學(xué)生們可以隨時打開自己的手機和電腦進行記錄與學(xué)習(xí)。在網(wǎng)絡(luò)上，像是出版，發(fā)表和張貼文章這樣的網(wǎng)絡(luò)行為在迅速發(fā)展中，blog就成了支持這樣的網(wǎng)絡(luò)出版代表的載體。一個blog一般是由一些短小的、不斷更新的帖子組成，并且按時間順序排列。blog的內(nèi)容與用途千差萬別，從連接與其他IT站點的新聞與資訊，到鏈接與評論。許多blog，是指個體在發(fā)表自己的觀點，或是一群人在針對一個特殊的議題或共同的目標(biāo)而展開的協(xié)作，每一個人都能在任何時候，將自己的思想火花和靈感帶到新的地方。在這個信息的時代，ITblog承擔(dān)了一個傳播的任務(wù)?？偠灾?，現(xiàn)在的現(xiàn)狀需要一個IT博客應(yīng)用程序來滿足人們的需求。1.2國內(nèi)外研究現(xiàn)狀隨著互聯(lián)網(wǎng)的迅速發(fā)展，個人博客也逐漸成為一個展現(xiàn)個人資訊的平臺。隨著時代的發(fā)展，網(wǎng)絡(luò)已經(jīng)成為人們快速獲取、發(fā)布和傳播信息的一個重要途徑。2021年，劉磊在其《基于SSH框架的博客用戶分享平臺的設(shè)計與實現(xiàn)》中，使用的是Java語言，在其后端，運用的主要框架技術(shù)以Struts2為核心，輔以Spring、Hibernate等其他框架技術(shù)，利用MySQL，利用Navicat的圖形化界面對數(shù)據(jù)庫進行視覺化操作，Bootstrap用于對UI頁面進行搭建，對頁面進行版式設(shè)計，并利用JSP技術(shù)實現(xiàn)數(shù)據(jù)的同步呈現(xiàn)，利用jQuery、Vue等進行異步加載。馬杰川于2021年在其論文《基于JSP的企業(yè)Blog系統(tǒng)的設(shè)計js框架進行ajax請求和頁面渲染,并使用Maven進行項目管理與實現(xiàn)》中，提出了“Blog、微博是新媒體時代信息發(fā)布與輿論引導(dǎo)的重要陣地”的觀點。采用了B/S架構(gòu)體系來進行系統(tǒng)的開發(fā)，通過對其進行結(jié)構(gòu)化設(shè)計，把各個功能按照模塊化的方式進行構(gòu)建，使得整個系統(tǒng)的設(shè)計思路更為明確。在代碼的設(shè)計上，使用了MVC架構(gòu)的方式，它將傳統(tǒng)的輸入、處理、輸出三個部分的功能獨立出來，大大減少了系統(tǒng)的耦合性，方便了系統(tǒng)的管理。然后，以SQLServer2008數(shù)據(jù)庫為核心，以Tomcat為核心，在前端，采用JSP開發(fā)技術(shù)，實現(xiàn)了前端網(wǎng)頁的設(shè)計，在后臺，使用Servlet實現(xiàn)了業(yè)務(wù)邏輯的處理，從而實現(xiàn)了整個系統(tǒng)的開發(fā)。與傳統(tǒng)的系統(tǒng)相比較，開發(fā)完成的企業(yè)博客系統(tǒng)擁有更加出色的系統(tǒng)架構(gòu)和處理效率，它為企業(yè)營銷提供了一個前沿、便捷、大眾化的接入平臺，從而提升了企業(yè)營銷的水平，為企業(yè)帶來了更大的經(jīng)濟效益。在移動端應(yīng)用程序日益普及的情況下，個體blog亦需開發(fā)符合其需求的blog應(yīng)用程序。博客最早出現(xiàn)于國外，比如推特，以成為全球訪問量最大的十大網(wǎng)站之一。2014年KaranGupta在《Bloginwebapplication：asoftwareengineeringperspective》中將博客集成到Web應(yīng)用程序中并提供了一個用于量化選定需求的度量軟件估計。其中使用的MVC模式開發(fā)有助于其他軟件的應(yīng)用和借鑒，通過數(shù)據(jù)庫設(shè)計技術(shù)設(shè)計類圖，建立模型分析數(shù)據(jù)。2020年，Vaezi、Reza;Torkzadeh等人在《UnderstandingtheInfluenceofBlogontheDevelopmentofSocialCapital》中指出博客在教育，市場營銷，新聞和人力資源管理等各個領(lǐng)域的快速使用和應(yīng)用突顯了對這種新技術(shù)對社會資本的影響的更好的了解，博客有望通過提供新的人際網(wǎng)絡(luò)手段來影響這種互動的程度和范圍。2020年11月，G?zdeKarabacak;MerveGen?在《TheUseofBlogsasanExampleofInternetEntrepreneurship:TurkishTravelBlogs》中提出博客已成為日常生活中不可思議的現(xiàn)實。博客實踐最初是從業(yè)余時間開始的，現(xiàn)在已經(jīng)成為許多人的職業(yè)。1.3論文組織架構(gòu)本文將開發(fā)設(shè)計過程分為六個章節(jié)，全面向讀者介紹了開發(fā)工具的選擇，從課題選擇到理論研究分析到最終實現(xiàn)，開發(fā)環(huán)境的搭建和編程代碼的制作，讓讀者通過本文，您可以對相應(yīng)開發(fā)的系統(tǒng)有一個初步的了解。第1章，緒論。緒論部分介紹了研究背景和意義、國內(nèi)外研究現(xiàn)狀以及論文框架的總體結(jié)構(gòu)。第2章，相關(guān)理論與技術(shù)。在相關(guān)理論和技術(shù)章節(jié)中，將介紹開發(fā)中使用的相關(guān)理論和相關(guān)技術(shù)。第3章，系統(tǒng)分析。從操作可行性、經(jīng)濟可行性和技術(shù)可行性三個方面進行分析。第4章，系統(tǒng)設(shè)計。描述了具體的功能模塊實現(xiàn)設(shè)計和具體的數(shù)據(jù)庫表設(shè)計。第5章，系統(tǒng)的實現(xiàn)。在系統(tǒng)實現(xiàn)章節(jié)中，系統(tǒng)的主要功能以截圖和文字說明的形式呈現(xiàn)。第6章，系統(tǒng)測試。在系統(tǒng)測試章節(jié)中，將介紹系統(tǒng)測試的方法和結(jié)果。第2章相關(guān)理論和技術(shù)2.1Java簡介Java語言作為一種強大的面向?qū)ο笳Z言，其主要優(yōu)勢有很多。常用的瀏覽平臺基本都支持Java，此為外勢。再看Java本身的技術(shù)也在不斷進步，此為內(nèi)力。內(nèi)力外勢相互作用下Java從此就一路順風(fēng)順?biāo)?，發(fā)展十分迅速，并迅速對其他編程語言形成強有力的沖擊。在如今云計算和互聯(lián)網(wǎng)遍布產(chǎn)業(yè)鏈的全球產(chǎn)業(yè)環(huán)境中，Java依舊是具有最重量級的優(yōu)勢和廣闊光明的前景。2.2MySQL特點 MySQL也就是屬于所謂的關(guān)系數(shù)據(jù)庫。MySQL數(shù)據(jù)庫可以在各類不同的操作系統(tǒng)上運行例如Mac，windows操作系統(tǒng)，Linux也都是一樣的。關(guān)系型數(shù)據(jù)庫的核心就是對數(shù)據(jù)進行存儲管理和處理。數(shù)據(jù)庫中的所有數(shù)據(jù)都會存儲在數(shù)據(jù)表中，所以通常，數(shù)據(jù)庫是通過改變表格和索引來實現(xiàn)存儲的。MySQL數(shù)據(jù)庫是一種一級模式，客戶機只有通過請求服務(wù)機的確認，才能進行對數(shù)據(jù)庫的操作。2.3B/S模式在APP與服務(wù)器數(shù)據(jù)庫之間進行有效的交互時，服務(wù)器管理器可以很好地響應(yīng)客戶機應(yīng)用與數(shù)據(jù)庫的交互。實際上，B/S模式是一種新型的MIS平臺，以網(wǎng)絡(luò)關(guān)系為依托，以用戶為依托，在不同層次上進行交疊。從理論上來說，B/S模式是一個三層系統(tǒng)管理平臺，其中，我們剛剛介紹的B/S模式是一個較為單一的服務(wù)器管理層，它由一個或多個服務(wù)器、服務(wù)器和應(yīng)用程序組成，從而構(gòu)建出一個三層系統(tǒng)管理平臺，在用戶和服務(wù)器之間傳遞信息。B/S模式中第一層是用戶對于服務(wù)器的請求，而第二層是用戶在經(jīng)過第一層到服務(wù)器，服務(wù)器接收到請求后，根據(jù)用戶發(fā)送的請求前一層生成一系列對應(yīng)的網(wǎng)頁，該網(wǎng)頁實際上就是服務(wù)器基于用戶請求給予的反饋，之后再將生成的網(wǎng)頁發(fā)送給用戶的瀏覽器中，以利于用戶獲得交互后的反饋。第三層實際上就是數(shù)據(jù)庫服務(wù)器，數(shù)據(jù)庫服務(wù)器的管理與上文描述的B/S模型都具有基于并行任務(wù)協(xié)調(diào)的特點。第3章系統(tǒng)分析3.1可行性分析3.1.1技術(shù)可行性技術(shù)上可行性是指開發(fā)中實際使用的框架和技術(shù)，以及采用的何種設(shè)計模式類型，這些在文章章節(jié)已經(jīng)有了相關(guān)的介紹，本次開發(fā)是以Android的IT博客APP的設(shè)計與實現(xiàn)為基礎(chǔ)，所使用的編程語言為Java語言，在開發(fā)過程中，以SSM框架為基礎(chǔ)圍繞進行開發(fā)，整體開發(fā)采用MVC設(shè)計模式。這些技術(shù)經(jīng)過廣泛的被利用，已經(jīng)由實踐證明了其技術(shù)的可行性。3.1.2經(jīng)濟可行性在經(jīng)濟上，就是在最初的設(shè)計階段，我們的研發(fā)程序要與設(shè)計階段的預(yù)算相一致，并且要有清晰的書面記錄。在此基礎(chǔ)上，研發(fā)出一款具有良好前景和較高經(jīng)濟效益的IT博客APP，并將其納入到我們的考量之中。開發(fā)的IT博客具有較好的前景。綜上所述，我們覺得這款I(lǐng)T博客app的設(shè)計是在經(jīng)濟上是可行的。3.1.3操作可行性將本系統(tǒng)交給使用者后，使用者便可輕松地使用，并透過影像界面來達成大部分的功能，且資料的輸入既有彈性又完整，且無模糊，讓使用者與管理者可以隨時查閱資料。整體系統(tǒng)要簡單，有效，并且能對用戶進行多層次的權(quán)限管理。根據(jù)以上幾點，我們可以斷定這項項目是可行的。3.2需求分析對系統(tǒng)功能進行需求分析可以幫助我們在開發(fā)軟件功能要求的時候明白哪些功能是必要的，哪些功能是不必要的。一次良好的分析可以很明確地幫助進行開發(fā)，避免進行不必要的浪費進而提高開發(fā)效率，達到降低開發(fā)成本和提高開發(fā)軟件質(zhì)量的目的。3.2.1功能需求分析本系統(tǒng)為IT博客APP，它的使用角色要分為用戶和管理員兩個角色，用戶可以使用該APP發(fā)布博客文章，發(fā)布學(xué)習(xí)線路，對博客進行收藏點贊點踩操作，發(fā)布帖子并在下方留言交流等。管理員具有系統(tǒng)中的大部分管理功能，管理員可以對用戶信息進行管理，查詢并管理博客的分類，查詢并管理博客的標(biāo)簽，以及對系統(tǒng)首頁公告信息等進行有效管理。用戶用例圖如圖3.1所示，管理員用例圖如圖3.2所示。博客文章博客文章學(xué)習(xí)路線學(xué)習(xí)路線收藏管理收藏管理貼子管理貼子管理用戶用戶圖3.1用戶用例圖用戶管理用戶管理博客分類管理博客分類管理標(biāo)簽管理標(biāo)簽管理博客文章管理博客文章管理系統(tǒng)管理系統(tǒng)管理學(xué)習(xí)線路管理管理員學(xué)習(xí)線路管理管理員論壇管理論壇管理圖3.2管理員用例圖3.2.2非功能需求分析本論文設(shè)計了一個IT博客APP，它為用戶儲存了大量的日志信息和基礎(chǔ)信息。為保證系統(tǒng)數(shù)據(jù)的安全性，在系統(tǒng)的設(shè)計與開發(fā)過程中，對用戶身份與權(quán)限管理模塊進行了特殊的配置。在這個系統(tǒng)里，所有的用戶身份都要經(jīng)過系統(tǒng)的認證，按照這個用戶的身份來設(shè)定他們的權(quán)限，并保證OS用戶只在一定的權(quán)限之內(nèi)運行，而且只有在一定的權(quán)限之內(nèi)才能對OS數(shù)據(jù)進行存取。為了保證系統(tǒng)數(shù)據(jù)的安全性，在出現(xiàn)不正常要求時，可以根據(jù)對應(yīng)的身份以及要求，及時終止該次不正常的要求。第4章系統(tǒng)設(shè)計4.1功能模塊設(shè)計根據(jù)對系統(tǒng)的功能分析IT博客APP的主要功能模塊包括以下模塊：用戶管理、博客信息管理、博客推送、論壇用戶交流、學(xué)習(xí)線路展示、博客審核管理、博客熱門管理等功能模塊。系統(tǒng)功能模塊圖如圖4.1所示：圖4.1系統(tǒng)功能模塊圖4.2數(shù)據(jù)庫設(shè)計4.2.1數(shù)據(jù)庫需求分析在系統(tǒng)的實際設(shè)計和開發(fā)的過程中我們必須認真對待系統(tǒng)數(shù)據(jù)庫的設(shè)計。必須絕對保證系統(tǒng)數(shù)據(jù)和用戶數(shù)據(jù)的安全，必須對用戶的權(quán)限進行限制，同時應(yīng)該定時的管理和備份數(shù)據(jù)庫，以免出現(xiàn)意外導(dǎo)致數(shù)據(jù)丟失，需要不定時檢查分析數(shù)據(jù)庫存儲的狀態(tài)，分析其響應(yīng)速度。N1M1M1NMMN4.2.2數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計N1M1M1NMMN圖4.2實體關(guān)系E-R圖本系統(tǒng)為實現(xiàn)IT博客管理等功能，包含用戶、博客、管理員、標(biāo)簽幾個重要實體。用戶實體和博客實體間存在發(fā)布、評論、收藏的聯(lián)系。管理員和博客實體間存在審核的聯(lián)系。博客和標(biāo)簽存在屬于的聯(lián)系，具體E-R圖如上圖4.2所示。博客文章博客文章文章內(nèi)容賬號用戶id文章簡介文章標(biāo)題文章封面標(biāo)簽博客分類發(fā)布日期圖4.3博客文章實體圖用戶性別用戶性別手機號碼頭像id創(chuàng)建時間密碼賬號郵箱4.2.3數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計從實體上看，數(shù)據(jù)庫的首要目的是為了數(shù)據(jù)訪問。當(dāng)然需要對數(shù)據(jù)庫進行增加索引，以便對操作系統(tǒng)數(shù)據(jù)進行存取。按照存取方式的不同，將其存取方式劃分為索引表和順序表兩種。在前面的部分，我們介紹了一種基于E-R圖的、在各個數(shù)據(jù)實體間建立對應(yīng)的數(shù)據(jù)庫、對應(yīng)的表的方法。本系統(tǒng)的詳細表格設(shè)計如下：(1)用戶表“用戶表”用于記錄用戶的各類重要信息包括權(quán)限信息，賬號密碼等。用戶表的結(jié)構(gòu)如表4.1所示。表4.1用戶表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵usernamevarchar40用戶名passwordvarchar20密碼rolevarchar20角色管理員addtimetimestamp新增時間CURRENT_TIMESTAMP(2)關(guān)于我們systemintro關(guān)于我們的結(jié)構(gòu)如表4.2所示表4.2關(guān)于我們表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPtitlevarchar20標(biāo)題subtitlevarchar20副標(biāo)題contentlongtext4294967295內(nèi)容picture1longtext4294967295圖片1picture2longtext4294967295圖片2picture3longtext4294967295圖片3(3)公告信息news“公告信息”是用于管理員發(fā)布公告信息的，便于管理員傳達公告信息。公告信息的結(jié)構(gòu)如表4.3所示。表4.3公告信息表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間titlevarchar20標(biāo)題introductionlongtext4294967295簡介picturelongtext4294967295圖片contentlongtext4294967295內(nèi)容(4)博客文章評論表discussbokewenzhang“博客文章評論表”是用來記錄用戶反饋博客文章好壞的評價信息。博客文章評論表的結(jié)構(gòu)如表4.4所示。表4.4博客文章評論表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPrefidbigint關(guān)聯(lián)表iduseridbigint用戶idavatarurllongtext4294967295頭像nicknamevarchar25用戶名contentlongtext4294967295評論內(nèi)容replylongtext4294967295回復(fù)內(nèi)容(5)配置文件表config“配置文件表”是用于記錄與存儲系統(tǒng)中的配置文件信息，這些配置文件信息參數(shù)主要存儲在配置文件表內(nèi)，配置文件表的結(jié)構(gòu)如表4.5所示。表4.5配置文件表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵namevarchar20配置參數(shù)名稱valuevarchar100配置參數(shù)值(6)博客文章bokewenzhang“博客文章”是用來記錄文章的信息。博客文章的結(jié)構(gòu)如表4.6所示。表4.6博客文章表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間wenzhangbiaotivarchar20文章標(biāo)題wenzhangfengmianlongtext4294967295文章封面bokefenleivarchar20博客分類biaoqianvarchar20標(biāo)簽wenzhangjianjielongtext4294967295文章簡介wenzhangneironglongtext4294967295文章內(nèi)容zhanghaovarchar20賬號xingmingvarchar10姓名faburiqidate發(fā)布日期thumbsupnumint贊0crazilynumint踩0clicktimedatetime最近點擊時間useridbigint用戶id(7)用戶表yonghu“用戶”記錄請求登錄后的用戶的基本個人信息。用戶表的結(jié)構(gòu)如表4.7所示。表4.7用戶表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPzhanghaovarchar20賬號mimavarchar20密碼xingmingvarchar10姓名xingbievarchar2性別youxiangvarchar20郵箱shoujihaomavarchar20手機號碼touxianglongtext4294967295頭像(8)學(xué)習(xí)線路表xuexixianlu“學(xué)習(xí)線路表”是用來記錄學(xué)習(xí)路線的信息。學(xué)習(xí)線路表的結(jié)構(gòu)如表4.8所示。表4.8學(xué)習(xí)線路表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPbiaotivarchar20標(biāo)題fengmianlongtext4294967295封面yujiwanchengdatetime預(yù)計完成zhongdiannandianvarchar20重點難點xuexineironglongtext4294967295學(xué)習(xí)內(nèi)容zhanghaovarchar20賬號xingmingvarchar20姓名faqiriqidate發(fā)起日期useridbigint用戶id(9)論壇表forum“論壇表”是用于記錄論壇中發(fā)布的帖子的基本信息包括內(nèi)容標(biāo)題等。論壇表的結(jié)構(gòu)如表4.9所示。表4.9論壇表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPtitlevarchar20帖子標(biāo)題contentlongtext4294967295帖子內(nèi)容parentidbigint父節(jié)點iduseridbigint用戶idusernamevarchar20用戶名avatarurllongtext4294967295頭像isdonevarchar10狀態(tài)(10)博客分類表bokefenlei“博客分類表”是用來記錄博客分類的信息。博客分類的結(jié)構(gòu)如表4.10所示。表4.10博客分類表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPbokefenleivarchar20博客分類(12)收藏表storeup“收藏表”是用于記錄用戶喜歡的博客文章類型信息。收藏表storeup的結(jié)構(gòu)如表4.11所示。表4.11收藏表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPuseridbigint用戶idrefidbigint博客idtablenamevarchar20表名namevarchar20名稱picturelongtext4294967295圖片typevarchar50類型(1:收藏,21:贊,22:踩)1inteltypevarchar20推薦類型remarkvarchar100備注(12)標(biāo)簽biaoqian“標(biāo)簽”是用來記錄標(biāo)簽的信息。標(biāo)簽biaoqian的結(jié)構(gòu)如表4.12所示。表4.12標(biāo)簽表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestap創(chuàng)建時間CURRENT_TIMESTAMPbiaoqianvarchar20標(biāo)簽(13)關(guān)于我們aboutus關(guān)于我們aboutus的結(jié)構(gòu)如表4.13所示。表4.13關(guān)于我們表字段名稱類型長度字段說明主鍵默認值idbigint主鍵主鍵addtimetimestamp創(chuàng)建時間CURRENT_TIMESTAMPtitlevarchar20標(biāo)題subtitlevarchar20副標(biāo)題contentlongtext4294967295內(nèi)容picture1longtext4294967295圖片1picture2longtext4294967295圖片2picture3longtext4294967295圖片3第5章系統(tǒng)實現(xiàn)5.1用戶登錄注冊當(dāng)用戶第一次訪問系統(tǒng)的時候，點擊個人中心會自動進入用戶登錄注冊頁面，用戶首次注冊需要輸入用戶帳號、密碼、性別、用戶手機等基本信息。在圖5.1中顯示了使用者注冊登記的界面。用戶登錄操作要求必須輸入賬號以及與之相對應(yīng)的密碼，然后按下“登錄”鍵。若未鍵入使用者名稱或口令，則會要求使用者輸入使用者名稱及口令。若輸入的賬號以及密碼無法對應(yīng)則提示密碼錯誤，使用者登入界面顯示在圖5.2中。圖5.1用戶注冊界面圖圖5.2用戶登錄界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：if(!this.username){this.$utils.msg('請輸入用戶名')return}if(!this.password){this.$utils.msg('請輸入用戶密碼')Return}if(!this.optionsValues[this.index]){this.$utils.msg('請選擇登陸用戶類型')Return}@PostMapping(value="/login")publicRlogin(Stringusername,Stringpassword,Stringcaptcha,HttpServletRequestrequest){UsersEntityuser=userService.selectOne(newEntityWrapper<UsersEntity>().eq("username",username));if(user==null||!user.getPassword().equals(password)){returnR.error("賬號或密碼不正確");}Stringtoken=tokenService.generateToken(user.getId(),username,"users",user.getRole());returnR.ok().put("token",token);}5.2用戶個人中心當(dāng)使用者成功登入系統(tǒng)時，可以點擊個人中心按鈕進入個人中心界面，其中有使用者的某些個人資料，使用者可以在其中進行修改及儲存。圖5.3顯示了個人中心界面：圖5.3用戶個人中心管理界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：if((!this.ruleForm.mima)&&`yonghu`==this.tableName){this.$utils.msg(`密碼不能為空`);return}if((!this.ruleForm.xingming)&&`yonghu`==this.tableName){this.$utils.msg(`姓名不能為空`);return}if(`yonghu`==this.tableName&&this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){this.$utils.msg(`郵箱應(yīng)輸入郵件格式`);return}if(`yonghu`==this.tableName&&this.ruleForm.shoujihaoma&&(!this.$validate.isMobile(this.ruleForm.shoujihaoma))){this.$utils.msg(`手機號碼應(yīng)輸入手機格式`);return}lettable=uni.getStorageSync("nowTable");awaitthis.$api.update(table,this.ruleForm);this.$utils.msgBack('修改成功');5.3用戶發(fā)布博客當(dāng)用戶登錄成功，進入系統(tǒng)之后，點擊”我的”，進入到界面之后，點擊博客文章，進入到該用戶發(fā)布博客與歷史發(fā)布博客記錄頁面，進入”我的博客文章”過程具體如圖5.4所示。圖5.4”我的”界面圖進入博客文章后可以看到該用戶發(fā)布的不同類型的博客?！拔业牟┛臀恼隆苯缑嫒鐖D5.5所示：圖5.5”我的”博客文章圖在當(dāng)前頁面發(fā)布新博客右下角點擊”新”進入發(fā)布博客界面，發(fā)布新博客需要填寫博客基礎(chǔ)信息，該界面如圖5.6所示：圖5.6發(fā)布博客界面圖填寫完博客基礎(chǔ)信息后點擊提交即可發(fā)布博客，成功發(fā)布博客后將有提示，成功發(fā)布博客如圖5.7所示：圖5.7博客成功發(fā)布界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：asynconLoad(options){this.ruleForm.faburiqi=this.$utils.getCurDate();lettable=uni.getStorageSync("nowTable");//獲取用戶信息letres=awaitthis.$api.session(table);this.user=res.data;//ss讀取this.ruleForm.zhanghao=this.user.zhanghaothis.ro.zhanghao=true;this.ruleForm.xingming=this.user.xingmingthis.ro.xingming=true;res=awaitthis.$api.option(`bokefenlei`,`bokefenlei`,{});//下拉框this.bokefenleiOptions=res.data;this.bokefenleiOptions.unshift("請選擇博客分類");res=awaitthis.$api.option(`biaoqian`,`biaoqian`,{});//下拉框this.biaoqianOptions=res.data;this.biaoqianOptions.unshift("請選擇標(biāo)簽");//如果有登陸，獲取登陸后保存的useridthis.ruleForm.userid=uni.getStorageSync("userid")if(options.refid){//如果上一級頁面?zhèn)鬟f了refid，獲取改refid數(shù)據(jù)信息this.ruleForm.refid=options.refid;this.ruleForm.nickname=uni.getStorageSync("nickname");}//如果是更新操作if(options.id){this.ruleForm.id=options.id;//獲取信息res=awaitthis.$(`bokewenzhang`,this.ruleForm.id);this.ruleForm=res.data;}5.4博客推送用戶登錄首頁后下拉到博客文章推薦板塊，該板塊按照用戶收藏博客類型進行博客推送，若用戶收藏類型的博客數(shù)量未達到推送數(shù)量，則推送未曾收藏的博客類型。博客文章類型推薦如圖5.8所示：圖5.8博客文章推薦界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：@RequestMapping("/autoSort2")//（按博客分類收藏推薦）publicRautoSort2(@RequestParamMap<String,Object>params,BokewenzhangEntitybokewenzhang,HttpServletRequestrequest){StringuserId=request.getSession().getAttribute("userId").toString();StringinteltypeColumn="bokefenlei";List<StoreupEntity>storeups=storeupService.selectList(newEntityWrapper<StoreupEntity>().eq("type",1).eq("userid",userId).eq("tablename","bokewenzhang").orderBy("addtime",false));List<String>inteltypes=newArrayList<String>();Integerlimit=params.get("limit")==null?10:Integer.parseInt(params.get("limit").toString());List<BokewenzhangEntity>bokewenzhangList=newArrayList<BokewenzhangEntity>();//去重if(storeups!=null&&storeups.size()>0){for(StoreupEntitys:storeups){bokewenzhangList.addAll(bokewenzhangService.selectList(newEntityWrapper<BokewenzhangEntity>().eq(inteltypeColumn,s.getInteltype())));}}EntityWrapper<BokewenzhangEntity>ew=newEntityWrapper<BokewenzhangEntity>();params.put("sort","id");params.put("order","desc");PageUtilspage=bokewenzhangService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew,bokewenzhang),params),params));List<BokewenzhangEntity>pageList=(List<BokewenzhangEntity>)page.getList();if(bokewenzhangList.size()<limit){inttoAddNum=(limit-bokewenzhangList.size())<=pageList.size()?(limit-bokewenzhangList.size()):pageList.size();for(BokewenzhangEntityo1:pageList){booleanaddFlag=true;for(BokewenzhangEntityo2:bokewenzhangList){if(o1.getId().intValue()==o2.getId().intValue()){addFlag=false;break;}}if(addFlag){bokewenzhangList.add(o1);if(--toAddNum==0)break;}}}elseif(bokewenzhangList.size()>limit){bokewenzhangList=bokewenzhangList.subList(0,limit);}page.setList(bokewenzhangList);returnR.ok().put("data",page);}5.5論壇交流用戶登錄后點擊“論壇”，進入到論壇界面如圖5.9所示：圖5.9用戶論壇界面圖在用戶論壇界面下滑可看到更多帖子也可在頂部按照標(biāo)題進行搜索，點擊“某某交流帖子”進入該帖子的詳情介紹界面，進行評論可在帖子下方進行，該帖子詳情界面如圖5.10所示：圖5.10某某帖子詳情圖實現(xiàn)該功能的關(guān)鍵代碼如下：varcrossuserid;//更新跨表屬性varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}5.6學(xué)習(xí)路線用戶登錄后點擊“我的”之后點擊學(xué)習(xí)線路欄目可以看到自己發(fā)布的學(xué)習(xí)線路記錄，用于記錄自己在閱讀學(xué)習(xí)過程中的困難點，進入學(xué)習(xí)線路界面過程如圖5.11所示：圖5.11“我的”學(xué)習(xí)線路圖進入學(xué)習(xí)線路界面后可以進行新增，刪除，查詢，修改等操作，學(xué)習(xí)線路具體界面如圖5.12所示：圖5.12學(xué)習(xí)線路界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：//搜索asyncsearch(){this.mescroll.num=1letsearchForm={page:this.mescroll.num,limit:this.mescroll.size}if(this.searchForm.biaoti){searchForm['biaoti']='%'+this.searchForm.biaoti+'%'}if(this.searchForm.xingming){searchForm['xingming']='%'+this.searchForm.xingming+'%'}letres={};if(this.userid){res=awaitthis.$api.page(`xuexixianlu`,searchForm);}else{res=awaitthis.$api.list(`xuexixianlu`,searchForm);}//如果是第一頁數(shù)據(jù)置空if(this.mescroll.num==1)this.list=[];this.list=this.list.concat(res.data.list);letlength=Math.ceil(this.list.length/6)letarr=[];for(leti=0;i<length;i++){arr[i]=this.list.slice(i*6,(i+1)*6)}this.lists=arrif(res.data.list.length==0)this.hasNext=false;this.mescroll.endSuccess(this.mescroll.size,this.hasNext);}}};5.7用戶管理當(dāng)管理員登陸后臺系統(tǒng)的時候，在用戶管理界面下面的“用戶”兩個字，就會出現(xiàn)在這個頁面上，在這個頁面上鍵入相應(yīng)的用戶資料，就可以通過查詢來查找該用戶，并且可以對該用戶的帳號進行添加、刪除、修改、查詢等操作。用戶管理界面如圖5.13所示：圖5.13用戶管理圖實現(xiàn)該功能的關(guān)鍵代碼如下：//添加/修改addOrUpdateHandler(id,type){this.showFlag=false;this.addOrUpdateFlag=true;this.crossAddOrUpdateFlag=false;if(type!='info'){type='else';}this.$nextTick(()=>{this.$refs.addOrUpdate.init(id,type);});},5.8博客分類管理作為一個管理員，登陸到后臺，在“博客分類”下，點擊“博客分類”，然后就會出現(xiàn)在“博客分類”的頁面上，在頁面上輸入博客的類別，然后就可以找到相應(yīng)的博客，然后就可以對其進行管理了，當(dāng)然，你也可以對其做一些簡單的處理。博客分類管理界面如圖5.14所示：圖5.14博客分類管理界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：//獲取數(shù)據(jù)列表getDataList(){this.dataListLoading=true;letparams={page:this.pageIndex,limit:this.pageSize,sort:'id',order:'desc',}if(this.searchForm.bokefenlei!=''&&this.searchForm.bokefenlei!=undefined){params['bokefenlei']='%'+this.searchForm.bokefenlei+'%'}this.$http({url:"bokefenlei/page",method:"get",params:params}).then(({data})=>{if(data&&data.code===0){this.dataList=data.data.list;this.totalPage=data.data.total;}else{this.dataList=[];this.totalPage=0;}this.dataListLoading=false;});},5.9標(biāo)簽管理管理員登錄后臺，在“標(biāo)簽”管理欄中選擇“標(biāo)簽”按鈕，然后就會出現(xiàn)在“標(biāo)簽”的管理頁面上，在上面輸入相應(yīng)的標(biāo)簽信息，就可以找到相應(yīng)的標(biāo)簽，也可以對這些標(biāo)簽進行簡單的添加、刪除、修改、查看等操作。標(biāo)簽管理界面如圖5.15所示：圖5.15標(biāo)簽管理界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：deleteHandler(id){varids=id?[Number(id)]:this.dataListSelections.map(item=>{returnNumber(item.id);});this.$confirm(`確定進行[${id?"刪除":"批量刪除"}]操作?`,"提示",{}).then(({data})=>{if(data&&data.code===0){this.$message({message:"操作成功",type:"success",duration:1500,onClose:()=>{this.search();}});}else{this.$message.error(data.msg);}});});},5.10博客文章管理當(dāng)管理員登錄后臺時，在“博客文章”管理界面中，在“博客文章”欄中，鍵入相應(yīng)的博客文章，就可以通過搜索來查找相應(yīng)的博客文章，并可以對其進行添加，查看評論，刪除評論，刪除評論，批量刪除。博客文章管理界面如圖5.16所示：圖5.16博客文章管理界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：//查看評論disscussListHandler(id,type){this.$router.push({path:'/discussbokewenzhang',query:{refid:id}});},//下載download(file){window.open(`${file}`)},//刪除deleteHandler(id){varids=id?[Number(id)]:this.dataListSelections.map(item=>{returnNumber(item.id);});5.11學(xué)習(xí)線路管理以管理員身份登錄到后臺系統(tǒng)中，選擇學(xué)習(xí)線路管理下的“學(xué)習(xí)線路”按鈕，進入學(xué)習(xí)線路列表界面，輸入標(biāo)題、姓名，選擇查詢找到學(xué)習(xí)線路，還可以對學(xué)習(xí)線路進行刪除、批量刪除等操作。學(xué)習(xí)線路界面如圖5.17所示：圖5.17學(xué)習(xí)線路管理界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：//當(dāng)前頁currentChangeHandle(val){this.pageIndex=val;this.getDataList();},//多選selectionChangeHandler(val){if(type!='info'){type='else';}this.$nextTick(()=>{this.$refs.addOrUpdate.init(id,type);5.12論壇管理管理員登錄后臺系統(tǒng)時，選擇論壇管理界面下的“論壇”，進入論壇列表界面，輸入對應(yīng)帖子的信息可以點擊查詢找到對應(yīng)帖子，還可以對帖子進行查看評論、刪除、批量刪除等操作。論壇管理界面如圖5.18所示：圖5.18論壇管理界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：varcrossuserid;varcrossrefid;varcrossoptnum;if(this.type=='cross'){varstatusColumnName=this.$storage.get('statusColumnName');varstatusColumnValue=this.$storage.get('statusColumnValue');if(statusColumnName!=''){varobj=this.$storage.getObj('crossObj');if(statusColumnName&&!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=this.$storage.get('crossTable');this.$http({url:`${table}/update`,method:"post",data:obj}).then(({data})=>{});}else{crossuserid=this.$storage.get('userid');crossrefid=obj['id'];crossoptnum=this.$storage.get('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}5.13系統(tǒng)管理管理員登錄后臺系統(tǒng)時，選擇系統(tǒng)管理系統(tǒng)下的“公告信息”，進入公告信息列表界面，輸入對應(yīng)公告的信息可以選擇查詢到對應(yīng)公告，還可以對公告信息進行修改、刪除、批量刪除等操作。公告信息管理界面如圖5.19所示：圖5.19公告信息管理界面圖實現(xiàn)該功能的關(guān)鍵代碼如下：this.$http({url:"news/page",method:"get",params:params}).then(({data})=>{if(data&&data.code===0){if(data.data.total>=crossoptnum){this.$message.error(this.$storage.get('tips'));returnfalse;}else{this.$http({url:`news/${!this.ruleForm.id?"save":"update"}`,method:"post",data:this.ruleForm}).then(({data})=>{if(data&&data.code===0){this.$message({message:"操作成功",type:"success",duration:1500,onClose:()=>{this.parent.showFlag=true;this.parent.addOrUpdateFlag=false;this.parent.newsCrossAddOrUpdateFlag=false;this.parent.search();this.parent.contentStyleChange();}});}else{this.$message.error(data.msg);}});第6章系統(tǒng)測試在各個功能模塊和接受操作界面設(shè)計完畢之后，在正式使用之前，還需要對其進行一系列的功能和性能的測試，從而確保系統(tǒng)能夠可靠的運行，一旦發(fā)現(xiàn)了問題，就能夠?qū)ζ溥M行修復(fù)和改進。本文使用黑盒測試，黑盒測試簡單來說就是一種理想情況下對于系統(tǒng)各個功能的檢測，在進行黑盒測試的時候，測試人員要以用戶的觀點為出發(fā)點，利用對應(yīng)的功能測試用例，對比實際測試獲得的反饋和用戶的預(yù)期，這對于發(fā)現(xiàn)存在的問題和及時的反饋是很有幫助的。在黑箱試驗中，采用了位移法、邊界值法。由于黑箱試驗中經(jīng)常出現(xiàn)“故障”，且誤差出現(xiàn)頻率高且頻率高，本項目擬采用邊界值分析法，選取邊界值進行試驗，從而直觀、準(zhǔn)確地判斷出輸入、輸出范圍內(nèi)的系統(tǒng)是否穩(wěn)定、可靠。6.1測試步驟同開發(fā)一樣，在試點期間應(yīng)該逐步實行。每個步驟都應(yīng)當(dāng)是前一個步驟的延續(xù)。一般系統(tǒng)都具有面向的使用用戶以及需要進行管理的人員，而每一個對象下面都有不同的功能模塊，所以測試時對于面向的對象以及對象下的功能模塊進行劃分測試：1.對系統(tǒng)進行簡單劃分，整理劃分系統(tǒng)面向的各類用戶以及各類用戶的對應(yīng)功能模塊。2.測試對應(yīng)功能模塊能否達到預(yù)期效果，以及找出功能中的bug。3.對發(fā)現(xiàn)缺陷的程序進行標(biāo)記并記錄而后進行修復(fù)。6.2測試用例6.2.1登錄測試用例用戶端測試用例依據(jù)用戶要求進行設(shè)計，采用黑盒測試的技術(shù)，部分的測試結(jié)果如表6.1所示。表6.1登錄測試用例表測試編號測試目的操作步驟預(yù)期結(jié)果實際結(jié)果001登錄測試輸入正確的用戶名和密碼登錄成功登錄成功002登錄測試輸入錯誤的用戶名登錄失敗登錄失敗003登錄測試輸入錯誤的的密碼登錄失敗登錄失敗用戶端測試登錄操作圖如圖6.1所示：圖6.1用戶登錄測試圖6.2.2博客信息管理測試用例管理端在運行時要滿足瀏覽器的運行需求，比如添加博客信息測試、修改博客信息測試、刪除博客信息測試等。本節(jié)根據(jù)管理端各模塊進行測試，因考慮到本文篇幅有限，這里代表性的部分測試用例，如表6.2所示。表6.2文章信息管理測試用例表測試編號測試目的操作步驟預(yù)期結(jié)果實際結(jié)果001添加博客信息測試在添加頁面輸入博客信息，點擊確認按鈕添加成功添加成功002修改博客信息測試在修改頁面修改博客信息，點擊確認按鈕修改成功修改成功003刪除博客信息測試在管理博客信息頁面，點擊某一用戶的刪除按鈕刪除成功刪除成功004查詢博客信息測試在管理博客信息頁面查詢輸入框輸入要查詢的用戶名字，點擊查詢按鈕查詢成功查詢成功管理端刪除博客信息測試操作圖如圖6.2所示：圖6.2刪除博客信息測試圖6.2.3用戶收藏點贊博客測試用例用戶端測試用例依據(jù)用戶要求進行設(shè)計，采用黑盒測試的技術(shù)，部分的測試結(jié)果如表6.3所示。表6.3收藏點贊用例表測試編號測試目的操作步驟預(yù)期結(jié)果實際結(jié)果001收藏測試點擊收藏收藏成功收藏成功002點贊測試點擊點贊點贊成功點贊成功003點踩測試點擊點踩點踩成功點踩成功收藏操作圖如圖6.3所示：圖6.3收藏博客測