基于Web前端的校園導航網站的設計與實現

袁明瑾 王風碩

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

關鍵詞：web前端;jQuery;導航網站;高校

中圖分類號：TP311? ? ?文獻標識碼：A

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

開放科學（資源服務）標識碼（OSID）：

1 引言

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

2 需求分析

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

3 關鍵技術選型

本次開發過程中，網站的開發和建設運用前后端分離的方法，關鍵技術的選型如下：

Bootstrap兼容絕大多數目前的瀏覽器，是基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍且目前最受歡迎的前端框架，內置的豐富的組件可供網站開發使用。

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

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

4 可行性分析

4.1 技術可行性

jQuery提供了便捷的JavaScript的設計模式，并且可以對CSS選擇器進行擴展。在前端開發中，可以簡化網頁事件的處理，優化HTML文檔操作和Ajax交互，開發者無需關注瀏覽器兼容性等問題而專注于處理業務邏輯，適用于本網站的便捷開發。

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

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

MySQL支持多種操作系統，同時體積小、速度快，適合本網站的數據處理的需求。

綜上，據現有技術條件，能夠達到此次網站的建設要求，技術上可行。

4.2 經濟可行性

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

同時網站的建設有利于提高學生的對于校園網絡生態的體驗感，提高學生的對于該校網絡的熟悉程度和使用效率，獲得間接性的網絡收益。

綜上，經濟上可行。

5 功能模塊設計

圖1為本網站主要功能模塊。

5.1 導航模塊

5.1.1 展示

導航網站的首頁網址展示，首頁主界面按類別展示常用網址，首頁的左邊設置懸浮導航欄，用戶根據需要點擊，主界面進行對應上下跳轉。首頁底部顯示動態歡迎信息同時展示校園基本信息、備案信息以及友情鏈接。

5.1.2 用戶自定義

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

刪除：當用戶點擊刪除按鈕時，可對增加的網址進行單個刪除或者全部刪除。

5.2 用戶模塊

5.2.1 用戶注冊

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

5.2.2 用戶登錄

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

5.2.3 注銷退出

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

5.2.4 信息修改

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

5.3 留言板模塊

5.3.1 展示

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

5.3.2 發布

用戶點擊文章編輯按鈕，顯示文章內容模態對話框，用戶輸入文本內容的標題及相應內容信息。用戶編輯完成之后，點擊模態對話框的發布按鈕鍵進行文本發布。后臺獲取相應內容，頁面加載更新文本數據。當出現服務異常，包括服務停止、網絡等問題，數據新增失敗，返回錯誤碼。

5.4 聊天室模塊

5.4.1 界面的展開收起

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

5.4.2 聊天角色選擇

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

5.4.3 消息發送

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

5.4.4 滑塊導航

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

6 結束語

目前市面上的導航網站較多，但在許多細分領域（如校園內部）還涉及較少。不同高校會有不同的網址導航需求，但對于網站功能需求則具有一定的共通性。因此，本網站立足于用戶在校園領域導航網站的個性化需求進行設計與開發，同時希望為從事高校網站的管理人員以及網址導航類網站未來的開發方向提供一定的思路。

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

參考文獻：

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

[2] 楊豐嘉，黃媛媛.基于 Vue.js 的在線商城網站設計與實現[J].工程技術研究，2020，2（8）.

[3] 鄭宏艷，丁健，米長虹，黃治平，鄭宏杰.農業環境類相關科研數據資源網址導航網站[J].科技經濟導刊，2019，27（11）：27-28.

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

【通聯編輯：梁書】