當前位置:首頁 » 網頁前端 » 前端項目中遇到的難點
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端項目中遇到的難點

發布時間: 2023-06-01 06:22:21

① WEB前端與後端的難點想學不太懂呃。。

在我們實際的開發過程中,我們當前這樣定位前端、後端開發人員。
1)前端開發人員:精通JS,能熟練應用JQuery,懂CSS,能熟練運用這些知識,進行交互效果的開發。
2)後端開發人員:會寫Java代碼,會寫sql語句,能做簡單的資料庫設計,會Spring和iBatis,懂一些設計模式等。
現在來看,我們對前後端的要求還是蠻低的,尤其是後端,新員工經過培訓之後都是可以參與到後端開發的,沒有太高的技術門檻,唯一需要做的就是先變成熟練工種,這個階段沒有涉及到設計模式、架構、效率等一些列問題。
還是先google一下,看看網上對Web前端開發、Web後端開發分別是什麼?
Web前端: 顧名思義是來做Web的前端的。我們這里所說的前端泛指Web前端,也就是在Web應用中用戶可以看得見碰得著的東西。包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。
Web後端:後端更多的是與資料庫進行交互以處理相應的業務邏輯。需要考慮的是如何實現功能、數據的存取、平台的穩定性與性能等。
我們再來看看大公司對前後端人員招聘的要求,通過這個角度看看前端、後端的技術要求:
Web前端:
1)精通HTML,能夠書寫語義合理,結構清晰,易維護的HTML結構。
2)精通CSS,能夠還原視覺設計,並兼容業界承認的主流瀏覽器。
3)熟悉JavaScript,了解ECMAScript基礎內容,掌握1~2種js框架,如JQuery
4)對常見的瀏覽器兼容問題有清晰的理解,並有可靠的解決方案。
5)對性能有一定的要求,了解yahoo的性能優化建議,並可以在項目中有效實施。
6)......
Web後端:
1)精通jsp,servlet,java bean,JMS,EJB,Jdbc,Flex開發,或者對相關的工具、類庫以及框架非常熟悉,如Velocity,Spring,Hibernate,iBatis,OSGI等,對Web開發的模式有較深的理解
2)練使用oracle、sqlserver、mysql等常用的資料庫系統,對資料庫有較強的設計能力
3)熟悉maven項目配置管理工具,熟悉tomcat、jboss等應用伺服器,同時對在高並發處理情況下的負載調優有相關經驗者優先考慮
4)精通面向對象分析和設計技術,包括設計模式、UML建模等
5)熟悉網路編程,具有設計和開發對外API介面經驗和能力,同時具備跨平台的API規范設計以及API高效調用設計能力
6)......

② Vue 項目初步總結(在項目中遇到的問題以及解決辦法)

注意點:建議不要使用ESLint 後面選No 就ok  大神跳過此處,否則在項目中只要編碼格式有問題就會一直撥錯!

  1、推薦使用Visual Studio Code工具打開testproject文件夾即可進行開發。

(1)(打開終端快捷鍵 control+~)在終端裡面輸入npm install命令安裝依賴包, npm install 執行可以進行vue已經vue的插件安裝,在第三步的時 候,已經初始化了項目,並且在 package.json 裡面已經有相關配置,所以在這里可以直接安裝;

(2)終端執行命令npm run dev 運行,然後覽器輸入localhost://8080即可看到vue初始界面

補充:使用vue 框架時盡可能的不要使用jq,但是有些地方確實需要使用jq的話下面是在vue中引入jq的方卜飢法

1:首先安裝jquery

npm install jquery --save

2:在webpack.base.conf.js里加入

var webpack = require("webpack")

3:在mole.exports的最後加入

plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

new webpack.ProvidePlugin({

    jQuery: "jquery",

    $: "jquery"

})

]

4:在main.js中引入

import $ from 'jquery'

5.最後 npm run dev就可以了

首先給圖片地址綁定變數

在script中設置變數

//方法1.直接將圖片引入為模塊

require imgUrl from "../assets/test.png"

//方法2.將imgUrl放在數據里

    data(){

        return {

            imgUrl:require("../assets/test.png")

        }

}

    //方法3.在生命周期函數中設置

    data(){

        return {

imgUrl:""

        }

    }

    created(){

this.imgUrl = require("@/"+urlTemp)

}

傳送門:https://www.cnblogs.com/aimiss/p/7396986.html

傳送門:https://www.json.cn/

    基於 Promise 的 HTTP 請型謹返求客戶端,可同時在瀏覽器和 node.js 中使用

在瀏覽器中發送 XMLHttpRequests 請求

在 node.js 中發送 http 請求

支持 Promise API

攔截請求和響應

轉換請求和響應數據

自動轉換 JSON 數據

客戶端支持保護安全免受 XSRF 攻擊

使用 bower:

$ bowerinstallaxios

使用 npm:

$ npminstallaxios

例子

axios.post('/user',{

firstName:'Fred',

lastName:'Flintstone'

})

.then(function (response) {

console.log(response);

})

.catch(function (response) {

console.log(response);

});

傳送門:https://www.jianshu.com/p/e36956dc78b8;

一、污染是如何產生的?

得益於 Vue-loader,在 Vue 中可以使用類似於 Web Component 的組件化寫法,  ,在大多數情況下,我們希望組件間定義的樣式是相互隔晌猛離的,在 Weex 當中的確如此,組件天生隔離,可是在 Vue 當中,運行的載體還是瀏覽器,所有的樣式類還是會通過 style 標簽插入頭部,影響全局,交叉污染

二、增加 Scoped 標識

依然是 Vue-loader,通過為組件中的 style 標簽增加一個 scoped 標識,Vue-loader 在編譯的過程中會為組件每一個元素節點增加 scopeId 作為屬性,同時為所有的樣式類加上屬性選擇器 scopeId,從而達到隔離的效果。

傳送門:https://www.jb51.net/article/122535.htm

假如,我們在A組建中聲明了一個定時器進行倒計時此時 我們在定時器中一直列印時間戳,此時我們通過路由跳轉到下一個組件頁面,按照正常理論來說,A組件在跳轉後整個組件就會被銷毀,到達B組件時A組件已經沒有了。

但是在我們有定時器的情況下 此時跳轉過後 定時器依然會存在。所以我們要在頁面銷毀時候將當前頁面的定時器clear掉。

格式轉換

伺服器給的格式是 2016-6-16 10:50:00  正則替換成 2016/6/16 10:50:00 即可;

var time = '2016-6-16 10:50:00'

var times = time.replace(/-/g,"/"); //2016/6/16 10:50:00

完美解決。

原因:因為當我們切出到任務管理器後台時,此時在客戶端中的瀏覽器裡面,瀏覽器就會終止定時器因為消耗性能,當我們返回的時候此時倒計時才會恢復正常。

解決:h5有一個監聽瀏覽器頁面是否隱藏的事件 visibilitychange 兩種狀態 hidden和visity hidden時候頁面切出此時我們要將定時器銷毀,visity時候再次恢復定時器。

解決 this.$router.push(0)

原因:因為低版本安卓不支持es6 

(1)安裝依賴包 

> cnpm install --save-dev babel-polyfill 或者 > npm install --save-dev babel-polyfill

(2)webpack配置修改 

/* 添加 babel-polyfill */ 

entry: { 

app: ["babel-polyfill", "./src/main.js"] 

}, 

但是:我的項目上面的操作都進行了,也就是對es6進行了轉化但是失敗了。所以我就白有關es6的我寫的東西都改掉了。結果就好了。

傳送門:https://blog.csdn.net/qq_16559905/article/details/60755174

總結:初入前端,繼續踩坑。

③ 前端開發過程中遇到過什麼困難

前端開發過程中遇到的困難還是很多
1、面試中前端開發過程中遇到的困難這個問題主要是相看面試者是不是有獨立解決問題的能力及解決問題的方案以及工作中的的一些兩點
2、遇到這樣的問題可以說出一個自己解決的比較完美的問題,如:vue不適合做cms,因為單頁面應用對seo很不友好,解決的方法就是:我們使用nuxt技術,在保證使用vue語法開發的同時,也使用了服務端渲染技術保證了seo效果,這個過程突出了自己的學習nuxt等新技術的能力
3、另外也是有很多實際的開發問題不好解決,的但是那些自己解決不好的問題不適合 在面試的過程中說的

④ web前端開發面臨的挑戰主要是有哪些

平時工作,多數是開發Web項目,由於一般是開發內部使用的業務系統,所以對於安全性一般不是看的很重,基本上由於是內網系統,一般也很少會受到攻擊,但有時候一些系統平台,需要外網也要使用,這種情況下,各方面的安全性就要求比較高了。

1、測試的步驟及內容

這些安全性測試,據了解一般是先收集數據,然後進行相關的滲透測試工作,獲取到網站或者系統的一些敏感數據,從而可能達到控制或者破壞系統的目的。

2、SQL注入漏洞的出現和修復

SQL注入定義:

SQL注入攻擊是黑客對資料庫進行攻擊的常用手段之一。隨著B/S模式應用開發的發展,使用這種模式編寫應用程序的程序員也越來越多。但是由於程序員的水平及經驗也參差不齊,相當大一部分程序員在編寫代碼的時候,沒有對用戶輸入數據的合法性進行判斷,使應用程序存在安全隱患。用戶可以提交一段資料庫查詢代碼,根據程序返回的結果,獲得某些他想得知的數據,這就是所謂的SQL Injection,即SQL注入。

SQL注入有時候,在地址參數輸入,或者控制項輸入都有可能進行。如在鏈接後加入』號,頁面報錯,並暴露出網站的物理路徑在很多時候,很常見,當然如果關閉了Web.Config的CustomErrors的時候,可能就不會看到。

3、跨站腳本攻擊漏洞出現和修復

跨站腳本攻擊,又稱XSS代碼攻擊,也是一種常見的腳本注入攻擊。例如在界面上,很多輸入框是可以隨意輸入內容的,特別是一些文本編輯框裡面,可以輸入例如這樣的內容,如果在一些首頁出現很多這樣內容,而又不經過處理,那麼頁面就不斷的彈框,更有甚者,在裡面執行一個無限循環的腳本函數,直到頁面耗盡資源為止,類似這樣的攻擊都是很常見的,所以我們如果是在外網或者很有危險的網路上發布程序,一般都需要對這些問題進行修復。

⑤ web前端開發是什麼,所要面臨的挑戰有哪些

Web前端開發大致上是,創建出Web網頁以供用戶瀏覽使用等。主要通過HTML、CSS、JavaScript等技術來實現交互。

所面臨的挑戰主要有幾點:

一、

Web的載體的多樣性。

以瀏覽器為例,分別有IE,Chrome,火狐等。雖然有ECMA委員會進行標准化,但不同瀏覽器對HTML、CSS、JS等支持程度還是存在差異。所以需要進行兼容處理。

而且,這還會另測試的復雜度上升。

二、

Web前端開發的工程化問題。

在以前,Web前端開發是極度依賴於後端的,例如JSP、PHP等前後端代碼混雜,這段時期,前端的工程化問題還不嘩歷薯算凸顯。

而隨著MVVM的普及,前後端的分離,本身的前端項目需要有一定的組織,協作,需要有前端的一套工程化解決方案。

包括組件化開發亂者,單元測試,增量更新,代碼壓縮混淆,項目的打包構建發布等。

三、

Web框架之間的不兼容。

Web開發中,躲不開的是三大框架React、Angular、Vue。而框架與框架之間存在明顯的溝壑。

對於一個Web前端項目來說,其實使用哪種技術並不重要,重要的是能實現需求。但是在實際上,如果項目選定了某個框架,其他框架之間的某些組件或者解決方案並不能互通。

當然,現在的WebComponent有希望解決這個問題,但是,WebComponet的兼容性也存在明顯問題。

結語:

Web前端開發所面臨的問題遠爛鄭不止這些。當然,有問題就有解決方案,Web前端技術就是在攻克這些問題上不斷演進。

⑥ 前端開發的難點到底在什麼地方

一般意義上的前端項目:

-從0到1,治理曬哦為健全點的都能搗鼓出來;

-從1到60,後後端或者設計崗位勉強能兼任;

-從60到80,需要比較專業的前端;

-從80到100,這么好的前端可遇不可求。

從0到1就是從無到有的過程,很多人用WordPress,建站之星就差不多就能搞個demo了,可以拿去騙投資人的錢。

從1到60,就是勉強可用,基本上讓後端工程師或者UI設計師找一套bootstrap的模板東拼西湊的也能勉強應付到第一版本上線。

從60到80,就是真正要做一款能完備、性能優良、架構合理的中小規模產品,沒有專業的設計、前端、後端、產品、運營是走不到這步的,差不多到A輪了。

從80到100,那就是追求各方面的極致,與競爭對手一較高下,各個方面沒有頂尖的人才都會影響整體的戰鬥力,木桶效應。

解釋一下:

1. 核心競爭力的主體是工程經驗。
其實這個結論可以推廣到其他研發崗位,就是每個研發崗位的知識體系都是由基礎學科知識+領域工程經驗構成,彼此不可替代的就是工程經驗部分。一個後端工程師一時間不能替代同等級前端工程師到不是基礎或者智商的問題,主要是工程經驗不足,你讓一個前端一個後端分別實現對方領域中一個有明確輸入輸出的功能函數,二者通過簡單學習新語言新語法,加上開發手冊查詢,一般都能比較正常的實現業務邏輯,但你讓他們hold住對方領域的完整項目就很困難了,技術選型,系統設計,模塊拆分,平台特性,宿主環境,性能優化,構建部署,系統測試等等都是領域工程經驗問題。

2. 工程經驗的等級是能cover項目從0發展到80+。
這個很好解釋,因為從0-60的非專業前端也能做到,60+的才是專業前端。

所以不用擔心核心競爭力問題,60+的前端現在都很搶手啊。工程經驗只有60-的話確實壓力比較大。

⑦ 前端開發的難點到底在什麼地方

不同級別的前端面臨的難點各不相同,不可一概而論;

業務開發的前端難點在於對業務的理解和把控能力;

平台開發的前端難點在於產品化的把控和推進能力。

觀點1:不同級別的前端面臨的難點各不相同,不可一概而論。

其他回答有說 CSS 難,有說 CSS 不難的,每個人水平不同,這樣爭論毫無意義。我剛學前端時覺得 JS/CSS/瀏覽器兼容問題都很難,現在覺得也就那樣,因為前端路子廣,辦法總比問題多。後來覺得要評估好需求,把控好項目質量比較難,很多時候我們是在幹事,在解決問題,不是只埋頭寫代碼,時間一長你會發現前端工作中,技術問題往往比較好解決,反而資源協作問題比較麻煩。現在對我來說比較難的是快速產品化的能力,如何從無到有去做出一些有價值的東西。

舉一個簡單粗暴的例子吧:阿里前端很多,P5/P6 一大把,但是 P8/P9 的非常少,為什麼?進階的難點在哪梁搭里?

前端開發的難點跟前端進階的難點是非常相似的。阿里對每個前端層級都有一個標准,這也從側面回答了這個問題,比如對 P5 來說,難點可能是寫好業務代碼,保證其靈活性和可維護性,能解決各種適配問題;對 P6 來說則需要獨擋一面,能獨立 owner 需求,而 P7 則需要在某方面技術有深入理解,等等。

能提出這個問題首先得恭喜題主,說明題主在當前階段遇到瓶頸了,需要向下一個 level 出擊了。

觀點2:業務開發的前端難點在於對業務的理解和把控能力。

業務邏輯開發本身並不是難點,誰都可以寫。但是對於你自己負責的這塊業務,後續業務的發展方向和潛力,你有去了解過嗎?當業務方提需求過來時你是只負責執行還是和業務方一起探討更合理的方案?你有沒有給自己負責的產品提過一些建議?做過一些基正改善措施?如果前端只是作為一個執行者,作為一種被調度的資源,那麼即使最終項目取得了好的成績,跟你有多大關系?你自己會有多大的成就感?

另外一個很重要的點:就是對業務的把控能力。業務方總是會催著上線,開發時間不斷被壓縮該怎麼辦?進度不如預期怎麼辦?開發遇到瓶頸怎麼辦?發布新功能翻車了怎麼辦?

我見過有默默加班保證進度的,也有跟需求方重新談延期的,有發布出問題手足無措的,也有自己默默修復的,有遇到瓶頸一籌莫展的,也有及時跟老闆溝通,跟業務方撕逼的 如何優雅的處理這些問題,有時候比寫代碼更難。為什麼有的人業務代碼邏輯混亂,寫的一團糟?我不相信是智力問題,反倒更相信是對項目本身沒有把控好,本來排了5天工作量的需求被業務方壓到了3天,你還能保證寫出健壯而不失風度的代碼?

觀點3:平台開發的前端難點在於產品化的把控和推進能力。

做業務時有人給你提需求,幫你出交互視覺稿,你只要負責寫頁面橡鋒拿就行了。但是在支付寶前端,很多內部平台和技術產品都是技術自己主導,你需要自己發現問題,出方案,設計資料庫,自己出頁面,這是一個從無到有的創造的過程。並且要保證你做的東西是真正解決問題的,而不是做一些自己覺得很牛逼實際上並沒有解決用戶痛點的東西,用我老闆的話說就是對產品的把控能力,不要跑偏了。前端是最容易做出產品化東西的工程師了,因為後端不會做 UI,UI 不會寫代碼,唯前端兼顧,這是最大優勢。

再一個就是對產品的推進能力了,你做的東西可能需要各種資源?如何爭取?可能牽扯到多方利益?如何權衡?東西做出來了如何推廣?如何在用戶的一片罵聲中奮勇前進?

印象中很多平台型產品,剛開始投入使用時都是一片罵聲,各種問題,說實話負責這些產品的程序員壓力是相當大的,天天被罵還得徹夜幫別人解決問題,還得不斷優化系統,你說難不難?

以上三點就是本文所展現的理念,希望能對大家有幫助。

⑧ 你覺得web前端項目的難點有哪些

項目開發難點:
1. Web架構的獨特性
2. Web標准和相關技術的紛繁復雜和飛速發展
3. 瀏覽器兼容性
4. 交叉領域和多重目標
5. 組織架構和開發流程