雲服後臺代碼記錄

時間 2020-04-15

標籤後臺代碼記錄简体版

原文原文鏈接

1、頁面有不少圖表的時候，先定義一個圖表對象HOME_CHART，而後每個圖表都是這個對象下面的一個屬性
如：
//服務模式分佈
HOME_CHART.serviceType = echarts.init(document.getElementById('service-type'));
HOME_CHART.serviceType.setOption({})vue

// resize 從新計算框架
window.addEventListener('resize',function() {
HOME_CHART.hardwareType.resize();
HOME_CHART.serviceType.resize();
HOME_CHART.newCompany.resize();
});node

2、用戶user和角色role的區別
用戶有不少個，角色只有那麼幾個，好比超級管理員，系統配置管理員等等
每一個用戶只有一個角色，而一個角色能夠有不少用戶
createUserId就是當前登陸用戶的userIdios

2、左邊菜單欄的顯示【資源就是用戶獲取到的權限，便可以看到的菜單】
1.登陸的時候，獲取到用戶的userId，經過接口，findUserByUserId，獲取到用戶的roleId，而後，經過接口findResourceByRoleId，獲取到用戶的菜單權限web

4、角色管理
首先，經過接口findRoleListBySysCodeAndPager，獲取到角色的所有信息，展現在頁面的列表中
設置權限：首先經過接口findTreeBySysCode，獲取到所有資源，也就是所有菜單，顯示在樹形結構中
而後經過接口findResourceByRoleId，使用用戶的roleId，顯示用戶已經擁有的權限，即勾選中已經擁有的權限勾選框
再而後，經過giveRolesForResource，更改用戶得到的資源npm

5、監聽localstorage
window.addEventListener("storage",function(event){
if(event.newValue!=null){
console.log(event.key);
console.log(event.newValue);
dualMessageBack(event.key,event.newValue);
}
});element-ui

6、今天作登陸顯示用戶名的時候，因爲先跳轉了頁面，後存本地緩存，致使進去獲取不到用戶名，由於先跳轉頁面了，此時還未進行本地緩存存儲操做，致使獲取不到值json

把跳轉頁面放在存值以後便可axios

if (res.data.code == "success") {
    this._Storage.setObj("userObj", "userObj", res.data.data);
    this.$router.push({
        name: "index"
    });
}

7、nextTick，頁面加載完成以後調用裏面的方法，至關於setTimeoutapi

8、表單校驗的時候，
<el-form
class="dialog-form-style"
:label-position="labelPosition"
label-width="120px"
:rules="rules"
ref="plan"
:model="plan" >
<el-form-item label="手機號" prop="userTelphone">
<el-input v-model.trim="plan.userTelphone"></el-input>
</el-form-item>
</el-form>跨域

prop裏面的userTelphone和v-model.trim裏面的必須一致，必須都爲userTelphone
<el-form-item label="手機號" prop="phone">
<el-input v-model.trim="plan.userTelphone"></el-input>
</el-form-item>
這樣是行不通的

rules:{
userTelphone:[
{ required: true, message: "手機號不能爲空", trigger: "blur" },
{
pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
message: "請輸入正確的手機號"
}
]
}

9、

發如今輸入框內，鼠標從左往右滑動，會致使彈框自動關閉
<el-dialog :title="optTitle" :visible.sync="dialogVisible" :close-on-click-modal="clickModal">
加上close-on-click-modal屬性，clickModal爲false，注意是要用:號進行綁定

close-on-click-modal 是否能夠經過點擊 modal 關閉 Dialog boolean — true

10、遞歸刪除某一條元素

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)

最終取到的值是沒有按鈕的數據

js遞歸遍歷數組
js遞歸循環數組

11、

<el-form-item label="單位名稱:" :label-width="labelWidth">
<el-select placeholder="所有" filterable v-model.trim="formData.unitVal">
<el-option
v-for="(item,index) in units"
:key="index"
:label="item.label"
:value="item.value"

</el-option>
</el-select>
</el-form-item>

不加filterable，在下拉框只能選擇，加了filterable，下拉框既能夠選，也能夠手動輸入內容進行搜索

12、vue 多個按鈕，每次只能選擇一個，按鈕上附帶數據

<el-form-item label="發佈對象:" :label-width="labelWidth">
                    <el-button v-for="(item,index) in btnArr" :class="{ isActive:isChange == index}" @click="isChoose(index,item)">{{item.name}}</el-button>
                </el-form-item>

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;
    }
},

十3、vue 能夠同時選擇多個按鈕，獲取組合信息
參考：資訊管理

十4、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': ''
      },
    },
}

一是解決跨域的問題，二是使用代理，可使用多個服務，根據前綴的不一樣使用不一樣的服務

本地開發模式：
不定義$axios.defaults.baseURL，那麼默認的baseURL就是代理名稱，好比這裏的gsafetyclound，生成的url就是服務器地址【本機就是localhost:8888】+代理名稱+具體的接口名稱，而後這裏的代理名稱作了代理【由於是本地開發，因此須要代理作跨域處理】，最終指向的就是target+具體的接口名稱
【注意】：這裏的代理，只是一個插件，用於本地開發用的，打包以後這個就消失了
上生產環境就須要定義baseURL了，這個就是生產環境的服務地址，後面直接拼接口地址

生產模式：這裏就不存在跨域了，直接拼接口地址
定義baseURL，生成的url就是baseURL+代理名稱+具體的接口名稱，這裏須要去掉代理名稱，直接域名+接口地址就好了。

8、調接口，
utils裏面的http.js插件，裏面有baseURL: "/gsafetyclound",
plugins裏面封裝的axios.js組件，封裝好了能夠經過this.$axios.$GET來調接口，這裏面也配置了baseURL，因此就覆蓋了上面的baseURL

9、本地使用live-server跑nuxt打包後的項目命令：
live-server --port=8080 --proxy='/remoteApi':'http://172.19.12.146:9898'

10、廠家標識是sourceId、用傳編碼是controlHost

11、刪除package.json裏面的element-ui版本號，刪除node_modules，npm install 而後 npm i element-ui -S

12、element 時間選擇器

//獲取當月
            //獲取新的時間(）
            let date = new Date()
            //獲取當前時間的年份轉爲字符串
            let year = date.getFullYear().toString()   //'2019'
            //獲取月份，因爲月份從0開始，此處要加1，判斷是否小於10，若是是在字符串前面拼接'0'
            let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString()  //'04'
            //獲取天，判斷是否小於10，若是是在字符串前面拼接'0'
            let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString()  //'12'
            //字符串拼接，開始時間，結束時間
            let end = year + '-' + month + '-' + da  //當天'2019-04-12'
            let  beg= year + '-' + month + '-01'    //當月第一天'2019-04-01'
            this.serchForm.DataSelect = [beg,end] //將值設置給插件綁定的數據
            this.serchForm.beginDate = beg;
        this.serchForm.endDate = end;

//獲取最近7天
                let date1 = new Date();
                let year1 = date1.getFullYear().toString();
                let month1 = date1.getMonth()+1 < 10 ? '0'+(date1.getMonth()+1).toString():(date1.getMonth()+1).toString()  //'04'
                let day1 = date1.getDate() < 10 ? '0'+date1.getDate().toString():date1.getDate().toString()  //'12'
        let time1 = year1 + '-' + month1 + '-' + day1//time1表示當前時間
        let date2 = new Date(date1);
        date2.setDate(date1.getDate()-7);
        let year2 = date2.getFullYear().toString();
                let month2 = date2.getMonth()+1 < 10 ? '0'+(date2.getMonth()+1).toString():(date2.getMonth()+1).toString()  //'04'
                let day2 = date2.getDate() < 10 ? '0'+date2.getDate().toString():date2.getDate().toString()  //'12'
        let time2 = year2 + '-' + month2 + '-' + day2;//time2表示往前推7天時間
                this.serchForm.DataSelect = [time2,time1] //將值設置給插件綁定的數據
//        this.serchForm.beginDate = time2;
//      this.serchForm.endDate = time1;

十3、返回的字段爲數字，須要轉爲對應的狀態值，可使用computed或者methods定義方法
舉個栗子：

<el-table-column
    label="報警點位 （二次碼）"
    prop="twoCode"
    show-overflow-tooltip
    align="left"
    min-width="10%"
>
    <template slot-scope="scope">
            <div>{{showLabel(scope.row.la_make,scope.row.la_loop,scope.row.la_point)}}</div>
    </template>
</el-table-column>

//在computed裏面定義showLabel

computed:{
    showLabel(la_make,la_loop,la_point){
        return function(la_make,la_loop,la_point){
            if (la_make && la_loop && la_point) {
                    return la_make + '號主機' + la_loop + '迴路' + la_point + '點位';
                } else {
                    return '--';
                }
        }
    },
}

//在methods裏面定義showLabel
mtthods:{
    showLabel(la_make,la_loop,la_point){
        if (la_make && la_loop && la_point) {
                return la_make + '號主機' + la_loop + '迴路' + la_point + '點位';
            } else {
                return '--';
            }
    },
}

理解：關於兩者的不一樣，看看看見了一個說明，細細品一下

computed是屬性調用，而methods是函數調用，
這意味着在HTML的插值裏，computed定義的方法是以屬性訪問的形式來調用，如 {{reversedMessageComputed}}
methods定義的方法，則要加上 () 來調用，如 {{reversedNameMethod()}} ，不然視圖中會渲染出以下內容
function () { [native code] }

在上面的調用裏，使用的是showLabel(scope.row.la_make,scope.row.la_loop,scope.row.la_point)，後面是有括號（）的，因此在computed裏面實際上是不能夠調用的，會出現未定義，由於是屬性調用，不能加括號

而經過曲線救國，在computed是返回了一個函數，因此能夠加括號調用

若是直接寫在methods裏面，那麼有括號，固然就能夠直接調用了，由於寫在methods裏面就表明了是一個函數