個(gè)人中心PERSONAL CENTER
一、前言由于瀏覽器同源策略，限制了頁(yè)面無(wú)法引用第三方資源，無(wú)法請(qǐng)求不同源下面的資源，影響了web的發(fā)展，所以瀏覽器出讓了一些安全策略來(lái)滿足web的發(fā)展。通過(guò)CSP安全策略來(lái)保證瀏覽器可以安全的加載第三方資源；通過(guò)CORS允許瀏覽器跨域請(qǐng)求；通過(guò)PostMessa...
一、什么是CSRF攻擊我們常常聽(tīng)到這樣一句話：默認(rèn)的鏈接不要點(diǎn)，那些年也聽(tīng)過(guò)，郵箱中的垃圾鏈接不要點(diǎn)。 因?yàn)榭赡苁呛诳桶l(fā)起的CSRF攻擊，所以在點(diǎn)擊之前最好是確認(rèn)鏈接的安全性。CSRF（Cross-site requests forgery）中文名：跨站腳本偽造簡(jiǎn)單的理解就是，黑...
一、前言我們常常見(jiàn)到很多比較棒的開(kāi)源項(xiàng)目，但在本地安裝運(yùn)行的話就會(huì)很復(fù)雜，要配置不同的環(huán)境，安裝不同的依賴，好一點(diǎn)的會(huì)用docker直接拉取，或者打包好。這些無(wú)疑都會(huì)增加初學(xué)者上手的成本，所以這篇文章總結(jié)了下目前比較常用的解決方法之一：使用docker...
一、前言今天開(kāi)發(fā)的時(shí)候，發(fā)現(xiàn)一個(gè)頁(yè)面的表單其實(shí)是兩個(gè)部分，其中一部分還在另一個(gè)頁(yè)面引用了。這就增加代碼量，所以優(yōu)化下，為了重復(fù)使用這里的表單。如圖，需求就是將下面兩個(gè)表單拆開(kāi)，可以重復(fù)使用，實(shí)際兩部分可能有很多表單，這里方便起見(jiàn)，只寫(xiě)了三個(gè)...
一、前言通過(guò)CRA腳手架構(gòu)建的項(xiàng)目，一般webpack配置是隱藏的，如果要修改，就要另外處理。想要修改webpack通常有兩種方式通過(guò)插件去增加或覆蓋webpack配置（方法一、方法二）或者釋放項(xiàng)目中的webpack配置，使之可見(jiàn)，然后可以修改（方法三）本來(lái)CRA腳手架將we...
一、前言昨天一個(gè)朋友問(wèn)：我的工作只有vue、react，了解其他的好像沒(méi)有太大作用。其實(shí)不然，前端要考慮的內(nèi)容其實(shí)很多，不光是完成業(yè)務(wù)代碼。我司的一個(gè)控制臺(tái)前端維護(hù)人數(shù)在20+，如果每個(gè)人都在一個(gè)項(xiàng)目中開(kāi)發(fā)，那么每天就等著構(gòu)建了，不僅容易出錯(cuò)，而且浪...
一、網(wǎng)站加載概述面試過(guò)程中，常常遇到這樣一道面試題，輸入U(xiǎn)RL到頁(yè)面加載完畢，瀏覽器做了哪些工作？首先輸入一個(gè)URL，你會(huì)看到瀏覽器上面的標(biāo)簽頁(yè)出現(xiàn)了一個(gè)loading圖標(biāo)，開(kāi)始時(shí)是逆時(shí)針旋轉(zhuǎn)，接著順時(shí)針旋轉(zhuǎn)，當(dāng)前頁(yè)面消失，顯示我們常說(shuō)的空白頁(yè)面，接著...
一、前言該過(guò)程中用到的技術(shù)棧git gitlab shell需要提前準(zhǔn)備的內(nèi)容一個(gè)項(xiàng)目myweb本機(jī)安裝Git一個(gè)Gitlab倉(cāng)庫(kù)docker私有倉(cāng)庫(kù)gitlab runner(Gitlab-runner)公司的代碼一般都保存在私有化部署的Gitlab，要使用Gitlab的CI/CD，需要Gitlab版本>8.0.0CI/CD雖然不難，...
一、什么是CI/CDCI 持續(xù)集成CD 持續(xù)交付CI/CD就是在開(kāi)發(fā)階段，通過(guò)自動(dòng)化發(fā)布，來(lái)頻繁部署應(yīng)用的一種方式二、為什么要配置CI/CD想象一下，一個(gè)項(xiàng)目的發(fā)布如果手動(dòng)部署，需要的操作有：?jiǎn)卧獪y(cè)試打包文件上傳服務(wù)器等等如果每個(gè)過(guò)程都需要手動(dòng)執(zhí)行，每次都要保...
前言前端部署服務(wù)器，需要經(jīng)過(guò)打包、遷移、部署、回退操作，如果每次都手動(dòng)處理，那么容易出錯(cuò)還浪費(fèi)時(shí)間，自動(dòng)化部署又比較復(fù)雜，那么選擇shell腳本做自動(dòng)化，也是一個(gè)不錯(cuò)的選擇，具體實(shí)現(xiàn)如下：項(xiàng)目環(huán)境執(zhí)行自動(dòng)化構(gòu)建的前端項(xiàng)目myweb項(xiàng)目通過(guò)命令構(gòu)建測(cè)試...
一、前言保持線上項(xiàng)目穩(wěn)定運(yùn)行是很重要的，為了達(dá)到服務(wù)可用性在99.9%，也為了減少開(kāi)發(fā)人員在項(xiàng)目部署時(shí)耗費(fèi)大量精力，可以嘗試自動(dòng)化發(fā)布自動(dòng)化部署涉及到的配置比較多，每個(gè)環(huán)節(jié)需要掌握的知識(shí)也不同，所以分開(kāi)寫(xiě)該過(guò)程中用到的技術(shù)棧webpack docker nginx ...
一、項(xiàng)目背景前端項(xiàng)目開(kāi)發(fā)一個(gè)模塊，上線前需要灰度一部分用戶，實(shí)現(xiàn)一個(gè)臨時(shí)的灰度方案?，F(xiàn)有項(xiàng)目狀況：一個(gè)前端項(xiàng)目1.0.0版本后端服務(wù)1.0.0版本后端灰度服務(wù)2.0.0版本一個(gè)域名解析到前端服務(wù)80、443端口前端通過(guò)nginx轉(zhuǎn)發(fā)靜態(tài)文件1、實(shí)現(xiàn)原理1、打包一份前...
背景：在開(kāi)發(fā)移動(dòng)端內(nèi)部應(yīng)用的時(shí)候，涉及安全問(wèn)題，我們經(jīng)常在企業(yè)微信或者圖片上看到水印，防止信息被泄露，針對(duì)這次開(kāi)發(fā)做個(gè)復(fù)盤(pán)，記錄下。效果圖如下： 一、實(shí)現(xiàn)原理1、首先用canvas繪制水印2、創(chuàng)建蒙層div，可以覆蓋在頁(yè)面上，并設(shè)置pointer-events:none...
背景：在開(kāi)發(fā)移動(dòng)端內(nèi)部應(yīng)用的時(shí)候，涉及安全問(wèn)題，我們經(jīng)常在企業(yè)微信或者圖片上看到水印，防止信息被泄露，針對(duì)這次開(kāi)發(fā)做個(gè)復(fù)盤(pán)，記錄下。效果圖如下： 一、實(shí)現(xiàn)原理1、首先用canvas繪制水印2、創(chuàng)建蒙層div，可以覆蓋在頁(yè)面上，并設(shè)置pointer-events:none...
現(xiàn)象：在前端開(kāi)發(fā)中，發(fā)現(xiàn)項(xiàng)目中很多路徑引入都是相對(duì)路徑，出現(xiàn)很多類似importapifrom"../../../api/test"import*asapifrom"../../../api"復(fù)制代碼這樣會(huì)導(dǎo)致文件引用的時(shí)候，需要計(jì)算層級(jí)，拖...
UCloud
暫無(wú)介紹
認(rèn)證
