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

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

中圖分類號：TP311.52? ? ? 文獻標識碼：A 文章編號：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? 引? 言

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

1? 研究現(xiàn)狀

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

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

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

（3）能獲取最新最權威的學校通知的板塊。例如放假信息、運動會信息、管道維護通知，無需在群聊中翻查聊天記錄。

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

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

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

（1）公共界面集成了三個板塊：校園新聞、交易市場、失物招領。它們對應著校園生活中最常用的幾個場景。

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

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

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

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

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

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

2.2.1? 易用性需求

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

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

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

2.2.3? 可拓展性

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

3? 系統(tǒng)總體設計

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

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

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

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

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

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

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

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

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

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

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

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

4.2.1? 失物板塊

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

4.2.2? 商品信息板塊

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

4.2.3? 校園新聞板塊

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

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

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

4.2.5? 個人資料管理

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

4.2.6? 商品管理

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

4.2.7? 失物管理

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

4.2.8? 管理員登錄

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

4.2.9? 平臺商品管理

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

4.2.10? 平臺失物管理

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

4.2.11? 平臺文章管理

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

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

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

5? 結(jié)? 論

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

參考文獻：

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

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

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

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

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

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