摘? 要：目前校園生活中學(xué)生獲取信息的來源較為分散且內(nèi)容重復(fù)率較高，從而使學(xué)生無法在第一時(shí)間快速準(zhǔn)確地獲取信息。本文對(duì)目前情況進(jìn)行分析后，采用前端和后端分離的架構(gòu)，用Javascript、Nginx、MySQL開發(fā)了一個(gè)校園綜合信息平臺(tái)，用于串聯(lián)校園中各個(gè)信息發(fā)送平臺(tái)，提升信息的傳遞效率，降低信息傳遞的出錯(cuò)率。

關(guān)鍵詞：校園信息平臺(tái);Javascript;React;Express;前后端分離;MVC架構(gòu)

中圖分類號(hào)：TP311.52? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2019）21-0010-03

Abstract：At present，the sources of information for middle school students in campus life are relatively scattered and the content repetition rate is high，so that students can not get information quickly and accurately in the first time. After analyzing the current situation，this paper develops a campus integrated information platform with JavaScript，Nginx and MySQL，which is used to connect all information sending platforms in the campus，improve the efficiency of information transmission and reduce the error rate of information transmission.

Keywords：campus information platform;Javascript;React;Express;front and rear separation;MVC architecture

0? 引? 言

學(xué)生的校園生活中，有很多渠道可以獲取或者發(fā)布信息。例如，新生可以通過百度貼吧或者加入學(xué)校的微信群來了解學(xué)校;各種社團(tuán)組織可以通過張貼海報(bào)或者通過微信公眾號(hào)來發(fā)布招新、活動(dòng)通知;如果想出售二手商品，可以加入學(xué)校各式各樣的二手交易群;撿到別人的失物，就在朋友圈里發(fā)布失物招領(lǐng)?？墒菍W(xué)校中院系眾多，不同的院系都有自己的公眾號(hào)和討論組，乍看之下信息的來源如此多樣，實(shí)際上卻是單獨(dú)而孤立的一個(gè)個(gè)信息孤島。這造成了學(xué)生獲取信息的碎片化，不同的學(xué)生由于其關(guān)注的公眾號(hào)、討論組不同，獲取到的信息也不平等。在這樣的現(xiàn)狀下，一個(gè)整合校園信息的平臺(tái)，能提高有用的信息在學(xué)生之間傳遞的效率，縮小學(xué)生之間的信息不對(duì)等。

1? 研究現(xiàn)狀

經(jīng)過調(diào)研和文獻(xiàn)查詢，同學(xué)們希望一個(gè)校園信息聚合平臺(tái)應(yīng)該包含有以下的功能：

（1）可以方便地出售/購買二手商品。對(duì)賣家而言，不會(huì)像在微信群中那樣剛發(fā)布的信息被后面的聊天記錄所覆蓋，可以持續(xù)穩(wěn)定地展示出售信息;對(duì)買家而言，他們可以依據(jù)分類，快速地查詢、挑選自己感興趣的商品。

（2）能夠發(fā)布失物招領(lǐng)信息。丟失物品或者撿到失物是每個(gè)大學(xué)生都會(huì)經(jīng)歷的事情。無論是在朋友圈轉(zhuǎn)發(fā)或者群里發(fā)布失物招領(lǐng)信息，尋回的成功率都不是很高，究其原因，就是缺乏一個(gè)統(tǒng)一的、面向所有人的平臺(tái)來獲取足夠的關(guān)注度。

（3）能獲取最新最權(quán)威的學(xué)校通知的板塊。例如放假信息、運(yùn)動(dòng)會(huì)信息、管道維護(hù)通知，無需在群聊中翻查聊天記錄。

2? 系統(tǒng)需求分析

2.1? 系統(tǒng)功能需求

通過這個(gè)系統(tǒng)，內(nèi)容管理者可以快速地搭建起一個(gè)功能齊全的校園平臺(tái)。它共分為三大部分：公共界面、用戶界面和管理員界面。

（1）公共界面集成了三個(gè)板塊：校園新聞、交易市場、失物招領(lǐng)。它們對(duì)應(yīng)著校園生活中最常用的幾個(gè)場景。

校園新聞可以獲取校園相關(guān)資訊信息，如放假信息、校園活動(dòng)等校園信息;可以讓學(xué)生分享自己的攝影作品、投稿文章、社團(tuán)的介紹、招新信息、店鋪的點(diǎn)評(píng)、新生指南，這類信息都可以發(fā)布在新聞板塊，打破院系與院系之間的隔閡，通過資訊板塊可以快速全面地獲取了解學(xué)校大小事物。

交易市場可以查看學(xué)生發(fā)布的二手商品。買家可以直觀地查看商品的圖片和描述，而賣家也不用擔(dān)心會(huì)像微信的二手交易群那樣，自己的商品信息會(huì)被后來的對(duì)話所覆蓋，只需發(fā)布商品，等待有意向的買家聯(lián)系即可。

失物招領(lǐng)是一個(gè)十分重要的功能，失物招領(lǐng)發(fā)布在這樣一個(gè)面向所有人的信息平臺(tái)，會(huì)有比朋友圈或者微信群更高的曝光度，失物尋回的成功率也會(huì)更高。在失物招領(lǐng)的板塊，用戶可以發(fā)布兩種類型的失物招領(lǐng)，一種是自己遺失物品，一種是拾取到別人的失物，方便檢索。

（2）用戶界面提供用戶注冊的功能，用戶登錄后，在自己的個(gè)人中心，可以管理自己發(fā)布的商品和失物招領(lǐng)。

（3）管理員界面是僅供管理員使用的，能夠管理平臺(tái)上所有的信息。其中，用戶創(chuàng)建的內(nèi)容管理員可以撤除、刪除，但是不能對(duì)內(nèi)容進(jìn)行修改，以保障用戶的權(quán)利。對(duì)于管理員創(chuàng)建的內(nèi)容，例如文章，則擁有所有的權(quán)限。管理員用戶同時(shí)也可以查看用戶的信息。

2.2? 系統(tǒng)非功能需求

2.2.1? 易用性需求

為了降低系統(tǒng)的使用難度，項(xiàng)目的前端后端都是用JavaScript編寫的，免去了使用者的多學(xué)一門語言的麻煩。得益于NodeJS的包管理器Npm和Facebook提供的項(xiàng)目腳手架，在配置好數(shù)據(jù)庫和填好配置文件后，只要一行指令就可以自動(dòng)安裝依賴并開始運(yùn)行，此時(shí)一個(gè)開箱即用、功能齊全的校園信息平臺(tái)就這樣建成了。此后內(nèi)容的發(fā)布和管理就像微博一樣簡單，通過瀏覽器訪問管理員界面就能管理所有的平臺(tái)信息。

2.2.2? 穩(wěn)定性需求和低成本需求

同時(shí)，出于穩(wěn)定性和建站預(yù)算的考慮，平臺(tái)運(yùn)行在CentOS，如果沒有自己的服務(wù)器而是租用虛擬服務(wù)器的話，運(yùn)行Linux系統(tǒng)會(huì)比Windows Server系統(tǒng)便宜很多。同時(shí)系統(tǒng)內(nèi)部集成了一個(gè)靜態(tài)資源服務(wù)器，省去了租用外部圖床的費(fèi)用。

2.2.3? 可拓展性

系統(tǒng)是嚴(yán)格的前后端分離，前端使用React的組件化開發(fā)，后端采用MVC的代碼組織方式，可以方便地進(jìn)行新功能的開發(fā)和測試。只要實(shí)現(xiàn)了原始的數(shù)據(jù)傳遞結(jié)構(gòu)，使用者甚至完全可以通過其他語言來替換后端或前端。

3? 系統(tǒng)總體設(shè)計(jì)

根據(jù)不同的功能權(quán)限，本文將項(xiàng)目的結(jié)構(gòu)劃分為了三個(gè)部分（如圖1所示）：公共界面、用戶界面、管理員界面。每個(gè)部分實(shí)際上都是由前端和后端構(gòu)成的，前端向后端發(fā)起請(qǐng)求，后端讀取數(shù)據(jù)庫并返回?cái)?shù)據(jù)。因此平臺(tái)的運(yùn)行需要同時(shí)啟動(dòng)一個(gè)靜態(tài)資源服務(wù)器和一個(gè)API服務(wù)器。Nginx就是一個(gè)很好的靜態(tài)資源服務(wù)器，它還可以將前端發(fā)來的請(qǐng)求代理給API服務(wù)器，不僅提高了響應(yīng)速度，還能隱藏API服務(wù)器的地址以提高安全性。

前端采取了React框架，可以以組件的方式來組織頁面，讓代碼的復(fù)用性和可讀性大大提升。通過React的生命周期，可以精確地控制數(shù)據(jù)的獲取和發(fā)送，以及對(duì)頁面進(jìn)行部分更新。當(dāng)然React只是一個(gè)前端框架，通過React-Redux才能實(shí)現(xiàn)全局的狀態(tài)管理，結(jié)合React-router實(shí)現(xiàn)平臺(tái)的權(quán)限系統(tǒng)。后端使用Node+Express框架，數(shù)據(jù)庫則使用MySQL。

后端的代碼按照MVC架構(gòu)組織，不過其中視圖（V）就是React前端，所以后端只包含Model和Controller，以及平臺(tái)初始化時(shí)創(chuàng)建相關(guān)數(shù)據(jù)表的init_database.sql文件。

后端使用的是Restful路由，和前端的路由是一一對(duì)應(yīng)的，這樣可以構(gòu)建出語義清晰的請(qǐng)求路徑，例如/user/getList，很容易就能看出在請(qǐng)求用戶列表。根據(jù)路由調(diào)用對(duì)應(yīng)的Contrller，Contrller處理請(qǐng)求，例如檢查請(qǐng)求合法性、檢查數(shù)據(jù)完整性，再交由對(duì)應(yīng)的Model來操作數(shù)據(jù)。MVC的好處在于，請(qǐng)求和實(shí)現(xiàn)是分離的，如果數(shù)據(jù)庫有變化，在不更改前端的前提下，僅僅依靠修改Model就能復(fù)用整個(gè)系統(tǒng)。

4? 系統(tǒng)實(shí)現(xiàn)

4.1? 系統(tǒng)實(shí)現(xiàn)開發(fā)工具

系統(tǒng)完全前后端分離，前端使用了React框架，后端使用Node-Express框架，數(shù)據(jù)庫采用MySQL，運(yùn)行在CentOS上，推薦使用Nginx作為http服務(wù)器。

系統(tǒng)前后端都是使用JavaScript開發(fā)的。雖然JavaScript在問世之初被視為一種玩具語言，但隨著Node和V8的誕生，JavaScript不僅可以在前端使用，還能在服務(wù)端運(yùn)行，一個(gè)巨大的生態(tài)環(huán)境迅速構(gòu)建起來了：通過Npm可以快速便捷地安裝好項(xiàng)目的依賴。并且有著各式各樣的框架可供使用。React是一款優(yōu)秀的前端框架，其最大的里面就是組件化，這是目前前端的趨勢，一個(gè)頁面由多個(gè)組件組成，而組件還可以在不同的頁面中復(fù)用。將頁面拆成組件之后，就可以對(duì)頁面進(jìn)行部分更新，不需要重載整個(gè)頁面，僅僅更新改變的組件即可。

Express可以快速搭建起一個(gè)API服務(wù)器，通過API服務(wù)器來查詢數(shù)據(jù)庫返回?cái)?shù)據(jù)，以此來實(shí)現(xiàn)前后端的分離。

Nginx是一個(gè)高性能的靜態(tài)服務(wù)器，同時(shí)它也能配置為反向代理服務(wù)器，如果想提升系統(tǒng)的響應(yīng)速度，可以開啟多個(gè)API服務(wù)器，并通過Nginx設(shè)置反向代理。

MySQL是一個(gè)開源的關(guān)系型數(shù)據(jù)庫，體積小但是速度和大型數(shù)據(jù)庫相比毫不遜色。阿里巴巴使用的數(shù)據(jù)庫便是MySQL，這證明即使是巨型的系統(tǒng)，MySQL也是有能力應(yīng)付的。

4.2? 模塊的實(shí)現(xiàn)

4.2.1? 失物板塊

以卡片的形式顯示所有用戶發(fā)布的失物招領(lǐng)信息，可以按“遺失物品”和“拾取物品”兩種進(jìn)行展示，卡片上重點(diǎn)顯示失物的圖片和名稱，保留并突出重要的信息，提高用戶的檢索效率。在寬屏設(shè)備上，每行顯示四張卡片，在手機(jī)上，則每行只有一張卡片。

4.2.2? 商品信息板塊

顯示所有用戶發(fā)布的商品信息，每個(gè)商品都以卡片的形式展示。在初始狀態(tài)下僅顯示商品的圖片、價(jià)格、名稱、分類。保留并突出一個(gè)商品最重要的信息：圖片、價(jià)格或名稱，這樣就能保持頁面的整潔，讓用戶快速地找到自己感興趣的商品，之后用戶可以點(diǎn)擊卡片上的圖片查看所有商品相關(guān)的圖片，點(diǎn)擊描述查看商品的詳細(xì)介紹，點(diǎn)擊聯(lián)系方式查看賣家的信息和聯(lián)系方式。

4.2.3? 校園新聞板塊

以列表的形式展示所有管理員的文章，頁面可以根據(jù)訪問設(shè)備的不同自動(dòng)適應(yīng)，顯示合適的排版，列表每頁只加載每篇文章的標(biāo)題信息，提高了頁面載入的速度。在列表中，只能顯示文章的配圖、標(biāo)題、作者、文章描述和發(fā)布日期。點(diǎn)擊標(biāo)題之后跳轉(zhuǎn)到文章閱讀頁面，在這里才能看到文章的正文。文章閱讀頁面為了閱讀而設(shè)計(jì)，內(nèi)容顯示在設(shè)備屏幕中間且只有屏幕60%的寬度，為用戶提供更舒適的閱讀體驗(yàn)。

4.2.4? 用戶狀態(tài)管理

未登錄的用戶點(diǎn)擊個(gè)人中心就會(huì)跳轉(zhuǎn)到登錄頁面，在登錄頁面可以選擇登錄或者注冊用戶。注冊賬號(hào)需用戶提供郵箱，在注冊的時(shí)候會(huì)向數(shù)據(jù)庫查詢用戶名是否重復(fù)，每個(gè)郵箱只能注冊一次，并且作為用戶的唯一識(shí)別標(biāo)志。只要登錄成功，就會(huì)跳轉(zhuǎn)到用戶個(gè)人中心，瀏覽器就會(huì)記住登錄狀態(tài)，下次再進(jìn)入個(gè)人中心就不需要再登錄了。這個(gè)功能是通過localStorage和Token實(shí)現(xiàn)的，需要特定權(quán)限才能訪問的頁面，其會(huì)解析檢查權(quán)限是否符合，否則會(huì)跳轉(zhuǎn)至登錄頁面。

4.2.5? 個(gè)人資料管理

用戶可以在這里設(shè)置、更改微信二維碼圖片、聯(lián)系方式、昵稱。如果沒有設(shè)置昵稱的話，用戶發(fā)布的商品卡片和失物招領(lǐng)卡片就會(huì)顯示為用戶名，反之則顯示為用戶昵稱。但是在聯(lián)系方式中，一定會(huì)顯示為用戶名。微信二維碼圖片是必須有的。系統(tǒng)將微信二維碼視為第一聯(lián)系方式，在商品卡片和失物招領(lǐng)卡片的聯(lián)系方式區(qū)域，微信二維碼是被重點(diǎn)突出顯示的。

4.2.6? 商品管理

用戶在這里發(fā)布商品或外快。發(fā)布商品需要上傳圖片、填寫商品的描述、設(shè)置商品的類型，商品的類型有電子產(chǎn)品、書籍和其他，比如瑜伽墊就屬于其他類型。另外還有一類商品稱之為“外快”，比如你有一個(gè)單反，你就可以在這里發(fā)布“外快”，提供拍照服務(wù)，這在畢業(yè)季是十分常見的一個(gè)需求。幫忙修圖、幫忙設(shè)計(jì)海報(bào)等所有提供服務(wù)的信息都可以歸為“外快”類型。點(diǎn)擊創(chuàng)建按鈕就會(huì)生成帶有用戶聯(lián)系方式的商品卡片。用戶可以將卡片發(fā)布、修改或者刪除。

4.2.7? 失物管理

創(chuàng)建和商品管理類似，但是失物信息在創(chuàng)建的同時(shí)就會(huì)發(fā)布，用戶只能刪除，并不能撤下自己的商品卡片或者修改自己的商品卡片。這樣有利于縮短失物招領(lǐng)卡片的生命周期;快速創(chuàng)建并發(fā)布，找到了失物或失主就立刻刪除。

4.2.8? 管理員登錄

和用戶登錄類似，但是出于安全性的考慮不提供管理員注冊的功能，管理員的賬號(hào)信息是通過平臺(tái)創(chuàng)建時(shí)的配置文件生成的。登錄之后就會(huì)跳轉(zhuǎn)到管理員界面，在這里可以查看管理平臺(tái)上所有內(nèi)容、商品、失物招領(lǐng)、文章以及用戶信息。以表格的方式呈現(xiàn)，方便管理員的檢索和刪除。

4.2.9? 平臺(tái)商品管理

用表格的方式顯示所有商品，可以批量進(jìn)行刪除、凍結(jié)、恢復(fù)的操作。同時(shí)表格中提供了按商品種類顯示的過濾器，用于顯示不同類型的商品的。管理員是不能也不應(yīng)該去修改用戶所發(fā)布的內(nèi)容的，管理員可以撤下商品，可以刪除商品，但是不能修改用戶寫下的內(nèi)容，維護(hù)平臺(tái)的公正性是十分重要的，這同時(shí)也是對(duì)用戶的尊重。

4.2.10? 平臺(tái)失物管理

用表格的方式顯示所有失物，可以批量進(jìn)行刪除、凍結(jié)、恢復(fù)的操作。表格會(huì)顯示失物的名稱、描述、發(fā)布時(shí)間、發(fā)布者和其聯(lián)系方式。值得一提的是用戶在個(gè)人中心刪除的失物招領(lǐng)信息，會(huì)顯示在管理界面失物招領(lǐng)中的歷史分區(qū)，作為存檔，數(shù)據(jù)還是保存在服務(wù)器上的，直到管理員執(zhí)行了刪除操作，數(shù)據(jù)才會(huì)真正地消失。

4.2.11? 平臺(tái)文章管理

管理員可以以表格的方式查看平臺(tái)上所有的文章，并以不同的狀態(tài)（審核中、已發(fā)布、已撤回）來展示文章，通過點(diǎn)擊就能對(duì)相應(yīng)的文章進(jìn)行編輯，也能對(duì)文章進(jìn)行批量的刪除、撤回、發(fā)布。

管理員也可以創(chuàng)建文章，需要上傳一張以上的圖片作為文章配圖，還需要添加標(biāo)題、文章簡述、作者名稱，以及最為重要的正文。點(diǎn)擊“創(chuàng)建文章”按鈕后，如果文章成功創(chuàng)建，就會(huì)跳轉(zhuǎn)到編輯頁面。

在編輯文章頁面，文章處于審核狀態(tài)，僅有管理員可以查看和修改。如果審核后可以發(fā)布，可以點(diǎn)擊發(fā)布按鈕，如果不進(jìn)行發(fā)布，也可以點(diǎn)擊刪除直接丟棄文章。

5? 結(jié)? 論

一個(gè)校園信息平臺(tái)，可以打破校園中的信息孤島，讓學(xué)生能更快速、更平等地獲取校園資訊。信息傳遞更有效率，就意味著各種校園活動(dòng)的舉辦會(huì)更加簡單，各種通知的傳達(dá)會(huì)更加到位，不需要關(guān)注一堆公眾號(hào)，不需要來回翻看微信的聊天信息，在這個(gè)平臺(tái)上可以方便地檢索有關(guān)校園的所有資訊，也不需要四處拜托他人轉(zhuǎn)發(fā)自己的失物招領(lǐng)信息，當(dāng)信息能完整而簡單地進(jìn)行快速傳遞，學(xué)生就擁有了一個(gè)更加便捷的校園生活環(huán)境。

參考文獻(xiàn)：

[1] 陳曉勇.MySQL DBA修煉之道 [M].北京：機(jī)械工業(yè)出版社，2017.

[2] 劉歡.HTML5基礎(chǔ)知識(shí)、核心技術(shù)與前沿案例，與前沿案例 [M].北京：人民郵電出版社，2016.

[3] 李俊山，葉霞，羅蓉，等.數(shù)據(jù)庫原理及應(yīng)用（SQL Server）（第3版） [M].北京：清華大學(xué)出版社，2017.

[4] React. Getting Started [EB/OL].[2019-08-26].https：//reactjs.org/docs/getting-started.html.

[5] 阮一峰.React技術(shù)棧系列教程 [EB/OL].（2016-09-23）.http：//www.ruanyifeng.com/blog/2016/09/react-technology- stack.html.

作者簡介：黃丹雄（1998-），男，漢族，廣東汕尾人，本科，學(xué)士學(xué)位，研究方向：軟件工程。