Web前端下校園導(dǎo)航網(wǎng)站設(shè)計(jì)探析

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了Web前端下校園導(dǎo)航網(wǎng)站設(shè)計(jì)探析范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

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

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

1引言

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

2需求分析

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

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

本次開發(fā)過(guò)程中，網(wǎng)站的開發(fā)和建設(shè)運(yùn)用前后端分離的方法，關(guān)鍵技術(shù)的選型如下：jQuery是目前最流行的輕量級(jí)、兼容多瀏覽器的javascript函數(shù)庫(kù)，具有豐富的DOM選擇器，以及比原生javascript更高的代碼可讀性，極大簡(jiǎn)化了javascript的編程。對(duì)于Ajax有較好的支持，方便網(wǎng)頁(yè)進(jìn)行Ajax交互，能夠極大簡(jiǎn)化javascript的編程。Bootstrap兼容絕大多數(shù)目前的瀏覽器，是基于HTML、CSS、JavaScript開發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍且目前最受歡迎的前端框架，內(nèi)置的豐富的組件可供網(wǎng)站開發(fā)使用。Ajax即異步JavaScript和XML，是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)、快速創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。能夠通過(guò)js發(fā)起異步請(qǐng)求，局部更新網(wǎng)站頁(yè)面。在信息的傳輸優(yōu)化以及數(shù)據(jù)的交換方面扮演著重要的角色。MySQL是一個(gè)支持多種存儲(chǔ)引擎的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)。它將數(shù)據(jù)保存在不同的表當(dāng)中，增加了速度并提高了靈活性。同時(shí)它也是目前最為流行的開源數(shù)據(jù)庫(kù)之一。

4可行性分析

4.1技術(shù)可行性

jQuery提供了便捷的JavaScript的設(shè)計(jì)模式，并且可以對(duì)CSS選擇器進(jìn)行擴(kuò)展。在前端開發(fā)中，可以簡(jiǎn)化網(wǎng)頁(yè)事件的處理，優(yōu)化HTML文檔操作和Ajax交互，開發(fā)者無(wú)需關(guān)注瀏覽器兼容性等問(wèn)題而專注于處理業(yè)務(wù)邏輯，適用于本網(wǎng)站的便捷開發(fā)。Bootstrap在大量項(xiàng)目中已經(jīng)經(jīng)過(guò)測(cè)試，有著較為成熟的性能，同時(shí)它擁有完善的參考手冊(cè)，具有統(tǒng)一的編碼風(fēng)格，簡(jiǎn)單易寫，上手容易，適用于本類型網(wǎng)站的開發(fā)。Ajax是網(wǎng)站開發(fā)者容易上手的前后端交互技術(shù)，具有異步請(qǐng)求，局部刷新的特點(diǎn)，無(wú)需重新刷新頁(yè)面，不會(huì)妨礙到用戶瀏覽以及對(duì)于頁(yè)面的其他操作，適用于本網(wǎng)站前后端的交互需求的實(shí)現(xiàn)。MySQL支持多種操作系統(tǒng)，同時(shí)體積小、速度快，適合本網(wǎng)站的數(shù)據(jù)處理的需求。綜上，據(jù)現(xiàn)有技術(shù)條件，能夠達(dá)到此次網(wǎng)站的建設(shè)要求，技術(shù)上可行。

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

對(duì)于此次網(wǎng)站的開發(fā)，代碼編輯器使用的是VisualStudioCode，開發(fā)過(guò)程參照所需技術(shù)文檔進(jìn)行編寫，錯(cuò)誤檢查和功能測(cè)試通過(guò)多個(gè)瀏覽器開發(fā)者工具進(jìn)行，整體開發(fā)過(guò)程對(duì)硬件的配置要求不高，使用小型個(gè)人電腦即可。同時(shí)網(wǎng)站的建設(shè)有利于提高學(xué)生的對(duì)于校園網(wǎng)絡(luò)生態(tài)的體驗(yàn)感，提高學(xué)生的對(duì)于該校網(wǎng)絡(luò)的熟悉程度和使用效率，獲得間接性的網(wǎng)絡(luò)收益。綜上，經(jīng)濟(jì)上可行。

5功能模塊設(shè)計(jì)

5.1導(dǎo)航模塊

5.1.1展示導(dǎo)航網(wǎng)站的首頁(yè)網(wǎng)址展示，首頁(yè)主界面按類別展示常用網(wǎng)址，首頁(yè)的左邊設(shè)置懸浮導(dǎo)航欄，用戶根據(jù)需要點(diǎn)擊，主界面進(jìn)行對(duì)應(yīng)上下跳轉(zhuǎn)。首頁(yè)底部顯示動(dòng)態(tài)歡迎信息同時(shí)展示校園基本信息、備案信息以及友情鏈接。5.1.2用戶自定義添加：用戶點(diǎn)擊自定義導(dǎo)航按鈕，顯示自定義導(dǎo)航模態(tài)框，用戶輸入想要自定義的導(dǎo)航名稱、完整的導(dǎo)航地址、輸入自定義描述，點(diǎn)擊取消則關(guān)閉模態(tài)框，點(diǎn)擊確定，向數(shù)據(jù)庫(kù)中增加一條網(wǎng)址信息。自定義欄則可以顯示用戶保存的網(wǎng)站信息，當(dāng)后臺(tái)服務(wù)出現(xiàn)異常，包括服務(wù)停止，網(wǎng)絡(luò)等問(wèn)題，則新增數(shù)據(jù)失敗，返回錯(cuò)誤碼。刪除：當(dāng)用戶點(diǎn)擊刪除按鈕時(shí)，可對(duì)增加的網(wǎng)址進(jìn)行單個(gè)刪除或者全部刪除。

5.2用戶模塊

5.2.1用戶注冊(cè)。用戶點(diǎn)擊注冊(cè)按鈕，顯示注冊(cè)模態(tài)框，用戶輸入規(guī)范的手機(jī)號(hào)、用戶名、密碼信息。當(dāng)用戶輸入異常即輸入已注冊(cè)的手機(jī)號(hào)、不規(guī)范的手機(jī)號(hào)、用戶名和密碼，注冊(cè)時(shí)進(jìn)行對(duì)應(yīng)提示。當(dāng)用戶規(guī)范輸入，點(diǎn)擊注冊(cè)時(shí)，發(fā)送請(qǐng)求到服務(wù)端，服務(wù)端接收信息，數(shù)據(jù)庫(kù)存儲(chǔ)用戶信息，新增一條用戶信息，返回結(jié)果，注冊(cè)成功。當(dāng)后臺(tái)服務(wù)異常，受影響無(wú)法正常將用戶的注冊(cè)信息傳入數(shù)據(jù)庫(kù)中時(shí)，返回錯(cuò)誤碼。5.2.2用戶登錄。用戶登錄方便用戶保存自定義鏈接，注冊(cè)功能面向沒(méi)有網(wǎng)站賬號(hào)的用戶，已經(jīng)注冊(cè)過(guò)的用戶忽略此操作，直接進(jìn)行登錄。5.2.3注銷退出。用戶可以在登錄成功后的網(wǎng)站首頁(yè)右上角點(diǎn)擊注銷按鈕。用戶點(diǎn)擊按鈕即可注銷，同時(shí)頁(yè)面跳轉(zhuǎn)到用戶登錄頁(yè)面。受網(wǎng)絡(luò)影響或服務(wù)停止無(wú)法正常實(shí)現(xiàn)注銷，則返回錯(cuò)誤碼。5.2.4信息修改。當(dāng)用戶登錄成功后在網(wǎng)站首頁(yè)點(diǎn)擊用戶，跳轉(zhuǎn)到用戶管理界面，點(diǎn)擊信息修改按鈕，隨即顯示信息修改模態(tài)框，這時(shí)候可以修改新用戶名以及更新密碼，用戶輸入新用戶名以及新密碼，點(diǎn)擊修改，沒(méi)有出現(xiàn)異常則修改成功。用戶操作異常時(shí)，提示用戶做出修改。受網(wǎng)絡(luò)影響或服務(wù)停止無(wú)法正常實(shí)現(xiàn)修改信息時(shí)，修改失敗返回成功。

5.3留言板模塊

5.3.1展示。用戶在主頁(yè)面點(diǎn)擊頂部留言板導(dǎo)航鍵，進(jìn)入相應(yīng)模塊界面，此時(shí)頁(yè)面刷新，自動(dòng)加載獲取的文章數(shù)據(jù)，進(jìn)行渲染，顯示于頁(yè)面，頁(yè)面加載完畢用戶就可以進(jìn)行文章、留言的瀏覽。當(dāng)頁(yè)面加載未全部完成，數(shù)據(jù)加載失敗時(shí)，返回錯(cuò)誤碼。5.3.2發(fā)布。用戶點(diǎn)擊文章編輯按鈕，顯示文章內(nèi)容模態(tài)對(duì)話框，用戶輸入文本內(nèi)容的標(biāo)題及相應(yīng)內(nèi)容信息。用戶編輯完成之后，點(diǎn)擊模態(tài)對(duì)話框的發(fā)布按鈕鍵進(jìn)行文本發(fā)布。后臺(tái)獲取相應(yīng)內(nèi)容，頁(yè)面加載更新文本數(shù)據(jù)。當(dāng)出現(xiàn)服務(wù)異常，包括服務(wù)停止、網(wǎng)絡(luò)等問(wèn)題，數(shù)據(jù)新增失敗，返回錯(cuò)誤碼。

5.4聊天室模塊

5.4.1界面的展開收起。網(wǎng)頁(yè)加載時(shí)，聊天室處于收起狀態(tài)固定在網(wǎng)頁(yè)右下角。當(dāng)用戶點(diǎn)擊右下角收起狀態(tài)界面，展開聊天室界面，界面半透明且固定在右下角，不影響用戶繼續(xù)瀏覽主界面。用戶不用聊天室時(shí)候，點(diǎn)擊收起按鍵，展開頁(yè)面收起，顯示收起欄狀態(tài)。分別編寫兩個(gè)div:一個(gè)展開界面，另一個(gè)是收起界面。默認(rèn)展示收起界面的div，當(dāng)其中一個(gè)顯示，另外一個(gè)隱藏，二者同時(shí)只能顯示其一。當(dāng)點(diǎn)擊收起的div時(shí)，顯示展開界面的div，同時(shí)將收起的div進(jìn)行隱藏。點(diǎn)擊收起按鈕時(shí)，隱藏當(dāng)前的，顯示收起界面。5.4.2聊天角色選擇。聊天室界面展開時(shí)，聊天室右側(cè)展示角色欄，角色欄里有相應(yīng)的聊天室角色信息，角色欄首行通過(guò)角色字體、背景顏色以及角色加上“我”字突出顯示當(dāng)前用戶聊天使用角色。當(dāng)用戶想要更改聊天角色時(shí)，點(diǎn)擊重新選擇角色的按鍵，角色欄用戶重新進(jìn)行排序，更新首行用戶使用角色名，同時(shí)用戶已經(jīng)發(fā)送的信息面板往左進(jìn)行展示，此后發(fā)送信息的角色同時(shí)更改為當(dāng)前角色。5.4.3消息發(fā)送。用戶通過(guò)提示面板了解到直接到輸入框輸入信息。通過(guò)發(fā)送按鍵發(fā)送用戶輸入的信息到后端和展示面板。當(dāng)檢測(cè)到服務(wù)端發(fā)送的消息，通過(guò)dom發(fā)送到展示面板，展示接收的信息。同時(shí)用戶每發(fā)送一次信息，消息面板盒的焦點(diǎn)對(duì)準(zhǔn)到底部。當(dāng)用戶輸入為空時(shí)，彈出警示提示框。5.4.4滑塊導(dǎo)航。當(dāng)消息面板接受到的消息量少時(shí)，用戶不需要用到導(dǎo)航，導(dǎo)航鍵隱藏，當(dāng)用戶在消息面板內(nèi)需要向上滑動(dòng)消息瀏覽時(shí)，導(dǎo)航鍵隨著滑動(dòng)出現(xiàn)。點(diǎn)擊導(dǎo)航按鍵焦點(diǎn)到底部，并隱藏導(dǎo)航按鍵，代碼如圖2所示。

6結(jié)束語(yǔ)

目前市面上的導(dǎo)航網(wǎng)站較多，但在許多細(xì)分領(lǐng)域（如校園內(nèi)部）還涉及較少。不同高校會(huì)有不同的網(wǎng)址導(dǎo)航需求，但對(duì)于網(wǎng)站功能需求則具有一定的共通性。因此，本網(wǎng)站立足于用戶在校園領(lǐng)域?qū)Ш骄W(wǎng)站的個(gè)性化需求進(jìn)行設(shè)計(jì)與開發(fā)，同時(shí)希望為從事高校網(wǎng)站的管理人員以及網(wǎng)址導(dǎo)航類網(wǎng)站未來(lái)的開發(fā)方向提供一定的思路。本文進(jìn)行的基于web前端的校園導(dǎo)航網(wǎng)站，網(wǎng)站前端的基本雛形已經(jīng)實(shí)現(xiàn)，用戶在PC端可以查看瀏覽基本的網(wǎng)頁(yè)鏈接，注冊(cè)登錄后可以進(jìn)行導(dǎo)航網(wǎng)址自定義編輯，同時(shí)在聊天室發(fā)送信息，對(duì)話框進(jìn)行展示，留言板發(fā)表信息等。同時(shí)，在開發(fā)過(guò)程中也有看到，網(wǎng)站還有許多仍待完善和優(yōu)化的地方，例如頁(yè)面路由可以嘗試結(jié)合vue.js技術(shù)來(lái)更好地實(shí)現(xiàn)導(dǎo)航守衛(wèi)等等。

參考文獻(xiàn)：

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

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

[3]鄭宏艷,丁健,米長(zhǎng)虹,黃治平,鄭宏杰.農(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.

作者:袁明瑾 王風(fēng)碩 單位:成都錦城學(xué)院 計(jì)算機(jī)與軟件學(xué)院