基于Web前端的校園導(dǎo)航網(wǎng)站的設(shè)計與實現(xiàn)

袁明瑾 王風(fēng)碩

摘要：該文描述的基于web前端開發(fā)的面向高校學(xué)生群體的校園導(dǎo)航網(wǎng)站。根據(jù)需求，整個網(wǎng)站的開發(fā)分為導(dǎo)航模塊、用戶模塊、聊天室模塊、留言板模塊四個部分。該文通過需求分析關(guān)鍵技術(shù)選型、可行性分析、模塊功能設(shè)計，大概介紹本網(wǎng)站的設(shè)計和開發(fā)流程。

關(guān)鍵詞：web前端;jQuery;導(dǎo)航網(wǎng)站;高校

中圖分類號：TP311? ? ?文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）36-0103-03

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

1 引言

隨著信息技術(shù)在大學(xué)教育和生活上的應(yīng)用，高校網(wǎng)站業(yè)務(wù)的拓展，許多大學(xué)生在校期間會都產(chǎn)生一批數(shù)量不少的特定網(wǎng)址的訪問需求，這些需求在同校同系內(nèi)部具有較大的相似性。而通過實時調(diào)研，將這一部分網(wǎng)頁訪問需求進(jìn)行人工收集、整理、加工和更新，開發(fā)出一個可信度和實用度高的校園導(dǎo)航網(wǎng)站則能一定程度滿足校園用戶的網(wǎng)頁查找和訪問需求，提高用戶對于校園網(wǎng)絡(luò)生態(tài)的使用效率。因此，本網(wǎng)站將校園內(nèi)所需要用到網(wǎng)絡(luò)鏈接盡可能地整合在一起，同時增加網(wǎng)站聊天室和留言板功能，滿足校園用戶對于網(wǎng)址導(dǎo)航網(wǎng)站個性化、多元化需求的同時，提高用戶的網(wǎng)站使用體驗。

2 需求分析

立足于調(diào)研結(jié)果，本網(wǎng)站的受眾群體主要是高校內(nèi)的學(xué)生群體，該群體對于產(chǎn)品體驗感要求較高。對于校園導(dǎo)航網(wǎng)站的設(shè)計，用戶會更傾向于實用性強(qiáng)、界面美觀、操作簡便、可讀性強(qiáng)的網(wǎng)頁風(fēng)格。對于主要的導(dǎo)航主頁面，用戶則具有自定義的需求。同時網(wǎng)站的目標(biāo)學(xué)生群體具有較高的認(rèn)知以及交流和反饋需求，針對其特征并結(jié)合項目本身的定位，為網(wǎng)站增加了博客、留言板和聊天室的功能，以便更好地增強(qiáng)用戶體驗。于是，將本次校園導(dǎo)航網(wǎng)站需求主要分為：導(dǎo)航鏈接的展示以及自定義編輯，用戶的注冊、登錄和退出，用戶信息的修改，網(wǎng)頁留言板，網(wǎng)頁聊天室等。

3 關(guān)鍵技術(shù)選型

本次開發(fā)過程中，網(wǎng)站的開發(fā)和建設(shè)運(yùn)用前后端分離的方法，關(guān)鍵技術(shù)的選型如下：

Bootstrap兼容絕大多數(shù)目前的瀏覽器，是基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強(qiáng)悍且目前最受歡迎的前端框架，內(nèi)置的豐富的組件可供網(wǎng)站開發(fā)使用。

Ajax即異步 JavaScript 和 XML，是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁、快速創(chuàng)建動態(tài)網(wǎng)頁的技術(shù)。能夠通過js發(fā)起異步請求，局部更新網(wǎng)站頁面。在信息的傳輸優(yōu)化以及數(shù)據(jù)的交換方面扮演著重要的角色。

MySQL是一個支持多種存儲引擎的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。它將數(shù)據(jù)保存在不同的表當(dāng)中，增加了速度并提高了靈活性。同時它也是目前最為流行的開源數(shù)據(jù)庫之一。

4 可行性分析

4.1 技術(shù)可行性

jQuery提供了便捷的JavaScript的設(shè)計模式，并且可以對CSS選擇器進(jìn)行擴(kuò)展。在前端開發(fā)中，可以簡化網(wǎng)頁事件的處理，優(yōu)化HTML文檔操作和Ajax交互，開發(fā)者無需關(guān)注瀏覽器兼容性等問題而專注于處理業(yè)務(wù)邏輯，適用于本網(wǎng)站的便捷開發(fā)。

Bootstrap在大量項目中已經(jīng)經(jīng)過測試，有著較為成熟的性能，同時它擁有完善的參考手冊，具有統(tǒng)一的編碼風(fēng)格，簡單易寫，上手容易，適用于本類型網(wǎng)站的開發(fā)。

Ajax是網(wǎng)站開發(fā)者容易上手的前后端交互技術(shù)，具有異步請求，局部刷新的特點，無需重新刷新頁面，不會妨礙到用戶瀏覽以及對于頁面的其他操作，適用于本網(wǎng)站前后端的交互需求的實現(xiàn)。

MySQL支持多種操作系統(tǒng)，同時體積小、速度快，適合本網(wǎng)站的數(shù)據(jù)處理的需求。

綜上，據(jù)現(xiàn)有技術(shù)條件，能夠達(dá)到此次網(wǎng)站的建設(shè)要求，技術(shù)上可行。

4.2 經(jīng)濟(jì)可行性

對于此次網(wǎng)站的開發(fā)，代碼編輯器使用的是Visual Studio Code，開發(fā)過程參照所需技術(shù)文檔進(jìn)行編寫，錯誤檢查和功能測試通過多個瀏覽器開發(fā)者工具進(jìn)行，整體開發(fā)過程對硬件的配置要求不高，使用小型個人電腦即可。

同時網(wǎng)站的建設(shè)有利于提高學(xué)生的對于校園網(wǎng)絡(luò)生態(tài)的體驗感，提高學(xué)生的對于該校網(wǎng)絡(luò)的熟悉程度和使用效率，獲得間接性的網(wǎng)絡(luò)收益。

綜上，經(jīng)濟(jì)上可行。

5 功能模塊設(shè)計

圖1為本網(wǎng)站主要功能模塊。

5.1 導(dǎo)航模塊

5.1.1 展示

導(dǎo)航網(wǎng)站的首頁網(wǎng)址展示，首頁主界面按類別展示常用網(wǎng)址，首頁的左邊設(shè)置懸浮導(dǎo)航欄，用戶根據(jù)需要點擊，主界面進(jìn)行對應(yīng)上下跳轉(zhuǎn)。首頁底部顯示動態(tài)歡迎信息同時展示校園基本信息、備案信息以及友情鏈接。

5.1.2 用戶自定義

添加：用戶點擊自定義導(dǎo)航按鈕，顯示自定義導(dǎo)航模態(tài)框，用戶輸入想要自定義的導(dǎo)航名稱、完整的導(dǎo)航地址、輸入自定義描述，點擊取消則關(guān)閉模態(tài)框，點擊確定，向數(shù)據(jù)庫中增加一條網(wǎng)址信息。自定義欄則可以顯示用戶保存的網(wǎng)站信息，當(dāng)后臺服務(wù)出現(xiàn)異常，包括服務(wù)停止，網(wǎng)絡(luò)等問題，則新增數(shù)據(jù)失敗，返回錯誤碼。

刪除：當(dāng)用戶點擊刪除按鈕時，可對增加的網(wǎng)址進(jìn)行單個刪除或者全部刪除。

5.2 用戶模塊

5.2.1 用戶注冊

用戶點擊注冊按鈕，顯示注冊模態(tài)框，用戶輸入規(guī)范的手機(jī)號、用戶名、密碼信息。當(dāng)用戶輸入異常即輸入已注冊的手機(jī)號、不規(guī)范的手機(jī)號、用戶名和密碼，注冊時進(jìn)行對應(yīng)提示。當(dāng)用戶規(guī)范輸入，點擊注冊時，發(fā)送請求到服務(wù)端，服務(wù)端接收信息，數(shù)據(jù)庫存儲用戶信息，新增一條用戶信息，返回結(jié)果，注冊成功。當(dāng)后臺服務(wù)異常，受影響無法正常將用戶的注冊信息傳入數(shù)據(jù)庫中時，返回錯誤碼。

5.2.2 用戶登錄

用戶登錄方便用戶保存自定義鏈接，注冊功能面向沒有網(wǎng)站賬號的用戶，已經(jīng)注冊過的用戶忽略此操作，直接進(jìn)行登錄。

5.2.3 注銷退出

用戶可以在登錄成功后的網(wǎng)站首頁右上角點擊注銷按鈕。用戶點擊按鈕即可注銷，同時頁面跳轉(zhuǎn)到用戶登錄頁面。受網(wǎng)絡(luò)影響或服務(wù)停止無法正常實現(xiàn)注銷，則返回錯誤碼。

5.2.4 信息修改

當(dāng)用戶登錄成功后在網(wǎng)站首頁點擊用戶，跳轉(zhuǎn)到用戶管理界面，點擊信息修改按鈕，隨即顯示信息修改模態(tài)框，這時候可以修改新用戶名以及更新密碼，用戶輸入新用戶名以及新密碼，點擊修改，沒有出現(xiàn)異常則修改成功。用戶操作異常時，提示用戶做出修改。受網(wǎng)絡(luò)影響或服務(wù)停止無法正常實現(xiàn)修改信息時，修改失敗返回成功。

5.3 留言板模塊

5.3.1 展示

用戶在主頁面點擊頂部留言板導(dǎo)航鍵，進(jìn)入相應(yīng)模塊界面，此時頁面刷新，自動加載獲取的文章數(shù)據(jù)，進(jìn)行渲染，顯示于頁面，頁面加載完畢用戶就可以進(jìn)行文章、留言的瀏覽。當(dāng)頁面加載未全部完成，數(shù)據(jù)加載失敗時，返回錯誤碼。

5.3.2 發(fā)布

用戶點擊文章編輯按鈕，顯示文章內(nèi)容模態(tài)對話框，用戶輸入文本內(nèi)容的標(biāo)題及相應(yīng)內(nèi)容信息。用戶編輯完成之后，點擊模態(tài)對話框的發(fā)布按鈕鍵進(jìn)行文本發(fā)布。后臺獲取相應(yīng)內(nèi)容，頁面加載更新文本數(shù)據(jù)。當(dāng)出現(xiàn)服務(wù)異常，包括服務(wù)停止、網(wǎng)絡(luò)等問題，數(shù)據(jù)新增失敗，返回錯誤碼。

5.4 聊天室模塊

5.4.1 界面的展開收起

網(wǎng)頁加載時，聊天室處于收起狀態(tài)固定在網(wǎng)頁右下角。當(dāng)用戶點擊右下角收起狀態(tài)界面，展開聊天室界面，界面半透明且固定在右下角，不影響用戶繼續(xù)瀏覽主界面。用戶不用聊天室時候，點擊收起按鍵，展開頁面收起，顯示收起欄狀態(tài)。分別編寫兩個div：一個展開界面，另一個是收起界面。默認(rèn)展示收起界面的div，當(dāng)其中一個顯示，另外一個隱藏，二者同時只能顯示其一。當(dāng)點擊收起的div時，顯示展開界面的div，同時將收起的div進(jìn)行隱藏。點擊收起按鈕時，隱藏當(dāng)前的，顯示收起界面。

5.4.2 聊天角色選擇

聊天室界面展開時，聊天室右側(cè)展示角色欄，角色欄里有相應(yīng)的聊天室角色信息，角色欄首行通過角色字體、背景顏色以及角色加上“我”字突出顯示當(dāng)前用戶聊天使用角色。當(dāng)用戶想要更改聊天角色時，點擊重新選擇角色的按鍵，角色欄用戶重新進(jìn)行排序，更新首行用戶使用角色名，同時用戶已經(jīng)發(fā)送的信息面板往左進(jìn)行展示，此后發(fā)送信息的角色同時更改為當(dāng)前角色。

5.4.3 消息發(fā)送

用戶通過提示面板了解到直接到輸入框輸入信息。通過發(fā)送按鍵發(fā)送用戶輸入的信息到后端和展示面板。當(dāng)檢測到服務(wù)端發(fā)送的消息，通過dom發(fā)送到展示面板，展示接收的信息。同時用戶每發(fā)送一次信息，消息面板盒的焦點對準(zhǔn)到底部。當(dāng)用戶輸入為空時，彈出警示提示框。

5.4.4 滑塊導(dǎo)航

當(dāng)消息面板接受到的消息量少時，用戶不需要用到導(dǎo)航，導(dǎo)航鍵隱藏，當(dāng)用戶在消息面板內(nèi)需要向上滑動消息瀏覽時，導(dǎo)航鍵隨著滑動出現(xiàn)。點擊導(dǎo)航按鍵焦點到底部，并隱藏導(dǎo)航按鍵，代碼如圖2所示。

6 結(jié)束語

目前市面上的導(dǎo)航網(wǎng)站較多，但在許多細(xì)分領(lǐng)域（如校園內(nèi)部）還涉及較少。不同高校會有不同的網(wǎng)址導(dǎo)航需求，但對于網(wǎng)站功能需求則具有一定的共通性。因此，本網(wǎng)站立足于用戶在校園領(lǐng)域?qū)Ш骄W(wǎng)站的個性化需求進(jìn)行設(shè)計與開發(fā)，同時希望為從事高校網(wǎng)站的管理人員以及網(wǎng)址導(dǎo)航類網(wǎng)站未來的開發(fā)方向提供一定的思路。

本文進(jìn)行的基于web前端的校園導(dǎo)航網(wǎng)站，網(wǎng)站前端的基本雛形已經(jīng)實現(xiàn)，用戶在PC端可以查看瀏覽基本的網(wǎng)頁鏈接，注冊登錄后可以進(jìn)行導(dǎo)航網(wǎng)址自定義編輯，同時在聊天室發(fā)送信息，對話框進(jìn)行展示，留言板發(fā)表信息等。同時，在開發(fā)過程中也有看到，網(wǎng)站還有許多仍待完善和優(yōu)化的地方，例如頁面路由可以嘗試結(jié)合vue.js技術(shù)來更好地實現(xiàn)導(dǎo)航守衛(wèi)等等。

參考文獻(xiàn)：

[1] 唐敏，孫九凌.校園網(wǎng)址導(dǎo)航分析研究[J].電腦知識與技術(shù)，2020，16（31）：73-75.

[2] 楊豐嘉，黃媛媛.基于 Vue.js 的在線商城網(wǎng)站設(shè)計與實現(xiàn)[J].工程技術(shù)研究，2020，2（8）.

[3] 鄭宏艷，丁健，米長虹，黃治平，鄭宏杰.農(nóng)業(yè)環(huán)境類相關(guān)科研數(shù)據(jù)資源網(wǎng)址導(dǎo)航網(wǎng)站[J].科技經(jīng)濟(jì)導(dǎo)刊，2019，27（11）：27-28.

[4] 劉志洋.ajax技術(shù)在web程序開發(fā)中的運(yùn)用探討[J].輕紡工業(yè)與技術(shù)，2020，49（2）：169-170.

【通聯(lián)編輯：梁書】