基于Node.js的教育技術(shù)學(xué)資源網(wǎng)站的設(shè)計(jì)與開(kāi)發(fā)

姚佳花 彭楚瑤

摘? ?要：文章根據(jù)教育技術(shù)學(xué)專業(yè)學(xué)習(xí)者及教學(xué)管理者的需求分析，設(shè)計(jì)并開(kāi)發(fā)了基于Node.js技術(shù)的教育技術(shù)學(xué)資源網(wǎng)站。該網(wǎng)站前臺(tái)邏輯和頁(yè)面效果主要采用HTML，CSS和JavaScript實(shí)現(xiàn)，選用Express框架和MongoDB數(shù)據(jù)庫(kù)為網(wǎng)站后臺(tái)開(kāi)發(fā)提供支撐?；诓煌巧挠脩?，網(wǎng)站分別提供對(duì)應(yīng)學(xué)習(xí)者角色的功能模塊以及對(duì)應(yīng)教學(xué)管理者角色的功能模塊。該網(wǎng)站響應(yīng)速度快、易于擴(kuò)展，并能高效處理高并發(fā)場(chǎng)景，可以為教育技術(shù)學(xué)專業(yè)學(xué)習(xí)者以及教學(xué)管理者提供相關(guān)服務(wù)。

關(guān)鍵詞：Node.js;教育技術(shù)學(xué);網(wǎng)站;開(kāi)發(fā);設(shè)計(jì)

1? ? 背景簡(jiǎn)介

隨著知識(shí)型社會(huì)的構(gòu)建和終生學(xué)習(xí)理念的提出，當(dāng)今時(shí)代對(duì)于能夠“利用新技術(shù)、新理念和新方法滿足不同用戶學(xué)習(xí)需求、解決各種教育問(wèn)題”的教育技術(shù)專業(yè)創(chuàng)新型人才的需求也逐年增加。何克抗等[1]學(xué)者指出，目前社會(huì)需要的教育技術(shù)學(xué)專業(yè)人才，應(yīng)掌握教育技術(shù)學(xué)理論、計(jì)算機(jī)知識(shí)，具備以教學(xué)設(shè)計(jì)為中心的能力、構(gòu)建維護(hù)物態(tài)教學(xué)的能力、軟件開(kāi)發(fā)能力、多媒體制作能力、信息采集及編輯處理能力以及綜合應(yīng)用能力。

教育技術(shù)學(xué)具有廣闊的發(fā)展前景，但目前互聯(lián)網(wǎng)上針對(duì)該專業(yè)的學(xué)習(xí)網(wǎng)站較少、相關(guān)資源雜亂無(wú)章，且已有的網(wǎng)站功能也并不完整。為此，本研究提出對(duì)教育技術(shù)學(xué)專業(yè)學(xué)習(xí)資源進(jìn)行規(guī)范化分類整理和共享，擴(kuò)展學(xué)習(xí)者的學(xué)習(xí)空間和學(xué)習(xí)方式，并設(shè)計(jì)出能夠滿足相關(guān)用戶學(xué)習(xí)需求的專業(yè)網(wǎng)站，幫助學(xué)習(xí)者與時(shí)俱進(jìn)地掌握相關(guān)教育技術(shù)、理念和方法，為專業(yè)人才培養(yǎng)提供新的實(shí)踐方向，緩解當(dāng)今社會(huì)對(duì)于教育技術(shù)學(xué)專業(yè)創(chuàng)新人才的需求壓力，促進(jìn)現(xiàn)代教育的信息化發(fā)展[2]。

2? ? 技術(shù)路線

2.1? Node.js

Node.js由Ryan Dahl開(kāi)發(fā)，發(fā)布于2009年5月，作為讓JavaScript運(yùn)行在服務(wù)端的開(kāi)發(fā)平臺(tái)，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。Node.js擁有異步非阻塞、環(huán)境搭建簡(jiǎn)單、實(shí)踐應(yīng)用快等特性，主要應(yīng)用在Http Web服務(wù)器的搭建和快速實(shí)現(xiàn)的獨(dú)立服務(wù)器。在實(shí)踐項(xiàng)目中，Node.js更適合應(yīng)用于一些小型系統(tǒng)服務(wù)器或者一些大項(xiàng)目的部分功能的實(shí)現(xiàn)[3]。

2.2? Express框架

Express集成了Web的HTTP服務(wù)器創(chuàng)建、請(qǐng)求和文件管理以及Session的處理等功能，作為Node.js Web應(yīng)用框架，它可以輔助創(chuàng)建各種Web應(yīng)用，具備豐富的Http工具，使用起來(lái)靈活簡(jiǎn)便[4]。

2.3? MongoDB

MongoDB自帶的JavaScript shell工具對(duì)MongoDB實(shí)例的管理和數(shù)據(jù)操作都較為便捷全面[5]。它支持的數(shù)據(jù)結(jié)構(gòu)非常松散，類似json的bson格式，可以存儲(chǔ)比較復(fù)雜的數(shù)據(jù)類型。其特點(diǎn)是高性能、易部署、易使用，存儲(chǔ)數(shù)據(jù)十分方便。此外，Mongo支持的查詢語(yǔ)言語(yǔ)法與面向?qū)ο蟮牟樵兿嗨?，查詢功能方便多樣，還支持對(duì)數(shù)據(jù)建立索引[6]。

3? ? 教育技術(shù)學(xué)資源網(wǎng)站設(shè)計(jì)

3.1? 網(wǎng)站架構(gòu)

基于Node.js的教育技術(shù)學(xué)資源網(wǎng)站的前臺(tái)的邏輯和頁(yè)面效果主要采用HTML+CSS+Javascript來(lái)實(shí)現(xiàn)，后臺(tái)采用Node.js框架實(shí)現(xiàn)，數(shù)據(jù)庫(kù)采用MongoDB來(lái)實(shí)現(xiàn)。通過(guò)Express創(chuàng)建的網(wǎng)站是一個(gè)典型的模型—視圖—控制器（Model View Controller，MVC）結(jié)構(gòu)，瀏覽器發(fā)出請(qǐng)求，由路由控制接收，根據(jù)不同的路徑定向到不同的控制器?？刂破魈幚碛脩舻木唧w請(qǐng)求，可能會(huì)訪問(wèn)數(shù)據(jù)庫(kù)中的對(duì)象、集模型部分。控制器還要訪問(wèn)模板引擎、生成視圖的HTML，最后再由控制器返回給瀏覽器，完成請(qǐng)求[7]。Express網(wǎng)站架構(gòu)如圖1所示。

3.2? 網(wǎng)站功能需求分析

研究所開(kāi)發(fā)的教育技術(shù)學(xué)資源網(wǎng)站是對(duì)教育技術(shù)學(xué)專業(yè)學(xué)習(xí)資源整合并分類，設(shè)計(jì)相應(yīng)的網(wǎng)站功能。面向?qū)W習(xí)者需求的功能有：專業(yè)介紹（專業(yè)簡(jiǎn)介、學(xué)習(xí)方向、就業(yè)指導(dǎo)）、學(xué)習(xí)筆記發(fā)布、交流討論等，根據(jù)預(yù)期的設(shè)定功能設(shè)計(jì)并開(kāi)發(fā)出較美觀且功能相對(duì)齊全、符合學(xué)習(xí)者需求的網(wǎng)站。一個(gè)完整的網(wǎng)站平臺(tái)少不了強(qiáng)大的后臺(tái)管理功能，面向教學(xué)管理者對(duì)網(wǎng)站需求的功能有：用戶管理、信息資源管理、網(wǎng)站資源分類管理、用戶評(píng)論管理等[8-9]。

3.2.1? 學(xué)習(xí)者對(duì)功能的需求

（1）了解專業(yè)基本情況：學(xué)習(xí)者注冊(cè)后，可登錄瀏覽專業(yè)介紹板塊，閱讀教育技術(shù)學(xué)專業(yè)簡(jiǎn)介，了解專業(yè)的學(xué)習(xí)方向和就業(yè)方向以及時(shí)了解專業(yè)最新形勢(shì)，方便用戶對(duì)此專業(yè)有更充分的了解。

（2）學(xué)習(xí)筆記：用戶可發(fā)布或查看學(xué)習(xí)筆記，及時(shí)對(duì)專業(yè)知識(shí)進(jìn)行鞏固學(xué)習(xí)。

（3）交流討論：在對(duì)網(wǎng)站上提供的資源的學(xué)習(xí)過(guò)程中，若用戶產(chǎn)生疑問(wèn)或遇到暫時(shí)無(wú)法解決的問(wèn)題，可在學(xué)習(xí)筆記下方評(píng)論，作者就可查看到評(píng)論。

3.2.2? 教學(xué)管理者對(duì)功能的需求

（1）用戶管理：教學(xué)管理者可對(duì)用戶進(jìn)行增、刪、查、改處理，并且可以設(shè)置用戶的權(quán)限，將其設(shè)為網(wǎng)站教學(xué)管理者，方便對(duì)網(wǎng)站的學(xué)習(xí)資源進(jìn)行管理，維持網(wǎng)站的秩序，更好地發(fā)揮網(wǎng)站的作用，為用戶提供服務(wù)。

（2）內(nèi)容管理：教學(xué)管理者可對(duì)用戶在網(wǎng)站發(fā)布的資源內(nèi)容進(jìn)行管理，對(duì)資源進(jìn)行基本的審核，查看用戶所發(fā)布的資源是否違反了網(wǎng)站的相關(guān)規(guī)定。若出現(xiàn)不健康或與網(wǎng)站服務(wù)功能無(wú)關(guān)的內(nèi)容可對(duì)其進(jìn)行編輯或刪除。

（3）評(píng)論管理：用戶的學(xué)習(xí)筆記中若出現(xiàn)不正當(dāng)?shù)难哉?，教學(xué)管理者可進(jìn)行刪除，對(duì)網(wǎng)站上的內(nèi)容進(jìn)行實(shí)時(shí)監(jiān)控，保證網(wǎng)站所出現(xiàn)的內(nèi)容都是積極健康的。

（4）菜單管理：軟件學(xué)習(xí)是教育技術(shù)學(xué)學(xué)習(xí)者在學(xué)習(xí)當(dāng)中的一個(gè)重要模塊，但現(xiàn)代信息發(fā)展速度飛快，網(wǎng)站所提供的內(nèi)容也需及時(shí)更新。教學(xué)管理者可對(duì)菜單進(jìn)行更新，更好地將網(wǎng)站內(nèi)容分類以完善網(wǎng)站的性能[10-11]。

3.3? 網(wǎng)站功能模塊設(shè)計(jì)

3.3.1? 注冊(cè)登錄模塊

注冊(cè)登錄模塊（見(jiàn)圖2）包括用戶登錄和用戶注冊(cè)兩個(gè)部分，當(dāng)用戶開(kāi)始登錄網(wǎng)站時(shí)，可以進(jìn)入登錄頁(yè)面進(jìn)行登錄。如果用戶沒(méi)有登錄，用戶只能以游客的身份瀏覽網(wǎng)站，可以瀏覽網(wǎng)站的信息和其他用戶發(fā)表的文章評(píng)論信息，但是不能發(fā)表評(píng)論和與其他用戶交流。當(dāng)用戶登錄后就有個(gè)人信息頁(yè)面，對(duì)自己的資料和發(fā)布的學(xué)習(xí)筆記有管理的權(quán)限，而其他人對(duì)其信息和文章只有訪問(wèn)權(quán)限[12]。

3.3.2? 學(xué)習(xí)筆記發(fā)布模塊

用戶完成登錄 ，就可以發(fā)布學(xué)習(xí)筆記以及對(duì)已有的學(xué)習(xí)資源進(jìn)行瀏覽，對(duì)自己資源的管理有查看、發(fā)布、修改和刪除的權(quán)限。用戶對(duì)于自身的每一篇學(xué)習(xí)筆記，可以發(fā)表和刪除評(píng)論，游客無(wú)此功能。

3.3.3? 后臺(tái)管理模塊

只有教學(xué)管理者才能進(jìn)入后臺(tái)管理，進(jìn)入后臺(tái)管理后，教學(xué)管理者可查看用戶的注冊(cè)信息。對(duì)學(xué)習(xí)資源進(jìn)行分類管理，對(duì)分類執(zhí)行增、刪、查、改操作。同時(shí)，也可在網(wǎng)站上發(fā)表文章、對(duì)已發(fā)表的文章進(jìn)行刪、查、改操作，對(duì)用戶的文章評(píng)論進(jìn)行查看、刪除操作，以便及時(shí)維持網(wǎng)站上的秩序和保證網(wǎng)站內(nèi)容積極健康，具體如圖3所示。

3.4? 數(shù)據(jù)庫(kù)設(shè)計(jì)

教育技術(shù)學(xué)資源網(wǎng)站數(shù)據(jù)表的結(jié)構(gòu)設(shè)計(jì)較簡(jiǎn)單，因?yàn)榫W(wǎng)站處于初期建設(shè)階段，儲(chǔ)存的數(shù)據(jù)較少，具體數(shù)據(jù)表僅包括用戶表、文章信息表以及學(xué)習(xí)資源分類信息表。

3.4.1? 用戶信息表

用于存儲(chǔ)用戶注冊(cè)登錄信息，具體結(jié)構(gòu)如表1所示。

3.4.2? 文章信息表

用于存儲(chǔ)發(fā)布的學(xué)習(xí)筆記等文章信息，以及用戶在文章底下的評(píng)論交流信息，具體結(jié)構(gòu)如表2所示。

用于存儲(chǔ)學(xué)習(xí)資源分類信息，具體結(jié)構(gòu)如表3所示。

4? ? 教育技術(shù)學(xué)資源網(wǎng)站功能的實(shí)現(xiàn)

4.1? 網(wǎng)站界面實(shí)現(xiàn)

網(wǎng)站主要為教育技術(shù)學(xué)專業(yè)學(xué)習(xí)者或需要掌握教育技術(shù)技能的學(xué)習(xí)者提供服務(wù)，因此，網(wǎng)站的界面較為簡(jiǎn)潔明了、顏色偏向冷靜沉著風(fēng)格、布局清晰有條理、網(wǎng)站功能分類明確易于查找。

4.1.1? 前臺(tái)界面

進(jìn)入網(wǎng)站的首頁(yè)后，網(wǎng)頁(yè)頭為導(dǎo)航部分，導(dǎo)航設(shè)計(jì)的菜單有：首頁(yè)、教育技術(shù)學(xué)、學(xué)習(xí)資源、學(xué)術(shù)交流、個(gè)人中心。部分菜單也包含了其子菜單，并且已經(jīng)把網(wǎng)站的主要功能歸類好。網(wǎng)頁(yè)中間左側(cè)則展示學(xué)習(xí)資源的全部?jī)?nèi)容，突出網(wǎng)站的主題，也能向用戶展示最新的學(xué)習(xí)資源等信息。右側(cè)包含了登錄注冊(cè)模塊和社區(qū)模塊，其中，登錄注冊(cè)模塊通過(guò)按鈕能夠自由切換登錄面板和注冊(cè)面板，社區(qū)模塊則向用戶提供關(guān)于教育技術(shù)的一些最新資訊，用戶可點(diǎn)擊訪問(wèn)鏈接了解詳情[13]。

首頁(yè)及內(nèi)容頁(yè)的色彩搭配為藍(lán)白色。導(dǎo)航的背景色采用帶有不透明度的白色，主要內(nèi)容的板塊都采用純白色帶圓角和陰影，主題文字為藍(lán)色或黑色，單一的色彩不會(huì)讓學(xué)習(xí)者產(chǎn)生視覺(jué)上的不適或?qū)徝榔?。網(wǎng)站的Logo設(shè)計(jì)為鼠標(biāo)點(diǎn)擊書(shū)籍，寓意為通過(guò)“線上+線下”的學(xué)習(xí)方式掌握教育技術(shù)能力，將教育技術(shù)應(yīng)用于教學(xué)和學(xué)習(xí)，努力實(shí)現(xiàn)現(xiàn)代信息化教育。首頁(yè)如圖4所示。

4.1.2? 后臺(tái)界面

后臺(tái)管理部分首先進(jìn)入的是歡迎教學(xué)管理者的界面，頂部的菜單設(shè)置的功能有：用戶管理、分類管理、內(nèi)容管理。3個(gè)管理界面的布局和色彩搭配采用一致的樣式，都較為簡(jiǎn)潔明了，便于教學(xué)管理者進(jìn)行后臺(tái)管理。配色采用白色背景黑色字體，列表各行采用不同顏色顯示，便于快速查找信息，后臺(tái)界面如圖5所示。

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

4.2.1? 學(xué)習(xí)者模塊

學(xué)習(xí)者模塊包括用戶登錄注冊(cè)、瀏覽學(xué)習(xí)資源和評(píng)論交流等3個(gè)主要功能。功能描述如下[14-15]。

（1）用戶登錄注冊(cè)。用戶進(jìn)入首頁(yè)界面可看到右側(cè)的“登錄”版面，若用戶尚未注冊(cè)則可點(diǎn)擊“馬上注冊(cè)”跳轉(zhuǎn)至“注冊(cè)”版面。若不登錄，則只能以游客的身份進(jìn)行瀏覽，游客無(wú)法在學(xué)習(xí)資源提供的學(xué)習(xí)筆記等文章下方進(jìn)行評(píng)論，右側(cè)版面也不會(huì)顯示用戶信息。

（2）瀏覽學(xué)習(xí)資源。用戶點(diǎn)擊導(dǎo)航中的菜單可查看當(dāng)前網(wǎng)站已上傳的學(xué)習(xí)資源，資源按照分類顯示以便于用戶快速查找?，F(xiàn)有的學(xué)習(xí)資源包括一些前端學(xué)習(xí)、后臺(tái)學(xué)習(xí)、多媒體技術(shù)、攝影攝像等學(xué)習(xí)筆記的文章，文章包含主題、摘要、主要內(nèi)容發(fā)布時(shí)間、作者、瀏覽數(shù)、評(píng)論數(shù)等信息。用戶可點(diǎn)擊“閱讀全文”對(duì)資料進(jìn)行深入了解和學(xué)習(xí)。

（3）評(píng)論交流。用戶點(diǎn)擊“閱讀全文”按鈕后，文章除了會(huì)展示完整內(nèi)容外，下方還設(shè)置了評(píng)論板塊，可供用戶隨時(shí)隨地發(fā)表自己的見(jiàn)解和提出疑難問(wèn)題，以便用戶進(jìn)行交流，相互促進(jìn)學(xué)習(xí)。

4.2.2? 教學(xué)管理者模塊

教學(xué)管理者模塊包括用戶管理、學(xué)習(xí)資源分類管理和內(nèi)容管理3個(gè)主要板塊。只有教學(xué)管理者才有權(quán)限進(jìn)入后臺(tái)管理界面，教學(xué)管理者登錄后，首頁(yè)將顯示教學(xué)管理者信息及提供教學(xué)管理者進(jìn)入管理界面的鏈接，教學(xué)管理者進(jìn)入后臺(tái)管理便會(huì)顯示歡迎教學(xué)管理者的界面。

教學(xué)管理者通過(guò)點(diǎn)擊菜單上的功能進(jìn)行管理操作，管理功能描述如下。

（1）用戶管理：點(diǎn)擊菜單欄中的“用戶管理”，可進(jìn)入用戶管理界面。用戶管理界面可以看到用戶的賬號(hào)信息和是否為教學(xué)管理者身份，但無(wú)法對(duì)信息進(jìn)行編輯。同時(shí)，列表具有分頁(yè)功能和統(tǒng)計(jì)數(shù)據(jù)條數(shù)功能，方便教學(xué)管理者查看和統(tǒng)計(jì)用戶數(shù)量。

（2）學(xué)習(xí)資源分類管理：由于教育技術(shù)學(xué)學(xué)習(xí)方向較多，內(nèi)容紛繁復(fù)雜，因此對(duì)學(xué)習(xí)資源進(jìn)行分類管理十分必要。教學(xué)管理者可對(duì)內(nèi)容分類進(jìn)行增、刪、查、改操作，以便對(duì)內(nèi)容進(jìn)行及時(shí)更新，能夠隨著信息快速發(fā)展的步伐對(duì)資源進(jìn)行整合，以滿足用戶需求。

（3）信息發(fā)布管理：該列表包含的內(nèi)容最多。教學(xué)管理者可在后臺(tái)發(fā)布學(xué)習(xí)資源，發(fā)布時(shí)可選擇相應(yīng)的資源分類，同時(shí)，能夠?qū)σ寻l(fā)布的文章進(jìn)行刪、查、改操作。