一、頁面有很多圖表的時候,先定義一個圖表對象HOME_CHART,然后每一個圖表都是這個對象下面的一個屬性
如:
//服務(wù)模式分布
HOME_CHART.serviceType = echarts.init(document.getElementById('service-type'));
HOME_CHART.serviceType.setOption({})
// resize 重新計算框架
window.addEventListener('resize',function() {
HOME_CHART.hardwareType.resize();
HOME_CHART.serviceType.resize();
HOME_CHART.newCompany.resize();
});
二、用戶user和角色role的區(qū)別
用戶有很多個,角色只有那么幾個,比如超級管理員,系統(tǒng)配置管理員等等
每個用戶只有一個角色,而一個角色可以有很多用戶
createUserId就是當前登錄用戶的userId
二、左邊菜單欄的顯示【資源就是用戶獲取到的權(quán)限,即可以看到的菜單】
1.登錄的時候,獲取到用戶的userId,通過接口,findUserByUserId,獲取到用戶的roleId,然后,通過接口findResourceByRoleId,獲取到用戶的菜單權(quán)限
四、角色管理
首先,通過接口findRoleListBySysCodeAndPager,獲取到角色的全部信息,展示在頁面的列表中
設(shè)置權(quán)限:首先通過接口findTreeBySysCode,獲取到全部資源,也就是全部菜單,顯示在樹形結(jié)構(gòu)中
然后通過接口findResourceByRoleId,使用用戶的roleId,顯示用戶已經(jīng)擁有的權(quán)限,即勾選中已經(jīng)擁有的權(quán)限勾選框
再然后,通過giveRolesForResource,更改用戶獲得的資源
五、監(jiān)聽localstorage
window.addEventListener("storage",function(event){
if(event.newValue!=null){
console.log(event.key);
console.log(event.newValue);
dualMessageBack(event.key,event.newValue);
}
});
六、今天做登錄顯示用戶名的時候,由于先跳轉(zhuǎn)了頁面,后存本地緩存,導(dǎo)致進去獲取不到用戶名,因為先跳轉(zhuǎn)頁面了,此時還未進行本地緩存存儲操作,導(dǎo)致獲取不到值
把跳轉(zhuǎn)頁面放在存值之后即可
if (res.data.code == "success") {
this._Storage.setObj("userObj", "userObj", res.data.data);
this.$router.push({
name: "index"
});
}
七、nextTick,頁面加載完成之后調(diào)用里面的方法,相當于setTimeout
八、表單校驗的時候,
:label-position="labelPosition"
label-width="120px"
:rules="rules"
ref="plan"
:model="plan" >
prop里面的userTelphone和v-model.trim里面的必須一致,必須都為userTelphone
這樣是行不通的
rules:{
userTelphone:[
{ required: true, message: "手機號不能為空", trigger: "blur" },
{
pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
message: "請輸入正確的手機號"
}
]
}
九、
發(fā)現(xiàn)在輸入框內(nèi),鼠標從左往右滑動,會導(dǎo)致彈框自動關(guān)閉
加上close-on-click-modal屬性,clickModal為false,注意是要用:號進行綁定
close-on-click-modal 是否可以通過點擊 modal 關(guān)閉 Dialog boolean — true
十、遞歸刪除某一條元素
var resourceData = res.data.data;
function queryList(json) {
for (var i = 0; i < json.length; i++) {
if (json[i].resType == "2") {
json.splice(i,1)
i--;
} else {
queryList(json[i].children);
}
}
return json
}
this.list = queryList(resourceData)
最終取到的值是沒有按鈕的數(shù)據(jù)
js遞歸遍歷數(shù)組
js遞歸循環(huán)數(shù)組
十一、
:key="index"
:label="item.label"
:value="item.value"
不加filterable,在下拉框只能選擇,加了filterable,下拉框既可以選,也可以手動輸入內(nèi)容進行搜索
十二、vue 多個按鈕,每次只能選擇一個,按鈕上附帶數(shù)據(jù)
{{item.name}}
data(){
return {
btnArr:[
{name:'App', id:0},
{name:'web', id:1},
{name:'大屏', id:2},
],
isChange:-1,
}
}
isChoose(index,item){
if(index!=this.isChange){
this.isChange = index;
}else{
this.isChange = -1;
}
},
十三、vue 可以同時選擇多個按鈕,獲取組合信息
參考:資訊管理
十四、proxy的理解
proxy: {
'/gsafetyclound': {
target: ApiConfig.apiHost,
changeOrigin: true,
secure: false,
pathRewrite: {
'^/gsafetyclound': ''
}
},
'/test': {
// target: "http://www.gsafetycloud.com/api/v1.1/operation-management", //線上
target: "http://172.19.12.24:8099/operationManagement/",
changeOrigin: true,
secure: false,
pathRewrite: {
'^/test': ''
},
},
}
一是解決跨域的問題,二是使用代理,可以使用多個服務(wù),根據(jù)前綴的不同使用不同的服務(wù)
本地開發(fā)模式:
不定義$axios.defaults.baseURL,那么默認的baseURL就是代理名稱,比如這里的gsafetyclound,生成的url就是服務(wù)器地址【本機就是localhost:8888】+代理名稱+具體的接口名稱,然后這里的代理名稱做了代理【因為是本地開發(fā),所以需要代理做跨域處理】,最終指向的就是target+具體的接口名稱
【注意】:這里的代理,只是一個插件,用于本地開發(fā)用的,打包之后這個就消失了
上生產(chǎn)環(huán)境就需要定義baseURL了,這個就是生產(chǎn)環(huán)境的服務(wù)地址,后面直接拼接口地址
生產(chǎn)模式:這里就不存在跨域了,直接拼接口地址
定義baseURL,生成的url就是baseURL+代理名稱+具體的接口名稱,這里需要去掉代理名稱,直接域名+接口地址就行了。
八、調(diào)接口,
utils里面的http.js插件,里面有baseURL: "/gsafetyclound",
plugins里面封裝的axios.js組件,封裝好了可以通過this.$axios.$GET來調(diào)接口,這里面也配置了baseURL,所以就覆蓋了上面的baseURL
九、本地使用live-server跑nuxt打包后的項目命令:
live-server --port=8080 --proxy='/remoteApi':'http://172.19.12.146:9898'
十、廠家標識是sourceId、用傳編碼是controlHost
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。