ios vue 添加本地音乐_Vue 项目一些常见问题的解决方案
? ?戳藍字「前端技術優(yōu)選」關注我們哦!
有一些問題不限于 Vue,還適應于其他類型的 SPA 項目。
1. 頁面權限控制和登陸驗證
頁面權限控制
頁面權限控制是什么意思呢?
就是一個網(wǎng)站有不同的角色,比如管理員和普通用戶,要求不同的角色能訪問的頁面是不一樣的。如果一個頁面,有角色越權訪問,這時就得做出限制了。
一種方法是通過動態(tài)添加路由和菜單來做控制,不能訪問的頁面不添加到路由表里,這是其中一種辦法。具體細節(jié)請看下一節(jié)的《動態(tài)菜單》。
另一種辦法就是所有的頁面都在路由表里,只是在訪問的時候要判斷一下角色權限。如果有權限就允許訪問,沒有權限就拒絕,跳轉到 404 頁面。
思路
在每一個路由的?meta?屬性里,將能訪問該路由的角色添加到?roles?里。用戶每次登陸后,將用戶的角色返回。然后在訪問頁面時,把路由的?meta?屬性和用戶的角色進行對比,如果用戶的角色在路由的?roles?里,那就是能訪問,如果不在就拒絕訪問。
代碼示例
路由信息
routes:?[????{
????????path:?'/login',
????????name:?'login',
????????meta:?{
????????????roles:?['admin',?'user']
????????},
????????component:?()?=>?import('../components/Login.vue')
????},
????{
????????path:?'home',
????????name:?'home',
????????meta:?{
????????????roles:?['admin']
????????},
????????component:?()?=>?import('../views/Home.vue')
????},
]
頁面控制
//?假設角色有兩種:admin 和 user//?這里是從后臺獲取的用戶角色
const?role?=?'user'
//?在進入一個頁面前會觸發(fā)?router.beforeEach?事件
router.beforeEach((to,?from,?next)?=>?{
????if?(to.meta.roles.includes(role))?{
????????next()
????}?else?{
????????next({path:?'/404'})
????}
})
登陸驗證
網(wǎng)站一般只要登陸過一次后,接下來該網(wǎng)站的其他頁面都是可以直接訪問的,不用再次登陸。我們可以通過?token?或?cookie?來實現(xiàn),下面用代碼來展示一下如何用?token?控制登陸驗證。
router.beforeEach((to,?from,?next)?=>?{????//?如果有token?說明該用戶已登陸
????if?(localStorage.getItem('token'))?{
????????//?在已登陸的情況下訪問登陸頁會重定向到首頁
????????if?(to.path?===?'/login')?{
????????????next({path:?'/'})
????????}?else?{
????????????next({path:?to.path?||?'/'})
????????}
????}?else?{
????????//?沒有登陸則訪問任何頁面都重定向到登陸頁
????????if?(to.path?===?'/login')?{
????????????next()
????????}?else?{
????????????next(`/login?redirect=${to.path}`)
????????}
????}
})
2. 動態(tài)菜單
寫后臺管理系統(tǒng),估計有不少人遇過這樣的需求:根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單。為什么這么做呢?因為不同的用戶有不同的權限,能訪問的頁面是不一樣的。
動態(tài)添加路由
利用 vue-router 的?addRoutes?方法可以動態(tài)添加路由。
先看一下官方介紹:
router.addRoutes
router.addRoutes(routes:?Array)動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合?routes?選項要求的數(shù)組。
舉個例子:
const?router?=?new?Router({????routes:?[
????????{
????????????path:?'/login',
????????????name:?'login',
????????????component:?()?=>?import('../components/Login.vue')
????????},
????????{path:?'/',?redirect:?'/home'},
????]???
})
上面的代碼和下面的代碼效果是一樣的
const?router?=?new?Router({????routes:?[
????????{path:?'/',?redirect:?'/home'},
????]???
})
router.addRoutes([
????{
????????path:?'/login',
????????name:?'login',
????????component:?()?=>?import('../components/Login.vue')
????}
])
在動態(tài)添加路由的過程中,如果有 404 頁面,一定要放在最后添加,否則在登陸的時候添加完頁面會重定向到 404 頁面。
類似于這樣,這種規(guī)則一定要最后添加。
{path:?'*',?redirect:?'/404'}動態(tài)生成菜單
假設后臺返回來的數(shù)據(jù)長這樣:
//?左側菜單欄數(shù)據(jù)menuItems:?[
????{
????????name:?'home',?//?要跳轉的路由名稱?不是路徑
????????size:?18,?//?icon大小
????????type:?'md-home',?//?icon類型
????????text:?'主頁'?//?文本內容
????},
????{
????????text:?'二級菜單',
????????type:?'ios-paper',
????????children:?[
????????????{
????????????????type:?'ios-grid',
????????????????name:?'t1',
????????????????text:?'表格'
????????????},
????????????{
????????????????text:?'三級菜單',
????????????????type:?'ios-paper',
????????????????children:?[
????????????????????{
????????????????????????type:?'ios-notifications-outline',
????????????????????????name:?'msg',
????????????????????????text:?'查看消息'
????????????????????},
????????????????]
????????????}
????????]
????}
]
來看看怎么將它轉化為菜單欄,我在這里使用了?iview?的組件,不用重復造輪子。
<Menu?ref="asideMenu"?theme="dark"?width="100%"?@on-select="gotoPage"?accordion?:open-names="openMenus"?:active-name="currentPage"?@on-open-change="menuChange">
????
????<div?v-for="(item,?index)?in?menuItems"?:key="index">
????????<Submenu?v-if="item.children"?:name="index">
????????????<template?slot="title">
????????????????<Icon?:size="item.size"?:type="item.type"/>
????????????????<span?v-show="isShowAsideTitle">{{item.text}}span>
????????????template>
????????????<div?v-for="(subItem,?i)?in?item.children"?:key="index?+?i">
????????????????<Submenu?v-if="subItem.children"?:name="index?+?'-'?+?i">
????????????????????<template?slot="title">
????????????????????????<Icon?:size="subItem.size"?:type="subItem.type"/>
????????????????????????<span?v-show="isShowAsideTitle">{{subItem.text}}span>
????????????????????template>
????????????????????<MenuItem?class="menu-level-3"?v-for="(threeItem,?k)?in?subItem.children"?:name="threeItem.name"?:key="index?+?i?+?k">
????????????????????????<Icon?:size="threeItem.size"?:type="threeItem.type"/>
????????????????????????<span?v-show="isShowAsideTitle">{{threeItem.text}}span>
????????????????????MenuItem>
????????????????Submenu>
????????????????<MenuItem?v-else?v-show="isShowAsideTitle"?:name="subItem.name">
????????????????????<Icon?:size="subItem.size"?:type="subItem.type"/>
????????????????????<span?v-show="isShowAsideTitle">{{subItem.text}}span>
????????????????MenuItem>
????????????div>
????????Submenu>
????????<MenuItem?v-else?:name="item.name">
????????????<Icon?:size="item.size"?:type="item.type"?/>
????????????<span?v-show="isShowAsideTitle">{{item.text}}span>
????????MenuItem>
????div>
Menu>
代碼不用看得太仔細,理解原理即可,其實就是通過三次?v-for?不停的對子數(shù)組進行循環(huán),生成三級菜單。
不過這個動態(tài)菜單有缺陷,就是只支持三級菜單。一個更好的做法是把生成菜單的過程封裝成組件,然后遞歸調用,這樣就能支持無限級的菜單。在生菜菜單時,需要判斷一下是否還有子菜單,如果有就遞歸調用組件。
動態(tài)路由因為上面已經(jīng)說過了用?addRoutes?來實現(xiàn),現(xiàn)在看看具體怎么做。
首先,要把項目所有的頁面路由都列出來,再用后臺返回來的數(shù)據(jù)動態(tài)匹配,能匹配上的就把路由加上,不能匹配上的就不加。最后把這個新生成的路由數(shù)據(jù)用?addRoutes?添加到路由表里。
const?asyncRoutes?=?{????'home':?{
????????path:?'home',
????????name:?'home',
????????component:?()?=>?import('../views/Home.vue')
????},
????'t1':?{
????????path:?'t1',
????????name:?'t1',
????????component:?()?=>?import('../views/T1.vue')
????},
????'password':?{
????????path:?'password',
????????name:?'password',
????????component:?()?=>?import('../views/Password.vue')
????},
????'msg':?{
????????path:?'msg',
????????name:?'msg',
????????component:?()?=>?import('../views/Msg.vue')
????},
????'userinfo':?{
????????path:?'userinfo',
????????name:?'userinfo',
????????component:?()?=>?import('../views/UserInfo.vue')
????}
}
//?傳入后臺數(shù)據(jù)?生成路由表
menusToRoutes(menusData)
//?將菜單信息轉成對應的路由信息?動態(tài)添加
function?menusToRoutes(data)?{
????const?result?=?[]
????const?children?=?[]
????result.push({
????????path:?'/',
????????component:?()?=>?import('../components/Index.vue'),
????????children,
????})
????data.forEach(item?=>?{
????????generateRoutes(children,?item)
????})
????children.push({
????????path:?'error',
????????name:?'error',
????????component:?()?=>?import('../components/Error.vue')
????})
????//?最后添加404頁面?否則會在登陸成功后跳到404頁面
????result.push(
????????{path:?'*',?redirect:?'/error'},
????)
????return?result
}
function?generateRoutes(children,?item)?{
????if?(item.name)?{
????????children.push(asyncRoutes[item.name])
????}?else?if?(item.children)?{
????????item.children.forEach(e?=>?{
????????????generateRoutes(children,?e)
????????})
????}
}
動態(tài)菜單的代碼實現(xiàn)放在 github 上,分別放在這個項目的?src/components/Index.vue、src/permission.js?和?src/utils/index.js?文件里。
3. 前進刷新后退不刷新
需求一:
在一個列表頁中,第一次進入的時候,請求獲取數(shù)據(jù)。
點擊某個列表項,跳到詳情頁,再從詳情頁后退回到列表頁時,不刷新。
也就是說從其他頁面進到列表頁,需要刷新獲取數(shù)據(jù),從詳情頁返回到列表頁時不要刷新。
解決方案
在?App.vue設置:
????????<keep-alive?include="list">????????????<router-view/>
????????keep-alive>
假設列表頁為?list.vue,詳情頁為?detail.vue,這兩個都是子組件。
我們在?keep-alive?添加列表頁的名字,緩存列表頁。
然后在列表頁的?created?函數(shù)里添加 ajax 請求,這樣只有第一次進入到列表頁的時候才會請求數(shù)據(jù),當從列表頁跳到詳情頁,再從詳情頁回來的時候,列表頁就不會刷新。這樣就可以解決問題了。
需求二:
在需求一的基礎上,再加一個要求:可以在詳情頁中刪除對應的列表項,這時返回到列表頁時需要刷新重新獲取數(shù)據(jù)。
我們可以在路由配置文件上對?detail.vue?增加一個?meta?屬性。
????????{???????????path:?'/detail',
???????????name:?'detail',
???????????component:?()?=>?import('../view/detail.vue'),
???????????meta:?{isRefresh:?true}
???????},
這個?meta?屬性,可以在詳情頁中通過?this.$route.meta.isRefresh?來讀取和設置。
設置完這個屬性,還要在?App.vue?文件里設置 watch 一下?$route?屬性。
????watch:?{???????$route(to,?from)?{
???????????const?fname?=?from.name
???????????const?tname?=?to.name
???????????if?(from.meta.isRefresh?||?(fname?!=?'detail'?&&?tname?==?'list'))?{
???????????????from.meta.isRefresh?=?false
???????//?在這里重新請求數(shù)據(jù)
???????????}
???????}
???},
這樣就不需要在列表頁的?created?函數(shù)里用 ajax 來請求數(shù)據(jù)了,統(tǒng)一放在?App.vue?里來處理。
觸發(fā)請求數(shù)據(jù)有兩個條件:
當我們在詳情頁中刪除了對應的列表項時,就可以將詳情頁?meta?屬性中的?isRefresh?設為?true。這時再返回到列表頁,頁面會重新刷新。
解決方案二
對于需求二其實還有一個更簡潔的方案,那就是使用 router-view 的?key?屬性。
<keep-alive>????<router-view?:key="$route.fullPath"/>
keep-alive>
首先 keep-alive 讓所有頁面都緩存,當你不想緩存某個路由頁面,要重新加載它時,可以在跳轉時傳一個隨機字符串,這樣它就能重新加載了。例如從列表頁進入了詳情頁,然后在詳情頁中刪除了列表頁中的某個選項,此時從詳情頁退回列表頁時就要刷新,我們可以這樣跳轉:
this.$router.push({????path:?'/list',
????query:?{?'randomID':?'id'?+?Math.random()?},
})
這樣的方案相對來說還是更簡潔的。
4. 多個請求下 loading 的展示與關閉
一般情況下,在 vue 中結合 axios 的攔截器控制 loading 展示和關閉,是這樣的:
在?App.vue?配置一個全局 loading。
????<div?class="app">????????<keep-alive?:include="keepAliveData">
????????????<router-view/>
????????keep-alive>
????????<div?class="loading"?v-show="isShowLoading">
????????????<Spin?size="large">Spin>
????????div>
????div>
同時設置 axios 攔截器。
?//?添加請求攔截器?this.$axios.interceptors.request.use(config?=>?{
?????this.isShowLoading?=?true
?????return?config
?},?error?=>?{
?????this.isShowLoading?=?false
?????return?Promise.reject(error)
?})
?//?添加響應攔截器
?this.$axios.interceptors.response.use(response?=>?{
?????this.isShowLoading?=?false
?????return?response
?},?error?=>?{
?????this.isShowLoading?=?false
?????return?Promise.reject(error)
?})
這個攔截器的功能是在請求前打開 loading,請求結束或出錯時關閉 loading。
如果每次只有一個請求,這樣運行是沒問題的。但同時有多個請求并發(fā),就會有問題了。
舉例:
假如現(xiàn)在同時發(fā)起兩個請求,在請求前,攔截器?this.isShowLoading = true?將 loading 打開。
現(xiàn)在有一個請求結束了。this.isShowLoading = false?攔截器關閉 loading,但是另一個請求由于某些原因并沒有結束。
造成的后果就是頁面請求還沒完成,loading 卻關閉了,用戶會以為頁面加載完成了,結果頁面不能正常運行,導致用戶體驗不好。
解決方案
增加一個?loadingCount?變量,用來計算請求的次數(shù)。
loadingCount:?0再增加兩個方法,來對?loadingCount??進行增減操作。
????methods:?{????????addLoading()?{
????????????this.isShowLoading?=?true
????????????this.loadingCount++
????????},
????????isCloseLoading()?{
????????????this.loadingCount--
????????????if?(this.loadingCount?==?0)?{
????????????????this.isShowLoading?=?false
????????????}
????????}
????}
現(xiàn)在攔截器變成這樣:
????????//?添加請求攔截器????????this.$axios.interceptors.request.use(config?=>?{
????????????this.addLoading()
????????????return?config
????????},?error?=>?{
????????????this.isShowLoading?=?false
????????????this.loadingCount?=?0
????????????this.$Message.error('網(wǎng)絡異常,請稍后再試')
????????????return?Promise.reject(error)
????????})
????????//?添加響應攔截器
????????this.$axios.interceptors.response.use(response?=>?{
????????????this.isCloseLoading()
????????????return?response
????????},?error?=>?{
????????????this.isShowLoading?=?false
????????????this.loadingCount?=?0
????????????this.$Message.error('網(wǎng)絡異常,請稍后再試')
????????????return?Promise.reject(error)
????????})
這個攔截器的功能是:
每當發(fā)起一個請求,打開 loading,同時?loadingCount?加1。
每當一個請求結束,?loadingCount?減1,并判斷 ?loadingCount?是否為 0,如果為 0,則關閉 loading。
這樣即可解決,多個請求下有某個請求提前結束,導致 loading 關閉的問題。
5. 表格打印
打印需要用到的組件為 print-js
普通表格打印
一般的表格打印直接仿照組件提供的例子就可以了。
printJS({????printable:?id,?//?DOM?id
????type:?'html',
????scanStyles:?false,
})
element-ui 表格打印(其他組件庫的表格同理)
element-ui 的表格,表面上看起來是一個表格,實際上是由兩個表格組成的。
表頭為一個表格,表體又是個表格,這就導致了一個問題:打印的時候表體和表頭錯位。
另外,在表格出現(xiàn)滾動條的時候,也會造成錯位。
解決方案
我的思路是將兩個表格合成一個表格,print-js?組件打印的時候,實際上是把 id 對應的 DOM 里的內容提取出來打印。所以,在傳入 id 之前,可以先把表頭所在的表格內容提取出來,插入到第二個表格里,從而將兩個表格合并,這時候打印就不會有錯位的問題了。
function?printHTML(id)?{????const?html?=?document.querySelector('#'?+?id).innerHTML
????//?新建一個?DOM
????const?div?=?document.createElement('div')
????const?printDOMID?=?'printDOMElement'
????div.id?=?printDOMID
????div.innerHTML?=?html
????//?提取第一個表格的內容?即表頭
????const?ths?=?div.querySelectorAll('.el-table__header-wrapper?th')
????const?ThsTextArry?=?[]
????for?(let?i?=?0,?len?=?ths.length;?i?????????if?(ths[i].innerText?!==?'')?ThsTextArry.push(ths[i].innerText)
????}
????//?刪除多余的表頭
????div.querySelector('.hidden-columns').remove()
????//?第一個表格的內容提取出來后已經(jīng)沒用了?刪掉
????div.querySelector('.el-table__header-wrapper').remove()
????//?將第一個表格的內容插入到第二個表格
????let?newHTML?=?''for?(let?i?=?0,?len?=?ThsTextArry.length;?i?????????newHTML?+=?''?+?ThsTextArry[i]?+?''
????}
????newHTML?+=?''
????div.querySelector('.el-table__body-wrapper?table').insertAdjacentHTML('afterbegin',?newHTML)
????//?將新的?DIV?添加到頁面?打印后再刪掉
????document.querySelector('body').appendChild(div)
????
????printJS({
????????printable:?printDOMID,
????????type:?'html',
????????scanStyles:?false,
????????style:?'table?{?border-collapse:?collapse?}'?//?表格樣式
????})
????div.remove()
}
6. 下載二進制文件
平時在前端下載文件有兩種方式,一種是后臺提供一個 URL,然后用?window.open(URL)?下載,另一種就是后臺直接返回文件的二進制內容,然后前端轉化一下再下載。
由于第一種方式比較簡單,在此不做探討。本文主要講解一下第二種方式怎么實現(xiàn)。
第二種方式需要用到 Blob 對象, mdn 文檔上是這樣介紹的:
Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)
具體使用方法
axios({??method:?'post',
??url:?'/export',
})
.then(res?=>?{
??//?假設?data?是返回來的二進制數(shù)據(jù)
??const?data?=?res.data
??const?url?=?window.URL.createObjectURL(new?Blob([data],?{type:?"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
??const?link?=?document.createElement('a')
??link.style.display?=?'none'
??link.href?=?url
??link.setAttribute('download',?'excel.xlsx')
??document.body.appendChild(link)
??link.click()
??document.body.removeChild(link)
})
打開下載的文件,看看結果是否正確。
在這里插入圖片描述一堆亂碼...
一定有哪里不對。
最后發(fā)現(xiàn)是參數(shù)?responseType?的問題,responseType?它表示服務器響應的數(shù)據(jù)類型。由于后臺返回來的是二進制數(shù)據(jù),所以我們要把它設為?arraybuffer, 接下來再看看結果是否正確。
axios({??method:?'post',
??url:?'/export',
??responseType:?'arraybuffer',
})
.then(res?=>?{
??//?假設?data?是返回來的二進制數(shù)據(jù)
??const?data?=?res.data
??const?url?=?window.URL.createObjectURL(new?Blob([data],?{type:?"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
??const?link?=?document.createElement('a')
??link.style.display?=?'none'
??link.href?=?url
??link.setAttribute('download',?'excel.xlsx')
??document.body.appendChild(link)
??link.click()
??document.body.removeChild(link)
})
這次沒有問題,文件能正常打開,內容也是正常的,不再是亂碼。
根據(jù)后臺接口內容決定是否下載文件
作者的項目有大量的頁面都有下載文件的需求,而且這個需求還有點變態(tài)。
具體需求如下
先來分析一下,首先根據(jù)上文,我們都知道下載文件的接口響應數(shù)據(jù)類型為?arraybuffer。返回的數(shù)據(jù)無論是二進制文件,還是 JSON 字符串,前端接收到的其實都是?arraybuffer。所以我們要對?arraybuffer?的內容作個判斷,在接收到數(shù)據(jù)時將它轉換為字符串,判斷是否有?code: 199999。如果有,則報錯提示,如果沒有,則是正常文件,下載即可。具體實現(xiàn)如下:
axios.interceptors.response.use(response?=>?{????const?res?=?response.data
????//?判斷響應數(shù)據(jù)類型是否?ArrayBuffer,true?則是下載文件接口,false?則是正常接口
????if?(res?instanceof?ArrayBuffer)?{
????????const?utf8decoder?=?new?TextDecoder()
????????const?u8arr?=?new?Uint8Array(res)
????????//?將二進制數(shù)據(jù)轉為字符串
????????const?temp?=?utf8decoder.decode(u8arr)
????????if?(temp.includes('{code:199999'))?{
????????????Message({
?????????????//?字符串轉為?JSON?對象
????????????????message:?JSON.parse(temp).msg,
????????????????type:?'error',
????????????????duration:?5000,
????????????})
????????????return?Promise.reject()
????????}
????}
????//?正常類型接口,省略代碼...
????return?res
},?(error)?=>?{
????//?省略代碼...
????return?Promise.reject(error)
})
7. 自動忽略 console.log 語句
export?function?rewirteLog()?{????console.log?=?(function?(log)?{
????????return?process.env.NODE_ENV?==?'development'??log?:?function()?{}
????}(console.log))
}
在?main.js?引入這個函數(shù)并執(zhí)行一次,就可以實現(xiàn)忽略 console.log 語句的效果。
在看點這里 《新程序員》:云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的ios vue 添加本地音乐_Vue 项目一些常见问题的解决方案的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 50兆 svg 文件超过_中山兆驰产业园
- 下一篇: 多维多重背包问题_满满干货!背包问题全总