引言1.1選題背景如今，為了大學生的全面發(fā)展，同時伴隨著各大高校爭前恐后對教學設備和教育資源進行更新改造，大學生已經不僅僅只是單一學習書本知識和課堂知識，還可以通過報刊、網絡等多種渠道接觸和學習新知識。然而由于報刊受截稿、編輯、出版等因素的影響無法實時更新，且不便于隨身攜帶，還會產生廢紙垃圾，因此報刊在校園流傳不廣。得益于網絡的飛速發(fā)展和網絡教育資源的豐富，大學生不僅能從課堂和書本上學習知識，還能更容易在網絡上獲得知識、關注實時新聞，而且能從新聞中增長更加豐富的見識，因此新聞的準確性、時效性就顯得極為重要。所以，為了成為更好的傳播者，將富有正能量的新聞傳遞給身邊的人，不管是在專業(yè)知識儲備量，還是在思想覺悟上，都要有很高的提升能力，但是有了這些還不夠，在當今的互聯(lián)網時代，信息網絡技術快速更新與發(fā)展，如果想要新聞在內容和形式上有所突破，并使高校新聞工作更加亮眼，有助于為高校新聞宣傳工作提供極大的便利，相應的新聞工作者就還需要具備過硬的專業(yè)技術作為支撐。以此為背景，開發(fā)出校園新聞發(fā)布網站將顯得尤為迫切。最近幾年，經濟建設日益強大，互聯(lián)網技術有了質的飛躍，逐漸成為計算機行業(yè)的高新技術產業(yè)，Internet的快速發(fā)展得益于Web技術的迅猛發(fā)展。Web技術的發(fā)展與應用，豐富并完善了網頁的功能，使其具有更好的人機交互特性，方便后臺人員對其編輯并實時改進，達到吸引人的目的?；ヂ?lián)網技術的迅猛發(fā)展促進了其在各行各業(yè)的應用，例如高校在網上發(fā)布招生信息、企事業(yè)單位在網上發(fā)布招聘信息、政府部門在網上發(fā)布新聞等。得力于網絡的便利，各大高校逐漸推動一體化、信息化建設，方便師生在線交流，也有利于從網上獲取各類招聘、招生、錄取等信息。新聞是傳遞信息的有效途徑，具有便利、快捷、實時性，在高校中得到了廣泛應用，新聞改善了大學生的學習氛圍及思維習慣，潛移默化地引領學生保持積極向上的生活方式、端正的思想態(tài)度，實現(xiàn)正確的人生價值導向。及時、準確的新聞信息作為大學生學習與交流的重要途徑，這對高校的新聞宣傳工作者提出了更高的要求，有關人員不僅要具備很高的政治站位、豐厚的知識儲備和熟練的業(yè)務水平，還要具備扎實的計算機技術綜合應用能力，才能有助于高校的新聞宣傳工作的優(yōu)化與創(chuàng)新，以適應信息傳播技術和網絡新聞業(yè)的發(fā)展帶來的新形勢。在當前時代背景下，校園新聞發(fā)布網站的開發(fā)就隨之出現(xiàn)了。本文開發(fā)的“基于Vue的校園新聞發(fā)布網站”系統(tǒng)，能夠具備在線實時更新、管理、查看新聞等功能，不僅如此，管理員還能在系統(tǒng)中對后臺進行管理，進行對新聞的增、刪、查、改等操作，確保新聞的實時、準確。1.2國內外研究現(xiàn)狀信息，是人類生活中必不可少的一部分。隨著信息化的不斷發(fā)展，報刊這種手段已經完全無法滿足現(xiàn)狀。現(xiàn)今，網絡已成為主要的媒介和手段。國外尤其是發(fā)達國家信息發(fā)布的技術已經非常的成熟。有些公司一直處于領先地位。國內信息發(fā)布技術起步較晚，隨著網絡的并不斷發(fā)展，及國內優(yōu)秀者的研究，信息發(fā)布技術也非常的優(yōu)秀。但仍有一定的局限性，如軟件采用的技術比較落后等。新聞發(fā)布的目的是為了實時發(fā)布和獲取信息，使用報刊這種形式是很難滿足這種需求。在過去，新聞系統(tǒng)可能只能查看新聞。隨著技術的日臻成熟，逐漸提供了一些使用的功能，如將新聞進行合理的分類，評論等功能[1-4]。1.3主要研究內容通過B/S模式開發(fā)的校園新聞發(fā)布網站，利用技術手段將新聞內容整理后有序地呈現(xiàn)出來。通過校內新聞發(fā)布系統(tǒng)，方便師生快速獲取校園實時動態(tài)，有利于傳遞學校方針，通過互聯(lián)網技術讓學生方便、快捷地了解學校。1、學生通過登錄網站平臺，主要功能是查看新聞具體內容。2、管理員通過登錄網站平臺，主要功能是實現(xiàn)對新聞的編輯與修改等功能。3、建立數(shù)據(jù)庫，方便工作人員對數(shù)據(jù)進行有效的維護和管理。4、實現(xiàn)學生端發(fā)布失物招領申請等功能。5、管理員對失物招領和留言有審核的權限。1.4論文安排與工作本網站設計的主要目的是開發(fā)一套校園新聞發(fā)布網站。該網站不僅方便師生了解學校最新動向，減少老師的工作量，讓學生增加對學校的了解，還具有失物招領的功能，讓學生在學校生活的更好。論文主體有以下7個部分：第一個部分為引言，敘述校園新聞發(fā)布網站課題的背景、現(xiàn)狀。第二個部分為相關技術介紹。第三個部分為需求分析，描述校園新聞發(fā)布網站所具備的功能以及可實現(xiàn)的效果。第四個部分為系統(tǒng)總體設計，主要介紹數(shù)據(jù)庫的具體設計。第五個部分為程序與代碼的實現(xiàn)模塊，有部分關鍵代碼及參考圖片，讓人能直觀理解該網站。第六個部分為系統(tǒng)測試，是整個程序設計不可或缺的一部分。第七個部分為結束語，對網站使用的技術進行總結，簡要說明了心得體會。

2相關技術2.1JavaScriptJavaScript是一門應用較廣泛的高級腳本語言，1995年，JavaScript問世，隨著web迅猛發(fā)展，廣大用戶對客戶端腳本語言的需求量也與日俱增，JavaScript逐漸成為市面上所有主瀏覽器的標配。JavaScript由ECMAScript、文檔對象模型(DOM)、瀏覽器對象模型(BOM)組成，在web應用開發(fā)中得到大量應用，可以改進網頁樣式，達到更加優(yōu)美、和諧的效果。JavaScript擁有讀寫HTML元素、響應對瀏覽器事件等功能。它是一門解釋型的腳本語言，JavaScript與C、C++等語言不同，并非編譯后執(zhí)行，而是在程序運行的過程中逐步進行解釋[10-14]。JavaScript是一門基于對象的腳本語言，不僅可以創(chuàng)建對象、也可以使用現(xiàn)有對象。與Java相比，JavaScript在語法、數(shù)據(jù)類型等設計上更加的簡單緊湊，JavaScript在使用的過程中未嚴格規(guī)范數(shù)據(jù)類型。在該校園新聞發(fā)布網站中，運用了ES6的寫法，如解構、箭頭函數(shù)等寫法。在得到后端處理的數(shù)據(jù)后，利用解構，將對象或者數(shù)組中的數(shù)據(jù)解析出來，并重新整合。這樣的好處在于不改變源數(shù)據(jù)，項目中可能要多次利用后臺返回的數(shù)據(jù)，很可能將源數(shù)據(jù)改變。2.2VUE介紹VUE是很好的一個前端開發(fā)的框，是主流前端框架之一。VUE具有很多的優(yōu)點，有很多封裝好的方法和工具可以直接使用，這在很大的程度上來說減少了開發(fā)時間。VUE具有簡潔靈活的特點，有助于提高Web開發(fā)速度[15]。開發(fā)者學會HTML、CSS、JavaScript等知識后，學習Vue.js將更加容易，便于與其他庫或者已有項目整合。開發(fā)者能夠基于Vue.js框架，開發(fā)程序，簡化編碼。在校園新聞發(fā)布網站中，運用了Vue-router和Vuex。分別用兩個文件夾管理這兩部分。先用npm安裝Vue-router和Vuex，在main.js中引用。Vue-router需要創(chuàng)建Routers對象，在這個對象中配置路由路徑和映射的組件。這樣還能根據(jù)不同的url地址展現(xiàn)出不同的內容和頁面。還可以用鉤子函數(shù)來判斷該用戶是否攜帶token，若沒有token則返回登錄頁面重新登錄。Vue-router的好處在于用戶體驗好，不需要每次向服務器請求就能快速展現(xiàn)給用戶。Vuex作為Vue.js中的一種狀態(tài)管理模式，能夠存儲管理所有組件的狀態(tài)，在校園新聞發(fā)布網站中，用戶信息和管理員信息需要在不同的組件中被多次使用，為了提高開發(fā)效率，將這些共享的數(shù)據(jù)使用Vuex實現(xiàn)轉態(tài)管理。state用來存放共享的數(shù)據(jù)，可以通過使用computed配合watch的方法，來監(jiān)聽state中的數(shù)據(jù)，會隨state中的數(shù)據(jù)而改變。使用Vue.js的好處：1.簡單靈活，可以有效提升開發(fā)速率。2、易學習，在學會HTML、CSS和JavaScript的基礎上，很容易上手。2.3Node.js介紹Node.js依托ChromeV8引擎，常用于構造應用程序。Npm(Nodepackagemanager）是Node.js的包管理器，解決了Node.js平臺上代碼部署的諸多問題，利用Npm命令可實現(xiàn)對第三方軟件包進行相應操作。依托Node,js技術開發(fā)應用程序，可以使前端和后端使用同一種編程語言。[16]。2.4前后端分離介紹常見的Web應用模式有以下兩種：一種是前后端不分離的模式，另外一種是前后端分離的模式。在進行充分的資料查閱后，本項目選擇了前后端分離的這種開發(fā)模式。在前后端分離的模式下，前端運行所需數(shù)據(jù)可由后端給出，后端返回的數(shù)據(jù)如何加載到前端中取決于前端，后端只需要遵從一定準則向外部提供數(shù)據(jù)，在前后端分離的模式下，后端處理后的數(shù)據(jù)，可以被前端訪問并對數(shù)據(jù)進行編輯。后端主要負責數(shù)據(jù)的處理，前端主要負責數(shù)據(jù)的展現(xiàn)[17]。該模式具有以下好處：前后端同步開發(fā)，互不干擾，各自獨立開發(fā)，提高編碼效率；方便開發(fā)調試，易于維護擴展。2.5Element-ui介紹Element-ui是一種前端UI框架，可有利于網站快速成型，鑒于其眾多優(yōu)點，通過Element-ui可以使前端頁面更加簡潔，提升用戶體驗。開發(fā)人員可以通過使用Element-ui中的組件達到理想的頁面效果。在該網站中，用到了大量的組件，如表格組件、分頁組件等。不僅開發(fā)速度快，而且頁面簡潔，且展現(xiàn)了核心部分。這些組件提供了大量的屬性和方法，直接調用即可達到滿意的效果。2.6Axios介紹通過利用HTTP庫中的Axios，將其運用于瀏覽器及Node環(huán)境，在項目開發(fā)中，前端通過攜帶相應的參數(shù)向服務器端發(fā)出請求，并獲取服務器端相應的HTTP請求響應庫及后端處理好的數(shù)據(jù)。Axios有很多優(yōu)點，如：能夠獨立使用，兼容PromiseAPI，克服了JavaScript“回調地獄”的難題，Axios可以通過請求和響應的攔截對后端返回的數(shù)據(jù)做處理，可以通過res來直接獲取后端返回的數(shù)據(jù)。2.7MVVM框架介紹MVVM模式是基于程序設計思想的一種軟件架構設計模式，在軟件開發(fā)過程中通過分層設計，可以降低程序代碼的耦合度，提高代碼的重用率，在后期便于維護及擴展。本文對MVVM模式原理進行分析，將MVVM模式與經典的MVC模式對比，并對利用Vue.js實現(xiàn)MVVM模式的流程進行分析研究[18]。

2.8數(shù)據(jù)庫介紹本網站利用了MySQL數(shù)據(jù)庫，是目前比較主流的技術之一，其簡單、輕巧的特點在中小型項目中受到廣泛應用。后臺數(shù)據(jù)庫的存在是非常有必要的，在開發(fā)系統(tǒng)時需要數(shù)據(jù)庫的支持，后端可以通過數(shù)據(jù)庫對數(shù)據(jù)進行一系列處理。經過查閱相關資料，最終選用MySQL數(shù)據(jù)庫。原因有下面幾點：1、性能比較MySQL的性能非常可靠、出色，MySQL可以在Windows系統(tǒng)中運行，且不會報錯和亂碼。MySQL在軟件性能方面很強大，它具有穩(wěn)定性的特點，這對于其他數(shù)據(jù)庫而言，優(yōu)勢是非常明顯的。但是，它也具有一些局限性，如內存損耗較大、操作復雜等劣勢。2、安全功能MySQL具有很高的安全性，這對于開發(fā)系統(tǒng)來說，安全方面是極其重要的。MySQL可以通過改變數(shù)據(jù)的日志文件，來提高安全性，即便服務器崩潰，日志也能完整記錄，不會受到任何的損壞或丟失。3、適用的場景區(qū)別MySQL適合小、中型網站，對于不是特別大流量的網站，效率高。SQLServer適用于企業(yè)級的商務網站。校園新聞發(fā)布網站主要是新聞的閱讀及其管理工作，需要大量的數(shù)據(jù)作為支撐。本系統(tǒng)使用MySQL為后臺數(shù)據(jù)庫提供支持。數(shù)據(jù)庫是本次設計的核心，數(shù)據(jù)庫設計的合理性與系統(tǒng)的實現(xiàn)息息相關。建立數(shù)據(jù)庫不僅能夠有效的存儲數(shù)據(jù)，還能對數(shù)據(jù)進行處理。數(shù)據(jù)庫的設計決定了能否滿足用戶的需求。2.9系統(tǒng)開發(fā)環(huán)境數(shù)據(jù)庫：MySQL項目名稱：校園新聞發(fā)布網站硬件環(huán)境：win10開發(fā)工具：VisualStudioCode、Navicat項目描述：方便學生了解校園動態(tài)前端：Vue、Element-ui、Axios等后端：Node.js、Express

3校園新聞發(fā)布網站需求分析3.1可行性分析根據(jù)網站相關標準，借助高效率的開發(fā)平臺和成熟的互聯(lián)網技術，可開發(fā)出符合要求的校園新聞發(fā)布網站，通過成熟高效的計算機技術，提高網站的可觀性和可操作性。下面將從技術可行性、經濟可行性、需求可行性三個方便進行闡述。3.1.1技術可行性最近幾年,經濟建設日益強大，互聯(lián)網技術有了質的飛躍,逐漸成為計算機行業(yè)的高新技術產業(yè)和應用熱點，Internet的高速成長得益于Web技術的迅猛發(fā)展。大學生不僅能從課堂和書本上學習知識，而且能從新聞中增長更加豐富的見識，及時、準確的新聞信息可作為大學生學習與交流的重要途徑。所以，為了做好宣傳工作，將富有正能量的新聞傳遞給周圍的人，不管是在專業(yè)知識儲備量，還是在思想覺悟上，都要有很高的提升能力，但是有了這些還不夠。在各專業(yè)技術急劇發(fā)展的互聯(lián)網時代，信息網絡技術得到廣泛應用，如果想要新聞在內容和形式上有所突破，并使高校新聞工作更加亮眼，有助于高校的新聞宣傳工作的優(yōu)化與創(chuàng)新，這將導致新聞工作者還需要擁有充足的知識儲備和成熟的專業(yè)技術。Nodejs的特色就是異步、非阻塞和事件驅動，并且采用高性能V8引擎運行，還有Node.js無需使用Apache、Nginx的web服務，提供了更加便利的開發(fā)。前端運用Vue.js能夠讓代碼寫起來相對比較工整，使用第三方庫還可以給用戶提供更好的交互體驗。3.1.2經濟可行性Node.js、Vue等技術本來就適合做快速開發(fā)，而數(shù)據(jù)庫使用MySQL則是完全免費的，這樣可極大節(jié)約開發(fā)成本，而這一套系統(tǒng)又可以根據(jù)不同學校的定制，來進行適當?shù)奶砑庸δ芎蚻ogo等信息。該網站可簡化老師發(fā)布的通知內容，學生可根據(jù)需要在網站檢索關鍵字，進而查看詳細內容，為老師和學生都提供了便利。3.1.3需求可行性本系統(tǒng)主要達到對新聞的發(fā)布與管理的目的，平時都是通過中午或者晚上的時間收聽廣播后來了解關于學校的一些信息，本校也是一所正在發(fā)展的高校，正所謂培養(yǎng)學生，不僅要德智體美，更要身心健康，在大學校園里，需要一種新的模式去讓大學生增長見識、了解校園最新動態(tài)。學生可以通過該網站了解學校的最新信息和校園動態(tài)，如招聘信息、宣講會、獎學金評選事宜等內容，也能夠在網站上發(fā)布失物招領的請求。同時管理員可以在后臺對新聞進行發(fā)布與管理，以及對失物招領申請進行審核等。該系統(tǒng)主要目的是簡化老師發(fā)布的通知內容，學生可根據(jù)需要在網站檢索關鍵字，進而查看詳細內容。通過對上面幾個方面進行分析和研究后，該項目的開發(fā)是可行的。3.2校園新聞發(fā)布網站平臺需求概述此網站是在B/S模式下進行開發(fā)的，該網站有下兩種用戶類型：1、對于學生，可以在網站的個人中心模塊中查看個人信息,如學號、所在學院、班級、姓名等信息。學生也可以編輯、修改用戶的個人信息，如聯(lián)系方式。學生還能查閱各類新聞及新聞的詳細信息，如標題、發(fā)布時間、發(fā)布者、新聞詳細內容等，同時也可以表達自己的想法，在下方進行評論。在消息中心模塊，學生可以及時的查看別人回復的信息，可對這些消息進行標注全部閱讀及刪除的功能。2、對于管理員，可以在網站后臺管理系統(tǒng)中的用戶管理模塊查看、刪除用戶和其他管理員的信息，修改用戶和當前管理員的密碼，但無法刪除當前管理員的信息，也無法修改其他管理員的密碼。審核模塊分為兩個部分：失物招領的審核和評論的審核，管理員如果發(fā)現(xiàn)評論內容不是積極向上的話，可以對其評論內容進行刪除。管理員還能夠發(fā)布、查看、刪除和添加新聞內容。3.3校園新聞發(fā)布網站需求模型根據(jù)軟件工程需求分析的原理，可確定校園新聞發(fā)布網站必須具備的功能模塊具有（管理員端）登錄、用戶管理模塊、審核中心模塊、新聞管理模塊；（學生端）注冊/登錄、新聞展示模塊、評論模塊、失物招領模塊。系統(tǒng)功能模塊圖如圖3-1所示。圖3-1系統(tǒng)功能模塊圖3.3.1模塊分類校園新聞發(fā)布網站對于學生端來說最主要的功能是學生能夠查看各類新聞，發(fā)表自己的感想并能回復其他賬戶的留言，對于管理員來說最主要的功能是可以對新聞實現(xiàn)增刪改查，管理用戶信息等操作，從上述圖中可以看出要實現(xiàn)以下功能：1、用戶功能用戶登錄成功進入首頁后，可以查看各類新聞及各個板塊的具體信息，同時也可以發(fā)表評論及回復評論。用戶可以查看自己的具體信息，并根據(jù)需修改部分信息，但有些信息不可更改。2、管理員功能管理員在登錄成功之后，可以編輯并管理用戶和各個管理員的信息，實現(xiàn)刪除和修改密碼等功能。對用戶發(fā)表的評論進行篩選，若檢測出發(fā)表的評論不是積極向上的情況可以將其評論刪除。對用戶申請的失物招領進行審核，還可以對新聞進行管理，實現(xiàn)對新聞的編輯及修改等功能。3.3.2功能詳情校園新聞發(fā)布網站主要由登錄、新聞展示區(qū)、留言區(qū)、失物招領模塊、用戶管理模塊、審核中心模塊、新聞管理模塊等組成，各模塊具體功能描述如下：1、登錄用戶是根據(jù)學號和密碼進行登錄，在登錄成功后產生token，則登錄成功，即可進入首頁完成其他操作。若用戶沒有登錄，則不能直接操作其他功能。2、新聞展示區(qū)新聞展示區(qū)位于校園新聞發(fā)布網站首頁，用戶進入首頁后可以查閱各類新聞，點擊新聞標題后可訪問并查看新聞的詳細信息，如標題、發(fā)布時間、具體信息等，該功能模塊可以分頁顯示新聞信息。前端通過把當前頁碼數(shù)和頁面顯示條數(shù)傳給后端，后端做相關的處理，前端獲取數(shù)據(jù)后結合分頁組件提供的方法，實現(xiàn)分頁查詢的功能。3、留言區(qū)新聞的詳細內容頁面底部設計了留言區(qū)，用戶查看新聞后可以在留言區(qū)發(fā)表留言并回復其他用戶的留言，還可以查看該新聞的全部留言。4、失物招領模塊在失物招領模塊中，用戶可以查看失物招領的內容，也可以填寫相關信息后添加失物招領的內容，如拾物名稱，拾物者姓名等，待管理員審核通過后可以顯示在失物招領模塊中。5、用戶管理模塊用戶管理模塊的作用是便于管理員管理用戶基礎信息和管理員信息，該模塊分為兩個子模塊，分別為普通用戶管理和管理員管理。在普通用戶管理模塊中，管理員可以查看用戶的學號，姓名、學院、班級等基礎信息；在管理員模塊中，管理員可以查看各個管理員的賬號和姓名等基礎信息，可以修改自己的密碼和刪除其他賬號。6、審核中心模塊審核中心模塊主要作用是審核失物招領申請和評論，該模塊分為兩個部分，分別為失物招領審核模塊和評論審核模塊。失物招領模塊中管理員可以查看拾物者姓名、拾物地點、拾物時間等基礎信息，可以審核通過或者不通過，也可以刪除某條拾物信息。評論審核中管理員可以查看留言信息及回復留言等信息，對于信息中有非積極向上的留言，管理員有權對某條留言進行刪除。7、新聞管理模塊在新聞管理模塊中，管理員能夠對新聞進行查看、編輯、修改等操作。管理員還能根據(jù)實際需求對新聞進行添加和刪除操作。

4總體設計4.1數(shù)據(jù)庫設計數(shù)據(jù)庫設計包括數(shù)據(jù)庫分析、數(shù)據(jù)庫概念設計、數(shù)據(jù)庫邏輯設計和數(shù)據(jù)庫物理設計。數(shù)據(jù)庫分析主要是為了分析用戶的實際需求和想法，想要達到什么樣的效果，這一部分非常重要，它是完成系統(tǒng)的核心部分，需求分析結果會對是否符合用戶的需要和后面的設計產生影響，并對設計結果的合理性與實用性產生影響。數(shù)據(jù)庫設計的第一個步驟是數(shù)據(jù)庫概念設計，結合對系統(tǒng)的分析和數(shù)據(jù)規(guī)范化的理論，使用E-R圖這種數(shù)據(jù)模型將用戶的數(shù)據(jù)需求明確地表示出來，方便后面各階段的設計。應用性能的好壞是由數(shù)據(jù)庫邏輯設計決定的。一個好的數(shù)據(jù)庫邏輯設計有助于將數(shù)據(jù)庫性能進行提升。優(yōu)秀的數(shù)據(jù)規(guī)范化可以減少數(shù)據(jù)冗余，加快執(zhí)行速度。數(shù)據(jù)庫屬性、數(shù)據(jù)類型等都屬于數(shù)據(jù)庫物理設計。4.1.1數(shù)據(jù)庫物理結構實現(xiàn)數(shù)據(jù)庫在IT應用上占據(jù)著重要地位，也是開發(fā)網站的核心部分。在該項目中，采用的技術是MySQL數(shù)據(jù)庫。該數(shù)據(jù)庫免費開源，成本低，且適用于中小型項目開發(fā)。數(shù)據(jù)庫邏輯設計的結果極為重要，將成為數(shù)據(jù)庫設計的依據(jù)，并根據(jù)給定的邏輯數(shù)據(jù)模型，得到可適合使用環(huán)境需求的最佳物理結構。數(shù)據(jù)庫邏輯設計的內容由以下4方面組成：1、定義數(shù)據(jù)庫、表及字段的命名標準；2、選擇合適的存儲引擎；3、為相應的字段定義數(shù)據(jù)類型；4、建立數(shù)據(jù)庫結構。E-R圖具體描述了數(shù)據(jù)關系模型：圖4-1E-R圖4.1.2User表結構設計用戶表有賬號、密碼、姓名、班級、學院、聯(lián)系電話等字段，其中user_id為主鍵，用戶根據(jù)賬號和密碼進入系統(tǒng)，登錄成功進入首頁后會將姓名顯示在頁面上，方便用戶核對是不是自己的賬號，具體如表4-1所示：表4-1User用戶表字符名稱數(shù)據(jù)類型字符長度是否為空注釋user_idvarchar50否用戶編號studentidvarchar15否學號passwordvarchar20否密碼studentnamevarchar50是學生姓名collegevarchar20否學院classvarchar30是班級phonevarchar15否聯(lián)系方式user_createtimebigint25否創(chuàng)建時間4.1.3admin管理員表結構管理員表有賬號、密碼、姓名和創(chuàng)建時間等字段，其中admin_id為主鍵，管理員根據(jù)賬號和密碼登錄系統(tǒng)，登錄成功進入首頁后會將姓名顯示在頁面上，方便管理員核對信息，確認自己的信息是否有誤[8]。具體如表4-2所示：表4-2Admin管理員表字符名稱數(shù)據(jù)類型字符長度是否為空注釋admin_idvarchar50否管理員編號adminvarchar15否管理員賬號passwordvarchar50否密碼adminnamevarchar20否管理員姓名admin_createtimebigint25是創(chuàng)建時間4.1.4new新聞表結構設計新聞表有新聞編號、標題、標簽、分類、內容、發(fā)布人、創(chuàng)建時間等字段，其中新聞編號為主鍵，用戶可以查看全部新聞內容，也可以按分類查看新聞內容，具體如表4-3所示：表4-3new新聞表字符名稱數(shù)據(jù)類型字符長度是否為空注釋new_idvarchar50否新聞編號new_titlevarchar255否新聞標題new_tagvarchar50否新聞標簽new_lablevarchar50否新聞分類new_contentlongtext0否新聞內容admin_namevarchar20是發(fā)布人createtimebigint25是創(chuàng)建時間4.1.5notice信息表結構設計信息表有信息編號、信息來源、信息去處、動作、評論編號、狀態(tài)、信息內容、回復者姓名等字段，其中信息編號是主鍵，評論編號是外鍵。該表的主要作用是用于消息中心模塊，登錄成功后可以查看別人回復的評論，具體如表4-4所示：表4-4notice信息表字符名稱數(shù)據(jù)類型字符長度是否為空注釋notice_idvarchar50否信息編號user_fromvarchar50否信息來源user_tovarchar50否信息去處actionvarchar10是動作content_idvarchar50否評論內容編號stateint2是狀態(tài)content_namelongtext0是信息內容nicknamevarchar20是回復者姓名createtimebigint25是創(chuàng)建時間4.1.6comment評論表結構設計評論表有編號、評論編號、用戶編號、評論內容、動作、評論創(chuàng)建時間等字段，其中編號是主鍵，評論編號是外鍵。該表的主要作用是用于發(fā)表評論模塊。具體如表4-5所示：表4-5comment評論表字符名稱數(shù)據(jù)類型字符長度是否為空注釋comment_idvarchar50否評論編號content_idvarchar50否評論內容編號user_idvarchar50是評論者編號comment_contentlongtext0是評論內容comment_createtimebigint25是創(chuàng)建時間4.1.7reply回復評論表結構設計回復評論表有回復評論編號、用戶編號、評論編號、回復評論內容、回復評論姓名、回復評論編號、回復評論創(chuàng)建時間等字段，其中回復評論編號是主鍵。該表的主要作用是用于回復其他用戶評論模塊。具體如表4-6所示：表4-6reply回復評論表字符名稱數(shù)據(jù)類型字符長度是否為空注釋reply_idvarchar50否回復編號user_idvarchar50否評論者編號comment_idvarchar50否評論編號reply_contentlongtext0是回復內容tousernicknamevarchar25是回復者姓名touseridvarchar50是回復者編號createtimebigint25是創(chuàng)建時間4.1.8lable新聞分類表結構設計新聞分類表有新聞分類編號、新聞分類名稱、新聞分類內容等字段，其中新聞分類編號是主鍵。該表的主要作用是用于用戶登錄成功后可根據(jù)新聞分類查看新聞內容，且管理員可以對新聞分類進行刪除和添加操作，具體如下表表4-7所示：表4-7lable新聞分類表字符名稱數(shù)據(jù)類型字符長度是否為空注釋lable_idvarchar50是新聞分類編號lable_namevarchar255是新聞分類名稱lablevarchar255是新聞分類內容4.1.9lost失物招領表結構設計失物招領表有編號、拾物者編號、物品名稱、狀態(tài)、拾物時間、拾物地點、創(chuàng)建時間等字段，其中編號是主鍵。該表的主要作用是用于失物招領模塊，用戶添加失物招領信息，管路員審核失物招領信息，具體如表4-8所示：表4-8lost失物招領表字符名稱數(shù)據(jù)類型字符長度是否為空注釋Lidvarchar50否編號Luser_idvarchar50是拾物者編號Lthingvarchar20是物品名稱isPassvarchar1否狀態(tài)LTimedatetime0否拾物時間Lplacevarchar50否拾物地點createtimebigint20否創(chuàng)建時間4.2用戶功能區(qū)4.2.1個人中心模塊在個人中心模塊中，用戶能夠查閱各自的基礎信息，并且還能編輯各自的基礎信息，若用戶更換了電話號碼，可在該模塊中及時修改自己的聯(lián)系方式，避免聯(lián)系不上。4.2.2消息中心模塊消息中心模塊主要是用于查看其他用戶回復的留言，可以單個已讀、刪除，也可以實現(xiàn)批量已讀、刪除功能，提高用戶操作效率，便于篩選未讀信息。4.2.3搜索模塊頁面中有大量的文字信息，為了方便用戶搜索需要的信息，用戶可以在搜索框中根據(jù)需要檢索任意的信息，檢索結果都可以展現(xiàn)在頁面上，該功能方便用戶查詢自己關注的新聞的搜索，一條新聞的找效率太低，這樣提高了用戶的體驗[9]。4.2.4查看新聞模塊用戶進入首頁后可以查閱各類新聞及新聞的詳細信息，如標題、發(fā)布時間、發(fā)布內容等。4.2.5評論模塊用戶查看新聞后可以發(fā)表留言和回復其他賬戶的留言，還可以查看該新聞的全部留言。4.2.6失物招領模塊用戶可以查看失物招領的內容，也可以填寫相關信息后添加失物招領的內容，如拾物名稱，拾物者姓名等，等管理員審核通過后可以顯示在失物招領模塊中。4.3管理員區(qū)4.3.1用戶管理功能該模塊由兩個子模塊組成，它們分別為普通用戶管理和管理員管理。用戶管理模塊管理員能夠查看用戶的學號、姓名、學院、班級等信息，管理員模塊管理員能夠查看各個管理員的賬號、姓名等基礎信息，還能修改自己的密碼和刪除其他賬號。4.3.2審核中心模塊該模塊由兩個子模塊組成，它們分別為失物招領審核和評論審核模塊。失物招領模塊中管理員可以查看拾物者姓名、拾物地點、拾物時間等基礎信息，可以審核通過或者不通過，也可以刪除某條拾物信息。評論審核中管理員可以查看留言信息及回復留言等信息，對于信息中有非法或消極內容，管理員可獲得權限刪除非法或消極留言。4.3.3新聞管理模塊在該模塊中，管理員對新聞進行分類查看和修改，管理員還能根據(jù)需要對新聞分類進添加和刪除操作。

5程序設計和代碼5.1概述后端運用了Node.js和Express框架，大大提高了編碼效率。在項目中，為了提高安全性，對密碼等敏感字段都進行了加密處理，為了提高用戶體驗,在登陸時密碼錯誤，或者在注冊時賬戶重復等等都做了相應的處理，在前端請求數(shù)據(jù)的時候會返回，并在前端將返回的數(shù)據(jù)，做出提示。這樣不僅能快速的讓開發(fā)人員在開發(fā)的過程中測試自己的代碼是正確，還能使用戶在使用的過程中能提高體驗感，知道自己是否操作成功了沒有。前端運用了Vue框架和Element-ui框架，提高了編碼效率。使用Axios技術實現(xiàn)前后端交互。網站中用到了大量的彈窗組件，將彈窗組件表單中的數(shù)據(jù)提交到后端系統(tǒng)進行處理，通過請求后臺處理好的數(shù)據(jù)，使用JS等方法刷新到前端頁面中從而實現(xiàn)數(shù)據(jù)的增加和修改。比如管理用戶信息模塊中，管理員想要實現(xiàn)修改用戶密碼的功能，應先點擊修改密碼按鈕，彈出彈框，管理員在表單中填寫新密碼，再點擊確定按鈕，將表單中的數(shù)據(jù)作為參數(shù)，通過接口傳給后端做處理。項目中使用Vue-router實現(xiàn)頁面的切換效果，使用路由懶加載實現(xiàn)性能優(yōu)化[19]。并將需要在組件之間共享的數(shù)據(jù)使用Vuex進行了狀態(tài)管理，這樣不僅提高了編碼效率還有利于后期的維護。另外還有Element-ui中分頁效果的插件、展示表格效果的插件等等。在項目中用了很多全局樣式的CSS文件，好處在于各個頁面都可以應用這些樣式，大大地提高了開發(fā)效率，這些全局的CSS文件只需要在main.js入口文件中引入即可。Images文件夾下放的是項目中需要的圖片。將圖片放在一個文件夾下，可以快速方便的找需要的圖片。5.2程序設計代碼實現(xiàn)5.2.1登錄模塊用戶訪問該網站時，首先會出現(xiàn)登錄界面，在該界面用戶輸入自己的賬號和密碼，若輸入的用戶名和密碼和數(shù)據(jù)庫中的不一致，系統(tǒng)會提示輸入賬號或密碼錯誤的信息，讓用戶重新輸入賬號和密碼。如果賬號和密碼沒有填寫，則會顯示填寫完整信息再登錄的提示信息。在項目中用到了Vuex中的前置鉤子，如果用戶要訪問的是非登錄頁面，先判斷有沒有token，如果沒有token，會讓用戶先登錄在再訪問。具體登錄主界面如圖5-1、圖5-2、圖5-3所示。圖5-1登錄流程圖圖5-2用戶登錄頁面圖5-3登錄頁面用戶在登錄平臺系統(tǒng)時，寫好相應的用戶名和密碼，若登錄成功，則跳轉到成功的界面，登錄錯誤時，會提示信息錯誤。5.2.2用戶查看新聞功能用戶登陸成功進入首頁，可以查看新聞標題和各新聞的詳細內容，如標題、發(fā)布人、新聞詳情等。查看新聞功能是用戶端最核心的內容之一。使用Element-ui中分頁組件完成分頁查找新聞的功能。使用Element和Bootstrap完成了靜態(tài)頁面效果。使用Axios技術攜帶參數(shù)發(fā)出請求，得到后端處理的數(shù)據(jù)，通過Vue和JS技術將數(shù)據(jù)渲染在頁面上。查看各新聞的詳細信息是通過將各新聞的id傳給后端，后端使用MySQL語句來查找該id的內容。具體如下圖5-4所示：圖5-4查看新聞部分前臺代碼：部分后臺代碼：5.2.3評論、回復功能用戶查看各新聞的詳細內容時，進行評論和回復評論的功能。這一部分能夠讓用戶互動起來，讓學校聆聽學生的心聲，也便于與學生更好的交流，提高學校的教學質量[20]。具體如下圖5-5所示：圖5-5評論及回復部分前臺代碼：部分后臺代碼：5.2.4用戶管理功能 用戶登陸成功進入首頁，首先會看見用戶頁面，用戶管理功能，由兩個子模塊組成，它們分別為普通用戶管理和管理員管理。用戶管理模塊管理員可以查看用戶的學號，姓名、學院、班級等基礎信息，管理員模塊管理員可以查看各個管理員的賬號、姓名等基礎信息，可以修改自己的密碼和刪除其他賬號。具體如下圖5-6所示：圖5-6管理員管理用戶管理功能是管理員端最主要的內容之一。使用Element-ui中分頁組件實現(xiàn)分頁查找用戶的功能，使用表格組件將用戶的基礎信息使用表格的形式展示在頁面上。由于用戶id是具有唯一性，通過將各用戶的id傳給后端，后端使用MySQL語句來查找、刪除該id的內容，得到這些數(shù)據(jù)后渲染在頁面上。新增用戶功能，是將對話框中的數(shù)據(jù)和該用戶的id傳給后端，后端使用MySQL語句處理數(shù)據(jù)，前端得到添加成功的返回后，重新查找用戶內容，既可實現(xiàn)添加用戶的功能。具體如下圖5-7所示：圖5-7用戶管理部分前臺代碼：部分后臺代碼：5.2.5審核中心功能審核中心功能，該模塊由兩個子模塊組成，它們分別為失物招領審核和評論審核模塊。失物招領模塊中管理員可以查看拾物者姓名、拾物地點、拾物時間等基礎信息，可以審核通過或者不通過，也可以刪除某條拾物信息。評論審核中管理員可以查看留言信息及回復留言等信息，對于信息中有非積極向上的留言，管理員有權對某條留言進行刪除。具體如下圖5-8所示：圖5-8評論審核失物招領審核和評論審核也是通過表格的形式展示在頁面上。失物招領是通過控制狀態(tài)字段來實現(xiàn)審核是否通過(0代表正在審核，1審核通過，-1審核不