整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          前端面試題《Vue》

          前端面試題《Vue》

          .vue 優(yōu)點(diǎn)?

          輕量級(jí)框架:只關(guān)注視圖層,是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合,大小只有幾十 kb;

          簡(jiǎn)單易學(xué):國(guó)人開(kāi)發(fā),中文文檔,不存在語(yǔ)言障礙 ,易于理解和學(xué)習(xí);

          雙向數(shù)據(jù)綁定:保留了 angular 的特點(diǎn),在數(shù)據(jù)操作方面更為簡(jiǎn)單;

          組件化:保留了 react 的優(yōu)點(diǎn),實(shí)現(xiàn)了 html 的封裝和重用,在構(gòu)建單頁(yè)面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì);

          視圖,數(shù)據(jù),結(jié)構(gòu)分離:使數(shù)據(jù)的更改更為簡(jiǎn)單,不需要進(jìn)行邏輯代碼的修改,只需要操作數(shù)據(jù)就能完成相關(guān)操作;

          虛擬 DOM:dom 操作是非常耗費(fèi)性能的, 不再使用原生的 dom 操作節(jié)點(diǎn),極大解放 dom操作,但具體操作的還是 dom 不過(guò)是換了另一種方式;

          運(yùn)行速度更快: 相比較與 react 而言,同樣是操作虛擬 dom,就性能而言,vue 存在很大的優(yōu)勢(shì)。

          2.vue 父組件向子組件傳遞數(shù)據(jù)?

          通過(guò) props

          3.子組件像父組件傳遞事件?

          $emit 方法

          4.v-show 和 v-if 指令的共同點(diǎn)和不同點(diǎn)?

          共同點(diǎn):都能控制元素的顯示和隱藏;

          不同點(diǎn):實(shí)現(xiàn)本質(zhì)方法不同,v-show 本質(zhì)就是通過(guò)控制 css 中的 display 設(shè)置為 none,控制隱藏,只會(huì)編譯一次;v-if 是動(dòng)態(tài)的向 DOM 樹(shù)內(nèi)添加或者刪除 DOM 元素,若初始值為false,就不會(huì)編譯了。而且 v-if 不停的銷毀和創(chuàng)建比較消耗性能。

          總結(jié):如果要頻繁切換某節(jié)點(diǎn),使用 v-show(切換開(kāi)銷比較小,初始開(kāi)銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用 v-if(初始渲染開(kāi)銷較小,切換開(kāi)銷比較大)。

          5. 如何讓 CSS 只在當(dāng)前組件中起作用?

          在組件中的 style 前面加上 scoped

          6. 的作用是什么?

          keep-alive 是 Vue 內(nèi)置的一個(gè)組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。

          7.如何獲取 dom?

          ref="domName" 用法:this.$refs.domName

          8.說(shuō)出幾種 vue 當(dāng)中的指令和它的用法?

          答:v-model 雙向數(shù)據(jù)綁定;

          v-for 循環(huán);

          v-if v-show 顯示與隱藏;

          v-on 事件;v-once: 只綁定一次。

          9.vue-loader 是什么?使用它的用途有哪些?

          答:vue 文件的一個(gè)加載器,將 template/js/style 轉(zhuǎn)換成 js 模塊。

          用途:js 可以寫 es6、style 樣式可以 scss 或 less、template 可以加 jade 等

          10.為什么使用 key?

          答:需要使用 key 來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí),Diff 算法就可以正確的識(shí)別此節(jié)點(diǎn)。作用主要是為了高效的更新虛擬 DOM。

          11.axios 及安裝?

          答:請(qǐng)求后臺(tái)資源的模塊。npm install axios --save 裝好,js 中使用 import 進(jìn)來(lái),然后. get 或. post。返回在. then 函數(shù)中如果成功,失敗則是在.catch 函數(shù)中。

          12.v-modal 的使用。

          答:v-model 用于表單數(shù)據(jù)的雙向綁定,其實(shí)它就是一個(gè)語(yǔ)法糖,這個(gè)背后就做了兩個(gè)操作:

          v-bind 綁定一個(gè) value 屬性;

          v-on 指令給當(dāng)前元素綁定 input 事件。

          13. 請(qǐng)說(shuō)出 vue.cli 項(xiàng)目中 src 目錄每個(gè)文件夾和文件的用法?

          答:assets 文件夾是放靜態(tài)資源;components 是放組件;router 是定義路由相關(guān)的配置;app.vue 是一個(gè)應(yīng)用主組件;main.js 是入口文件。

          14. 分別簡(jiǎn)述 computed 和 watch 的使用場(chǎng)景

          答:computed:

          當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到 computed最典型的栗子: 購(gòu)物車商品結(jié)算的時(shí)候

          watch:

          當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用 watch

          栗子:搜索數(shù)據(jù)

          15.v-on 可以監(jiān)聽(tīng)多個(gè)方法嗎?

          答:可以

          16.$nextTick 的使用

          答:當(dāng)你修改了 data 的值然后馬上獲取這個(gè) dom 元素的值,是不能獲取到更新后的值,你需要使用 $nextTick 這個(gè)回調(diào),讓修改后的 data 值渲染更新到 dom 元素之后在獲取,才能成功。

          17.vue 組件中 data 為什么必須是一個(gè)函數(shù)?

          答:因?yàn)?JavaScript 的特性所導(dǎo)致,在 component 中,data 必須以函數(shù)的形式存在,不可以是對(duì)象。

          組建中的 data 寫成一個(gè)函數(shù),數(shù)據(jù)以函數(shù)返回值的形式定義,這樣每次復(fù)用組件的時(shí)候,都會(huì)返回一份新的 data,相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間,它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù),不會(huì)造成混亂。而單純的寫成對(duì)象形式,就是所有的組件實(shí)例共用了一個(gè) data,這樣改一個(gè)全都改了。

          18. 漸進(jìn)式框架的理解

          答:主張最少;可以根據(jù)不同的需求選擇不同的層級(jí);

          19.Vue 中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的?

          答:vue 雙向數(shù)據(jù)綁定是通過(guò) 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的, 也就是說(shuō)數(shù)據(jù)和視圖同步,數(shù)據(jù)發(fā)生變化,視圖跟著變化,視圖變化,數(shù)據(jù)也隨之發(fā)生改變;

          核心:關(guān)于 VUE 雙向數(shù)據(jù)綁定,其核心是 Object.defineProperty() 方法。

          20. 單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)

          答:?jiǎn)雾?yè)面應(yīng)用(SPA),通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用,瀏覽器一開(kāi)始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中。但在寫的時(shí)候,還是會(huì)分開(kāi)寫(頁(yè)面片段),然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入,單頁(yè)面的頁(yè)面跳轉(zhuǎn),僅刷新局部資源。多應(yīng)用于 pc 端。

          多頁(yè)面(MPA),就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面,頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新

          單頁(yè)面的優(yōu)點(diǎn):

          用戶體驗(yàn)好,快,內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面,基于這一點(diǎn) spa 對(duì)服務(wù)器壓力較小;前后端分離;頁(yè)面效果會(huì)比較炫酷(比如切換頁(yè)面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫)。

          單頁(yè)面缺點(diǎn):

          不利于 seo;導(dǎo)航不可用,如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。(由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能,所以需要自己建立堆棧管理);初次加載時(shí)耗時(shí)多;頁(yè)面復(fù)雜度提高很多。

          21.v-if 和 v-for 的優(yōu)先級(jí)

          答:當(dāng) v-if 與 v-for 一起使用時(shí),v-for 具有比 v-if 更高的優(yōu)先級(jí),這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。所以,不推薦 v-if 和 v-for 同時(shí)使用。

          如果 v-if 和 v-for 一起用的話,vue 中的的會(huì)自動(dòng)提示 v-if 應(yīng)該放到外層去。

          22.assets 和 static 的區(qū)別

          答:相同點(diǎn):assets 和 static 兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片,字體圖標(biāo),樣式文件等都可以放在這兩個(gè)文件下,這是相同點(diǎn)

          不相同點(diǎn):assets 中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí),也就是運(yùn)行 npm run build 時(shí)會(huì)將assets 中放置的靜態(tài)資源文件進(jìn)行打包上傳,所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積,代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在 static 文件中跟著 index.html 一同上傳至服務(wù)器。static 中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程,而是直接進(jìn)入打包好的目錄,直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳,在打包時(shí)會(huì)提高一定的效率,但是 static 中的資源文件由于沒(méi)有進(jìn)行壓縮等操作,所以文件的體積也就相對(duì)于 assets 中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。

          建議:將項(xiàng)目中 template 需要的樣式文件 js 文件等都可以放置在 assets 中,走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如 iconfoont.css 等文件可以放置在 static中,因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過(guò)處理,我們不再需要處理,直接上傳。

          23.vue 常用的修飾符

          答:.stop:等同于 JavaScript 中的 event.stopPropagation(),防止事件冒泡;

          .prevent:等同于 JavaScript 中的 event.preventDefault(),防止執(zhí)行預(yù)設(shè)的行為(如果事件可取消,則取消該事件,而不停止事件的進(jìn)一步傳播);.capture:與事件冒泡的方向相反,事件捕獲由外到內(nèi);

          .self:只會(huì)觸發(fā)自己范圍內(nèi)的事件,不包含子元素;

          .once:只會(huì)觸發(fā)一次。

          24.vue 的兩個(gè)核心點(diǎn)

          答:數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)

          數(shù)據(jù)驅(qū)動(dòng):ViewModel,保證數(shù)據(jù)和視圖的一致性。

          組件系統(tǒng):應(yīng)用類 UI 可以看作全部是由組件樹(shù)構(gòu)成的。

          25.vue 和 jQuery 的區(qū)別

          答:jQuery 是使用選擇器($)選取 DOM 對(duì)象,對(duì)其進(jìn)行賦值、取值、事件綁定等操作,其實(shí)和原生的 HTML 的區(qū)別只在于可以更方便的選取和操作 DOM 對(duì)象,而數(shù)據(jù)和界面是在一起的。比如需要獲取 label 標(biāo)簽的內(nèi)容:$("lable").val();, 它還是依賴 DOM 元素的值。

          Vue 則是通過(guò) Vue 對(duì)象將數(shù)據(jù)和 View 完全分離開(kāi)來(lái)了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM 對(duì)象,可以說(shuō)數(shù)據(jù)和 View 是分離的,他們通過(guò) Vue 對(duì)象這個(gè) vm 實(shí)現(xiàn)相互的綁定。這就是傳說(shuō)中的 MVVM。

          26. 引進(jìn)組件的步驟

          答: 在 template 中引入組件;

          在 script 的第一行用 import 引入路徑;

          用 component 中寫上組件名稱。

          27.delete 和 Vue.delete 刪除數(shù)組的區(qū)別

          答:delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。

          Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。

          28.SPA 首屏加載慢如何解決

          答:安裝動(dòng)態(tài)懶加載所需插件;使用 CDN 資源。

          29.Vue-router 跳轉(zhuǎn)和 location.href 有什么區(qū)別

          答:使用 location.href='/url'來(lái)跳轉(zhuǎn),簡(jiǎn)單方便,但是刷新了頁(yè)面;

          使用 history.pushState('/url'),無(wú)刷新頁(yè)面,靜態(tài)跳轉(zhuǎn);

          引進(jìn) router,然后使用 router.push('/url') 來(lái)跳轉(zhuǎn),使用了 diff 算法,實(shí)現(xiàn)了按需加載,減少了 dom 的消耗。

          其實(shí)使用 router 跳轉(zhuǎn)和使用 history.pushState() 沒(méi)什么差別的,因?yàn)?vue-router 就是用了history.pushState(),尤其是在 history

          30. vue slot

          答:簡(jiǎn)單來(lái)說(shuō),假如父組件需要在子組件內(nèi)放一些 DOM,那么這些 DOM 是顯示、不顯示、在哪個(gè)地方顯示、如何顯示,就是 slot 分發(fā)負(fù)責(zé)的活。

          31. 你們 vue 項(xiàng)目是打包了一個(gè) js 文件,一個(gè) css 文件,還是有多個(gè)文件?

          答:根據(jù) vue-cli 腳手架規(guī)范,一個(gè) js 文件,一個(gè) CSS 文件。

          32.Vue 里面 router-link 在電腦上有用,在安卓上沒(méi)反應(yīng)怎么解決?

          答:Vue 路由在 Android 機(jī)上有問(wèn)題,babel 問(wèn)題,安裝 babel polypill 插件解決。

          33.Vue2 中注冊(cè)在 router-link 上事件無(wú)效解決方法

          答: 使用 @click.native。原因:router-link 會(huì)阻止 click 事件,.native 指直接監(jiān)聽(tīng)一個(gè)原生事件。

          34.RouterLink 在 IE 和 Firefox 中不起作用(路由不跳轉(zhuǎn))的問(wèn)題

          答: 方法一:只用 a 標(biāo)簽,不適用 button 標(biāo)簽;方法二:使用 button 標(biāo)簽和Router.navigate 方法

          35.axios 的特點(diǎn)有哪些

          答:從瀏覽器中創(chuàng)建 XMLHttpRequests;

          node.js 創(chuàng)建 http 請(qǐng)求;

          支持 Promise API;

          攔截請(qǐng)求和響應(yīng);

          轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù);

          取消請(qǐng)求;

          自動(dòng)換成 json。

          axios 中的發(fā)送字段的參數(shù)是 data 跟 params 兩個(gè),兩者的區(qū)別在于 params 是跟請(qǐng)求地址一起發(fā)送的,data 的作為一個(gè)請(qǐng)求體進(jìn)行發(fā)送params 一般適用于 get 請(qǐng)求,data 一般適用于 post put 請(qǐng)求。

          36. 請(qǐng)說(shuō)下封裝 vue 組件的過(guò)程?

          答:1. 建立組件的模板,先把架子搭起來(lái),寫寫樣式,考慮好組件的基本邏輯。(os:思考 1 小時(shí),碼碼 10 分鐘,程序猿的準(zhǔn)則。)

          . 準(zhǔn)備好組件的數(shù)據(jù)輸入。即分析好邏輯,定好 props 里面的數(shù)據(jù)、類型。

          . 準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯,做好要暴露出來(lái)的方法。

          . 封裝完畢了,直接調(diào)用即可

          37.params 和 query 的區(qū)別

          答:用法:query 要用 path 來(lái)引入,params 要用 name 來(lái)引入,接收參數(shù)都是類似的,分別是 this.$route.query.name 和 this.$route.params.name。

          url 地址顯示:query 更加類似于我們 ajax 中 get 傳參,params 則類似于 post,說(shuō)的再簡(jiǎn)單一點(diǎn),前者在瀏覽器地址欄中顯示參數(shù),后者則不顯示

          注意點(diǎn):query 刷新不會(huì)丟失 query 里面的數(shù)據(jù)

          params 刷新 會(huì) 丟失 params 里面的數(shù)據(jù)。

          38.vue 初始化頁(yè)面閃動(dòng)問(wèn)題

          答:使用 vue 開(kāi)發(fā)時(shí),在 vue 初始化之前,由于 div 是不歸 vue 管的,所以我們寫的代碼在還沒(méi)有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象,看到類似于 {{message}} 的字樣,雖然一般情況下這個(gè)時(shí)間很短暫,但是我們還是有必要讓解決這個(gè)問(wèn)題的。

          首先:在 css 里加上 [v-cloak] {

          display: none;

          }。

          如果沒(méi)有徹底解決問(wèn)題,則在根元素加上 style="display: none;" :style="

          {display:'block'}"

          39.vue 更新數(shù)組時(shí)觸發(fā)視圖更新的方法

          答: push();pop();shift();unshift();splice(); sort();reverse()

          40.vue 常用的 UI 組件庫(kù)

          答:Mint UI,element,VUX

          41. Vue的生命周期?

          beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(創(chuàng)建、掛載、更新、卸載)掛載中可以操作DOM,創(chuàng)建中不能操作DOM;常用掛載或者創(chuàng)建生命周期就行了

          42.虛擬DOM和DIFF算法?

          將DOM抽象為虛擬DOM, 然后通過(guò)新舊虛擬DOM 這兩個(gè)對(duì)象的差異(Diff算法),最終只把變化的部分重新渲染,提高渲染效率的過(guò)程;

          diff 是通過(guò)JS層面的計(jì)算,返回一個(gè)patch對(duì)象,即補(bǔ)丁對(duì)象,在通過(guò)特定的操作解析patch對(duì)象,完成頁(yè)面的重新渲染

          43.vue2和vue3原理?

          1. vue2和vue3雙向數(shù)據(jù)綁定原理發(fā)生了改變

          vue2 的雙向數(shù)據(jù)綁定是利用ES5 的一個(gè) API Object.definePropert()對(duì)數(shù)據(jù)進(jìn)行劫持 結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的。

          vue3 中使用了 es6 的 ProxyAPI 對(duì)數(shù)據(jù)代理。

          相比于vue2.x,使用proxy的優(yōu)勢(shì)如下

          defineProperty只能監(jiān)聽(tīng)某個(gè)屬性,不能對(duì)全對(duì)象監(jiān)聽(tīng)

          可以省去for in、閉包等內(nèi)容來(lái)提升效率(直接綁定整個(gè)對(duì)象即可)

          可以監(jiān)聽(tīng)數(shù)組,不用再去單獨(dú)的對(duì)數(shù)組做特異性操作 vue3.x可以檢測(cè)到數(shù)組內(nèi)部數(shù)據(jù)的變化

          2、默認(rèn)進(jìn)行懶觀察(lazy observation)

          在 2.x 版本里,不管數(shù)據(jù)多大,都會(huì)在一開(kāi)始就為其創(chuàng)建觀察者。當(dāng)數(shù)據(jù)很大時(shí),這可能會(huì)在頁(yè)面載入時(shí)造成明顯的性能壓力。3.x 版本,只會(huì)對(duì)「被用于渲染初始可見(jiàn)部分的數(shù)據(jù)」創(chuàng)建觀察者,而且 3.x 的觀察者更高效。

          3、更精準(zhǔn)的變更通知

          比例來(lái)說(shuō):2.x 版本中,使用 Vue.set 來(lái)給對(duì)象新增一個(gè)屬性時(shí),這個(gè)對(duì)象的所有 watcher 都會(huì)重新運(yùn)行;3.x 版本中,只有依賴那個(gè)屬性的 watcher 才會(huì)重新運(yùn)行。

          4vue3新加入了TypeScript以及PWA的支持

          5、vue2和vue3組件發(fā)送改變

          44.生命周期鉤子的一些使用方法:

          1.beforecreate:可以在加個(gè)loading事件,在加載實(shí)例是觸發(fā)

          2.created:初始化完成時(shí)的事件寫在這里,如在這結(jié)束loading事件,異步請(qǐng)求也適宜在這里調(diào)用

          3.mounted:掛載元素,獲取到dom節(jié)點(diǎn)

          4.updated:如果對(duì)數(shù)據(jù)統(tǒng)一處理,在這里寫上相應(yīng)函數(shù)

          5.beforeDestroy:可以一個(gè)確認(rèn)停止事件的確認(rèn)框

          6.nextTick:更新數(shù)據(jù)后立即操作dom

          45.開(kāi)發(fā)中常用的指令有哪些?

          v-model:一般用在表達(dá)輸入,很輕松的實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定

          v-html:更新元素的innerHTML

          v-show與v-if:條件渲染,注意二者區(qū)別

          v-on:click:可以簡(jiǎn)寫為@click,@綁定一個(gè)事件。如果事件觸發(fā)了,就可以指定事件的處理函數(shù)

          v-for:基于源數(shù)據(jù)多次渲染元素或模板

          v-bind:title=”msg”簡(jiǎn)寫:title="msg"

          我們開(kāi)發(fā)Web應(yīng)用的時(shí)候,會(huì)用到大量的js、css、image、html等靜態(tài)資源資源。

          靜態(tài)資源映射


          默認(rèn)情況下,我們只需要將靜態(tài)資源放在一下幾個(gè)目錄中就可以直接通過(guò)url在瀏覽器中訪問(wèn)了。

          • /META-INF/resources/
          • /resources/
          • /static/
          • /public/

          如果這四個(gè)目錄中有相同的靜態(tài)資源文件,那么優(yōu)先訪問(wèn)哪個(gè)目錄下面的資源啊?

          靜態(tài)資源的默認(rèn)訪問(wèn)優(yōu)先級(jí):/META-INF/resources/>/resources/>/static/>/public/

          在四個(gè)目錄中都放一個(gè)static.html的文件,每個(gè)html文件中都說(shuō)明自己所在的目錄,訪問(wèn)結(jié)果如下:

          SpringBoot關(guān)于靜態(tài)資源的訪問(wèn)涉及到了application.properties中的兩個(gè)屬性:

          # 默認(rèn)值為 /*
          spring.mvc.static-path-pattern=#這里設(shè)置靜態(tài)資源匹配的url-pattern
          # 默認(rèn)值為 classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ 
          spring.resources.static-locations=#這里設(shè)置要指向的路徑,多個(gè)使用英文逗號(hào)隔開(kāi),在前面的優(yōu)先級(jí)高
          

          此時(shí),我們豁然開(kāi)朗,知道默認(rèn)情況下靜態(tài)資源為什么放在/META-INF/resources/、/resources/、/static/、/public/這四個(gè)目錄了,還有這四個(gè)目錄訪問(wèn)的優(yōu)先級(jí)是怎么來(lái)的了。

          修改靜態(tài)資源映射的方法:

          • 我們可以修改這兩個(gè)屬性來(lái)改變靜態(tài)資源的映射,比如我們的所有靜態(tài)資源都在mystatic目錄中,并且我們希望訪問(wèn)靜態(tài)資源的的url都帶有/mystatic/這個(gè)目錄前綴:
          spring.mvc.static-path-pattern=/mystatic/*
          spring.resources.static-locations=classpath:mystatic/
          

          在resources資源目錄中創(chuàng)建一個(gè)mystatic目錄,在該目錄下面創(chuàng)建一個(gè)static.html文件,訪問(wèn)結(jié)果如下:

          • 繼承WebMvcConfigurerAdapter類,并且重寫addResourceHandlers方法就行,該操作與上面的方法得到的效果是一樣的


          注意:還可以設(shè)置外部磁盤目錄,設(shè)置方式不變,格式如下:file:d/mystatic/。

          WebJars


          WebJars將前端資源(css,js,image,html等等)打包到j(luò)ar中,然后使用基于JVM的包管理器(比如 Maven、Gradle 等)管理前端依賴的方案。SpringBoot中也可以通過(guò)WebJars來(lái)訪問(wèn)靜態(tài)資源。

          SpringBoot默認(rèn)將/webjars/**映射到 classpath:/META-INF/resources/webjars/。

          • /webjars/**:表示/webjars/目錄下的所有文件,及存在其目錄下的jar包中的所有文件。

          所以默認(rèn)情況下我們需要訪問(wèn)WebJars中的資源,需要將其jar包放到classpath:/META-INF/resources/webjars/目錄中。

          我們來(lái)使用一下WebJars:

          • 在pom.xml中引入jquery的WebJars,默認(rèn)會(huì)被放在classpath:/META-INF/resources/webjars/目錄中
           <dependency>
           <groupId>org.webjars</groupId>
           <artifactId>jquery</artifactId>
           <version>2.1.1</version>
           </dependency>
          
          • 在前端webjars.html頁(yè)面中引入jquery
          <script src="/webjars/jquery/2.1.1/jquery.js"></script>
          
          • 訪問(wèn)頁(yè)面webjars.html,查看源碼,可以鏈接到j(luò)query.js的內(nèi)容


          版本號(hào)統(tǒng)一管理


          如果我們有很多頁(yè)面都是用了WebJars中的資源,而我們現(xiàn)在要升級(jí)WebJars的版本,豈不是要在每個(gè)頁(yè)面中都改動(dòng)一下,這樣很麻煩啊,有沒(méi)有簡(jiǎn)單的方法啊。此時(shí),我們可以進(jìn)行版本號(hào)統(tǒng)一管理。

          • 在pom.xml中引入jquery的WebJars的基礎(chǔ)上添加:
           <dependency>
           <groupId>org.webjars</groupId>
           <artifactId>webjars-locator</artifactId>
           </dependency>
          
          • 添加版本號(hào)統(tǒng)一管理的控制器


          • 在頁(yè)面中引入jquery的方式如下:
          <script src="/webjarslocator/jquery/jquery.js"></script>
          

          靜態(tài)資源版本管理


          當(dāng)我們資源內(nèi)容發(fā)生變化時(shí),由于瀏覽器緩存,用戶本地的靜態(tài)資源還是舊的資源,為了防止這種情況導(dǎo)致的問(wèn)題,我們可能會(huì)手動(dòng)在請(qǐng)求url的時(shí)候加個(gè)版本號(hào)或者其他方式。

          <script type="text/javascript" src="/lavor.js?v=1.1"></script>
          

          SpringMVC提供了兩種方式可以幫助我們很容易地解決這類問(wèn)題。

          MD5方式


          • 修改application.properties配置文件
          spring.resources.chain.strategy.content.enabled=true
          spring.resources.chain.strategy.content.paths=/**
          
          • 添加@ControllerAdvice注解,返回ResourceUrlProvider的對(duì)象,這樣所有通過(guò)控制器返回的模板頁(yè)面(jsp,thymeleaf,freeemarker等)就都可以在頁(yè)面中使用該對(duì)象了


          • 在控制器返回的模板頁(yè)面中,添加以下信息,我們這里的返回頁(yè)面時(shí)jsp頁(yè)面,lavor.js是webapp目錄下面的js腳本文件。
          <script src="${urls.getForLookupPath('/lavor.js') }"></script>
          
          • 通過(guò)瀏覽器訪問(wèn)控制器的請(qǐng)求url,查看頁(yè)面源代碼
          <script src="/lavor-fdfa0502716d517c6cad4f2536aa02a1.js"></script>
          

          請(qǐng)求/lavor-fdfa0502716d517c6cad4f2536aa02a1.js,我們MD5配置的paths=/**,所以SpringMVC會(huì)嘗試url中是否包含-,如果包含會(huì)去掉后面這部分,然后去映射的目錄(如webapp根目錄,上面提到的四大靜態(tài)映射目錄)查找/lavor.js文件,如果能找到就返回。

          版本號(hào)方式


          • 修改application.properties配置文件,注意MD5方式中的是content,這里是fixed
          spring.resources.chain.strategy.fixed.enabled=true
          #版本號(hào)處理的路徑
          spring.resources.chain.strategy.fixed.paths=/**
          # 版本號(hào),可以為所處理路徑中的資源加上/v1.1目錄前綴
          spring.resources.chain.strategy.fixed.version=v1.1
          
          • 添加@ControllerAdvice注解,返回ResourceUrlProvider的對(duì)象,這樣所有通過(guò)控制器返回的模板頁(yè)面(jsp,thymeleaf,freeemarker等)就都可以在頁(yè)面中使用該對(duì)象了


          • 在控制器返回的模板頁(yè)面中,添加以下信息,我們這里的返回頁(yè)面時(shí)jsp頁(yè)面,lavor.js是webapp目錄下面的js腳本文件.
          <script src="${urls.getForLookupPath('/lavor.js') }"></script>
          
          • 通過(guò)瀏覽器訪問(wèn)控制器的請(qǐng)求url,查看頁(yè)面源代碼
          <script src="/v1.1/lavor.js"></script>
          

          請(qǐng)求/v1.1/lavor.js,會(huì)查看v1.1是不是版本號(hào),如果是就去掉前綴目錄,直接查找/lavor.js。

          注意:我們發(fā)現(xiàn)如果添加了webapp目錄,那么該目錄也可以存放靜態(tài)資源,并且默認(rèn)情況下訪問(wèn)優(yōu)先級(jí)比/META-INF/resources/還要高。

          tml中img圖片進(jìn)行等比例縮放的實(shí)例代碼

          img圖片等比例縮放的方法

          HTML中,要修改img元素定義的圖片的大小,且是等比例縮放,不改變寬和高的比值,那么可以采用只設(shè)置img元素屬性中width和height中的任何一個(gè),不要同時(shí)設(shè)置兩個(gè)即可實(shí)現(xiàn)img圖片的等比例縮放效果。下面將通過(guò)兩個(gè)實(shí)例來(lái)分別實(shí)現(xiàn)這兩種方法。

          width等比例縮放img圖片實(shí)例代碼,及在線編輯器

          為了可以與原圖片的大小進(jìn)行對(duì)照,下面的實(shí)例使用HTML的注釋符號(hào)將等比例縮放的代碼進(jìn)行了注釋,第一遍運(yùn)行完之后,可以將第一行的代碼刪除(在線刪除,因?yàn)檫@是一個(gè)在線編輯器),然后將第二行代碼中的注釋符號(hào)去除掉,接著再運(yùn)行一遍看看等比例縮放的效果:

          <img src='../../static/img/test.jpg'>
          <!-- <img src='../../static/img/test.jpg' width="50%"> -->

          height等比例縮放實(shí)例代碼

          這邊的代碼與上面的幾乎一樣,只是將width的屬性修改成為height的屬性,如下:

          <img src='../../static/img/test.jpg'>
          <!-- <img src='../../static/img/test.jpg' height="50%"> -->

          提示:如上面的兩個(gè)實(shí)例,將width和height分別設(shè)置為50%都可以等比例縮放圖片,但得到的圖片的大小不一定一樣。

          等比例縮放的另外一種方法

          當(dāng)然了,如果要通過(guò)同時(shí)設(shè)置img圖片的width和height兩個(gè)屬性來(lái)達(dá)到等比例縮放圖片的話也是可以的,但是要先計(jì)算一下圖片的寬度和高度的比例,之后再等比例縮放。

          來(lái)源:笨鳥(niǎo)工具-璞玉天成,大器晚成

          原文:html img圖片等比例縮放的代碼 | HTML教程

          免責(zé)聲明:內(nèi)容僅供參考,不保證正確性


          主站蜘蛛池模板: 久久精品国产一区二区三区| 亚洲AV本道一区二区三区四区| 美女一区二区三区| 国产成人一区二区三区视频免费 | 成人区精品人妻一区二区不卡| 精品无码一区二区三区电影| 国产免费播放一区二区| 国产亚洲福利一区二区免费看 | 波多野结衣电影区一区二区三区 | 亚洲va乱码一区二区三区| 精品日韩在线视频一区二区三区| 怡红院美国分院一区二区| 久久一区二区三区精华液使用方法 | 久久久久人妻一区精品性色av| 精品一区二区91| 亚洲欧美日韩中文字幕一区二区三区 | 亚洲成在人天堂一区二区| 国产在线精品一区二区中文| 国产一区二区视频在线观看| 福利视频一区二区牛牛| 国产A∨国片精品一区二区| 国产91一区二区在线播放不卡| 亚洲国产精品一区二区第一页免 | 制服丝袜一区二区三区| 国产一区二区视频在线播放| 东京热无码一区二区三区av| 国产AV午夜精品一区二区三| 亚洲永久无码3D动漫一区| 寂寞一区在线观看| 色窝窝无码一区二区三区 | 亚洲AV无码一区二区三区牲色| 亚洲国产av一区二区三区| 视频一区二区精品的福利| 亚洲av日韩综合一区二区三区 | 国产一区二区三区在线观看影院 | 国产成人精品一区二三区熟女| 国产成人一区二区三区电影网站| 国产在线视频一区二区三区| 爆乳熟妇一区二区三区霸乳| 日本精品高清一区二区| 久久精品黄AA片一区二区三区|