王悅 崔云 石妍

摘 ? 要：隨著Web的發(fā)展，在該領(lǐng)域存在的問題也逐漸顯露出現(xiàn)，為了從根本上解決Web前端應(yīng)用過程中存在的問題，需要對Web前端設(shè)計進(jìn)行系統(tǒng)化分析。近年來，Web前端在實際應(yīng)用過程中因結(jié)構(gòu)設(shè)計不完善出現(xiàn)了很多問題，嚴(yán)重影響Web工作的正常運(yùn)轉(zhuǎn)，針對Web前端問題而提出的研究與防范措施迫在眉睫。目前，基于Web前端結(jié)構(gòu)設(shè)計工作的特殊性，可以看出Web前端設(shè)計項目至關(guān)重要。文章主要介紹了Web前端的具體結(jié)構(gòu)設(shè)計以及Web前端在實際應(yīng)用過程中存在的問題，并提出了相應(yīng)的解決對策。

關(guān)鍵詞：Web前端;結(jié)構(gòu)設(shè)計;防護(hù)措施

當(dāng)今是大數(shù)據(jù)化時代，各種高科技的出現(xiàn)將在很大程度上推動整個社會的發(fā)展。伴隨著我國計算機(jī)網(wǎng)絡(luò)技術(shù)的不斷成熟化發(fā)展，Web前端技術(shù)逐漸出現(xiàn)在人們的眼中，眼下Web技術(shù)在國內(nèi)外網(wǎng)站中應(yīng)用廣泛，在很大程度上豐富了傳統(tǒng)網(wǎng)站的界面，給網(wǎng)民更好的上網(wǎng)體驗[1]。

Web前端技術(shù)的發(fā)展離不開JS應(yīng)用的普及、HTML技術(shù)的拓展以及Vue和bootstrap等技術(shù)的發(fā)展。為了使Web應(yīng)用得以更好地運(yùn)行，在設(shè)計Web前端時技術(shù)人員需要考慮各種問題，其中Web前端的安全防護(hù)問題是Web技術(shù)人員需要重點關(guān)注的問題之一。Web前端作為Web應(yīng)用的入口，往往是Web應(yīng)用設(shè)計領(lǐng)域中最為薄弱的一個環(huán)節(jié)，技術(shù)人員必須及時對該部分進(jìn)行網(wǎng)絡(luò)安全防護(hù)工作，避免Web前端成為不法黑客分子的攻擊對象，因此，針對Web前端問題提出的研究與防范措施迫在眉睫。由此可以看出Web前端設(shè)計工作的開展于Web應(yīng)用有著至關(guān)重要的作用。

技術(shù)人員需要做好對Web前端的網(wǎng)絡(luò)安全防護(hù)工作，在設(shè)計環(huán)節(jié)中盡可能考慮到前端存在的安全隱患問題，利用Web前端設(shè)計簡化Web工作，避免網(wǎng)絡(luò)事故的發(fā)生，保證Web應(yīng)用的正常運(yùn)行，給用戶提供更好的網(wǎng)絡(luò)體驗。

1 ? ?Web前端概述

Web前端是指網(wǎng)頁的前端部分，Web前端設(shè)計包括對網(wǎng)頁的架構(gòu)、色彩以及網(wǎng)站的頁面代碼進(jìn)行設(shè)計。在Web前端的開發(fā)過程中，工作人員需要熟悉JS的應(yīng)用，其中，Vue是一套相對先進(jìn)的用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，通過Vue工作人員可以很方便地實現(xiàn)數(shù)據(jù)操作。此外，為了保障網(wǎng)頁的美觀，Web前端的開發(fā)人員還需要具備一定的審美觀念以及熟練地應(yīng)用CSS，其中，bootstrap的應(yīng)用可以使Web頁面布局設(shè)計美觀，并且增加界面的響應(yīng)式設(shè)計。同時，在Web前端開發(fā)過程中，Web前端工程師還需要使用HTML結(jié)構(gòu)，使網(wǎng)頁的布局更加清晰、明了。在Web前端的開發(fā)過程中，工程師需要保障網(wǎng)站各項功能的正常運(yùn)行，因此，在Web前端中會包含大量JavaScript腳本，可以實現(xiàn)播放動畫、播放聲音以及圖片等功能[2]。

2 ? ?Web前端應(yīng)用中所存在的問題

就現(xiàn)在的技術(shù)而言，現(xiàn)代化的Web前端設(shè)計工具可以極大減少Web前端設(shè)計的工程量，但是卻無法解決在Web前端應(yīng)用中所存在的問題。在Web前端的應(yīng)用中，不但會遇到界面元素需求方面的問題，還會有無法選擇合適的界面控件問題。此外，還會遇到表單問題、模擬窗口的陰影以及按鈕的狀態(tài)等問題。文章將對上述問題進(jìn)行詳細(xì)論述。

2.1 ?界面設(shè)計問題

在Web前端應(yīng)用過程中會產(chǎn)生界面需求，需要在Web前端的開發(fā)與應(yīng)用過程中使用界面元素。界面元素的合理運(yùn)用不但有利于網(wǎng)站的美觀，而且與用戶的實用性息息相關(guān)。界面元素使用過多會導(dǎo)致用戶在使用網(wǎng)站的某一功能時，不得不耗費大量時間去了解如何使用網(wǎng)站中的眾多界面元素。然而，界面元素過少使用，雖然使得功能模塊更加簡潔，為用戶的使用提供了便利，但是失去了限制應(yīng)用程序的功能。例如，用戶在網(wǎng)站的首頁中尋找某功能時，若是界面元素使用過多，就無法及時地搜索到該功能。此外，過多的界面元素會造成用戶在使用過程中因Web前端出現(xiàn)界面卡頓而數(shù)據(jù)丟失，將嚴(yán)重影響到用戶的上網(wǎng)體驗。為此，設(shè)計人員在Web前端設(shè)計過程中不斷尋求相應(yīng)解決方案，適當(dāng)減少網(wǎng)頁界面的使用元素。若界面元素使用過少，也將會影響網(wǎng)站的正常運(yùn)行[3]。

2.2 ?界面控件選擇問題

界面元素的使用會影響用戶的上網(wǎng)體驗，同時，缺乏合適的界面控件也會對用戶的使用造成一定程度的困擾。界面控件是指在窗體上所放置的一系列可視化圖形元件，包括按鈕、文本框以及滾動條等，用戶通過點擊或滑動等交互性動作，使得后臺進(jìn)行事件響應(yīng)從而實現(xiàn)相關(guān)功能。

在網(wǎng)頁的設(shè)計過程中，選用合適的界面控件十分重要。若是缺乏合適的界面控件，在用戶使用網(wǎng)站的過程中將會造成用戶信息泄露、使用時浪費時間等較差的用戶體驗。例如，許多網(wǎng)站在用戶注冊時均會讓用戶填寫正確的出生日期。一些網(wǎng)站中的出生日期填寫使用文本框形式，通過對文本框內(nèi)容的獲取來記錄用戶的出生日期。一些網(wǎng)站使用下拉列表進(jìn)行選取。此外，還有些網(wǎng)站在進(jìn)行用戶出生日期的登記時使用緊湊的日歷選擇器，使得用戶耗費大量的時間去進(jìn)行年月日的選擇。不合適的控件將會給用戶帶來糟糕的線上使用體驗，因此，在選擇界面控件時應(yīng)更人性化，提高用戶體驗。

2.3 ?表單問題

在Web前端的應(yīng)用過程中還容易出現(xiàn)表單應(yīng)用問題。表單是網(wǎng)頁中常用的數(shù)據(jù)信息采集工具。表單大致分為3個部分：表單標(biāo)簽、表單域以及表單按鈕。表單標(biāo)簽主要包含數(shù)據(jù)提交的方法、表單的功能等;表單域包含文本框、密碼框以及單選框、復(fù)選框、下拉選擇框等，用于提交數(shù)據(jù)信息及文本文件等;表單按鈕一般有3種，分別是提交、注冊、取消，用于實現(xiàn)表單的提交、注冊及取消輸入功能等。

然而，在表單的應(yīng)用過程中時常會出現(xiàn)多次提交問題。例如，在對文本以及密碼等信息進(jìn)行提交時，若是多次點擊提交按鈕，那么系統(tǒng)將會多次向后臺數(shù)據(jù)庫傳輸信息，從而造成數(shù)據(jù)庫負(fù)載過大的現(xiàn)象，影響網(wǎng)站的正常使用。

2.4 ?模擬窗口的陰影

在正常的網(wǎng)絡(luò)窗口或菜單彈出時會出現(xiàn)陰影，強(qiáng)調(diào)菜單或窗口從背景中脫穎而出。然而，一些網(wǎng)站的窗口及菜單在進(jìn)行彈出時，并沒有陰影，不但會對網(wǎng)站的美觀程度造成一定的影響，還會影響用戶對新彈出窗口的識別。

3 ? ?Web前端應(yīng)用中問題的解決措施

目前，Web前端應(yīng)用設(shè)計還存在一定的問題，倘若不及時解決，這些問題將會導(dǎo)致Web在實際應(yīng)用過程中出現(xiàn)故障，進(jìn)而降低Web的實際使用性能，給以較差的用戶體驗，甚至將會影響到網(wǎng)絡(luò)用戶的隱私。為此，要想做好Web網(wǎng)絡(luò)安全的防范工作，就必須從根本上做到強(qiáng)化Web前端設(shè)計的功能，對Web前端應(yīng)用做出了如下要求：

首先，針對用戶的需求，在設(shè)計Web前端應(yīng)用界面時需要充分考慮Web界面元素的根本需求，在Web前端設(shè)計開發(fā)中要本著用戶簡單易懂的原則，盡可能地將Web界面的各項功能設(shè)計得更加容易操作，方便用戶使用。簡化界面是一種有效方式，這用界面隱藏或高級掩蓋功能。在設(shè)計Web主界面時，可以主要顯示一些用戶經(jīng)常操作的功能，其余操作次數(shù)較少的功能可以在高級搜索框中尋找。

其次，Web前端應(yīng)用的設(shè)計要根據(jù)實際情況選擇合適的界面控件，使得不同情況下用戶可以采用不同的方式處理問題。Web前端應(yīng)用中存在模擬窗口的陰影，源于設(shè)計者想要以此來提醒用戶將注意力放在出現(xiàn)的窗口上，使得系統(tǒng)在發(fā)出警告或者提醒時用戶能夠第一時間看到。在實際Web設(shè)計工作中，不僅要考慮網(wǎng)頁設(shè)計的合理性、美觀性，更要考慮Web整體的運(yùn)行環(huán)境，給用戶提供一個安全、穩(wěn)定的網(wǎng)絡(luò)環(huán)境。為此，Web設(shè)計人員也應(yīng)做好Web技術(shù)的安全維護(hù)工作，為Web網(wǎng)頁提供一個安全、穩(wěn)定的使用環(huán)境。

4 ? ?結(jié)語

綜上所述，Web前端是對數(shù)據(jù)和功能進(jìn)行應(yīng)用展現(xiàn)的一種技術(shù)，該環(huán)節(jié)對于Web應(yīng)用起到重要作用。技術(shù)人員在開發(fā)Web時，首先，需要做好Web前端的設(shè)計工作，避免在后續(xù)應(yīng)用過程中Web前端程序設(shè)計薄弱導(dǎo)致網(wǎng)頁使用出現(xiàn)問題，進(jìn)而出現(xiàn)應(yīng)用癱瘓現(xiàn)象。其次，近年來，我國在Web開發(fā)技術(shù)上存在的又一難題在于創(chuàng)新，一些相似的Web應(yīng)用設(shè)計界面在影響Web開發(fā)者的切身利益的同時，也影響了用戶的上網(wǎng)體驗。為此，豐富Web前端的設(shè)計，給用戶提供絢麗多彩的用戶界面將會成為Web應(yīng)用的熱點。

在如今智慧城市的構(gòu)建中，Web前端開發(fā)將會對城市管理綜合數(shù)據(jù)造成很大的影響，是實現(xiàn)數(shù)字城市向智慧城市轉(zhuǎn)變的關(guān)鍵技術(shù)。Web前端設(shè)計要想更好地得到應(yīng)用，就必須尋找適合自身發(fā)展的技術(shù)，在減輕工作量的同時，能夠給用戶更好的上網(wǎng)體驗，安全防護(hù)工作當(dāng)然也必須到位。

[參考文獻(xiàn)]

[1]葉文全.CSS自定義屬性在Web前端中的應(yīng)用研究[J].集寧師范學(xué)院學(xué)報，2019（6）：45-49.

[2]李曉薇.Web前端開發(fā)技術(shù)以及優(yōu)化方向[J].電子技術(shù)與軟件工程，2019（19）：48-49.

[3]高慧.Web前端開發(fā)技術(shù)和其對網(wǎng)站性能的影響[J].河南科技，2019（28）：47-49.

Abstract：With the development of Web， the problems in this field appear gradually. In order to solve the problems in the process of Web front-end application， it is necessary to systematically analyze the Web front-end design. Recently， the Web front-end has many problems due to the imperfect structure design in the process of practical application， which seriously affects the normal operation of Web work， and it is urgent to put forward the research and preventive measures against the Web front-end problems. On the basis of the particularity of Web front-end structure design， it can be seen that Web front-end design project is very important. This paper mainly introduces the concrete structure design of the Web front-end and problems existing in the practical application of the Web front-end， and put forward corresponding solutions.

Key words：Web front-end; structure design; protective measures