東航電商前端技術周刊第五期20180724
今天我們將分享如下內容,希望能對小夥伴們有些許幫助:
1、通過改變類名渲染不同背景圖的簡潔寫法;
2、項目中常會用到的點擊彈出模態框禁止頁面滑動;
3、axios post提交的Content-Type設置;
4、vue踩坑之路——axios post請求傳參失敗解決方案;
5、緩存相關知識整理;
6、關於微信清除緩存;
7、偶遇一個奇葩問題,避免大家踩坑;
不多說,直接上例子:
一、通過改變類名渲染不同背景圖的簡潔寫法:(不重復書寫background-size:100% auto)
起初為了節省代碼量只在此標簽加入background-size,類名只用background-image
發現圖片並未加載。但又不想重復書寫造成頁面冗雜,故找尋並進行多次嘗試運用於項 目中,代碼如下:
i { display: inline-block; @include size(48px, 48px); background: no-repeat center/100%; background-image: url("image/success.png"); margin-bottom: 23px; margin-top: 50px; &.wait { background-image: url("image/ico_wait.png"); } &.pay { background-image: url("image/icon_cancel.png"); } }
註:background-size只適用於移動端,pc增加會出問題。。。
............................. 感謝許亞男老師熱情分享 ..............................
二、項目中常會用到的點擊彈出模態框禁止頁面滑動:
嘗試方法如下:
1、開始以為需要js控制監聽頁面的滾動,
因此使用document.addEventListener(‘touchmove’,) 的方式,但是測試報錯,
2、因此又想到超出隱藏也可以阻止滑動:
只是更改了body的overflow屬性,並沒起作用......哎......
Last、最終實現版:
其實無需js腳本監聽,只需在點擊打開或關閉彈框時改變html和body元素的固定類型 以及結合overflow屬性的變化而改變。
/***禁止滑動***/
stop() {
document.documentElement.style.position = ‘fixed‘;
document.body.style.overflow = ‘hidden‘; //隱藏滾動條
},
/***取消滑動限制***/
move() {
document.documentElement.style.position = ‘static‘;
document.body.style.overflow = ‘‘; //出現滾動條
},
............................. 感謝許亞男老師熱情分享 ..............................
三、axios post提交的Content-Type設置
axios.post(url,data,
{headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘}}
).then(result => {
// do something
})
............................. 感謝於誌平老師熱情分享 ..............................
四、vue踩坑之路——axios post請求傳參失敗解決方案:
之前做項目中使用攔截器去判斷登陸,因此未發現,後做單頁面應用axios時,按照正常的使用方法傳參如下:(此處扒下文檔中基本寫法與之進行比較)
axios.post(‘/user‘, {
firstName: ‘Fred‘,
lastName: ‘Flintstone‘
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
報400,跟後臺聯調時發現後臺並沒有接收到所傳參數。查閱資料發現有兩種方法均可成功傳參:
1、引用vue自帶的方法Qsz還換成json找到如下方法:
import Qs from ‘qs‘
axios.post(url, Qs.stringify(‘所傳參數’))
.then(function (response) {
const data = response.data;
// if (data && data.Code == 200) {}
if (data && data.Code == 201) {
Info.appLogin();
}
}).catch(function (err) {
Info.layerBox(err, 1)
});
2、運用URLSearchParams方法直接追加參數...
var params = new URLSearchParams();
params.append(‘param1‘, ‘value1‘);
params.append(‘param2‘, ‘value2‘);
axios.post(‘/foo‘, params);
不過推薦使用第一種,第二種存在ie兼容問題
............................. 感謝許亞男老師熱情分享 ..............................
五、緩存相關知識整理
1.瀏覽器輸入 url 之後敲下回車,刷新 F5 與強制刷新(Ctrl + F5),又有什麽區別?
實際上瀏覽器輸入 url 之後敲下回車就是先看本地 cache-control、expires 的情況,刷新(F5)就是忽略先看本地 cache-control、expires 的情況,帶上條件 If-None-Match、If-Modified-Since,
強制刷新(Ctrl + F5)就是不帶條件的訪問。
2.etag,cache-control,last-modified
如果比較粗的說先後順序應該是這樣:
- Cache-Control —— 請求服務器之前
- Expires —— 請求服務器之前
- If-None-Match (Etag) —— 請求服務器
- If-Modified-Since (Last-Modified) —— 請求服務器
需要註意的是 如果同時有 etag 和 last-modified 存在,在發送請求的時候會一次性的發送給服務器,沒有優先級,服務器會比較這兩個信息.
如果expires和cache-control:max-age同時存在,expires會被cache-control 覆蓋。
其中Expires和cache-control屬於強緩存,last-modified和etag屬於協商緩存 強緩存
與協商緩存 區別:強緩存不發請求到服務器,協商緩存會發請求到服務器。
3.頁面緩存原理
頁面緩存狀態是由http header決定的,一個瀏覽器請求信息,一個是服務器響應信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。
............................. 感謝李楠老師熱情分享 ..............................
六、關於微信清除緩存
在前端寫頁面時,往往需要多次調試才能成功,但是在微信內嵌瀏覽器測試時,就會遇到微信的緩存導致js、css等文件不能及時更新而看不到最新的修改效果,這時候我們就需要清除微信的緩存。
實際上,微信比我們要考慮的多,給我們開發者提供了清除微信緩存的方法,打開debugx5.qq.com即可,這是QQ瀏覽器的X5內核提供的調試頁面。
在代理選項卡的最下面,就有清除緩存的選項和按鈕,勾選之後,點擊清除就可以了。
當然,X5調試頁面還有其他更加豐富的功能,小夥伴們可以去嘗試一下!
............................. 感謝劉登科老師熱情分享 ..............................
七、偶遇一個奇葩問題,避免大家踩坑
今天分享的是一個開發商戶後臺,用pug模版時遇到的一個bug。希望對小夥伴們繞開這個bug,pug在渲染數據時,如果數據是json數據,請先將json轉變為對象在進行渲染。
如果在pug再去轉成對象渲染會報莫名奇妙的錯誤。
如圖所示:
請先把TimeDetail字段轉成對象在渲染,或者在pug裏先判斷一下TimeDetail是否存在
(ps:本來就存在啊,判斷你妹啊莫名奇妙的bug)再轉成對象渲染。
希望對小夥伴們有所幫助
............................. 感謝唐雪峰老師熱情分享 ..............................
東航電商前端技術周刊第五期20180724