云服后台代码记录
更新:HHH   时间:2023-1-7


一、页面有很多图表的时候,先定义一个图表对象HOME_CHART,然后每一个图表都是这个对象下面的一个属性
如:
//服务模式分布
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的区别
用户有很多个,角色只有那么几个,比如超级管理员,系统配置管理员等等
每个用户只有一个角色,而一个角色可以有很多用户
createUserId就是当前登录用户的userId

二、左边菜单栏的显示【资源就是用户获取到的权限,即可以看到的菜单】
1.登录的时候,获取到用户的userId,通过接口,findUserByUserId,获取到用户的roleId,然后,通过接口findResourceByRoleId,获取到用户的菜单权限

四、角色管理
首先,通过接口findRoleListBySysCodeAndPager,获取到角色的全部信息,展示在页面的列表中
设置权限:首先通过接口findTreeBySysCode,获取到全部资源,也就是全部菜单,显示在树形结构中
然后通过接口findResourceByRoleId,使用用户的roleId,显示用户已经拥有的权限,即勾选中已经拥有的权限勾选框
再然后,通过giveRolesForResource,更改用户获得的资源

五、监听localstorage
window.addEventListener("storage",function(event){
if(event.newValue!=null){
console.log(event.key);
console.log(event.newValue);
dualMessageBack(event.key,event.newValue);
}
});

六、今天做登录显示用户名的时候,由于先跳转了页面,后存本地缓存,导致进去获取不到用户名,因为先跳转页面了,此时还未进行本地缓存存储操作,导致获取不到值

把跳转页面放在存值之后即可

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

七、nextTick,页面加载完成之后调用里面的方法,相当于setTimeout

八、表单校验的时候,
<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: "请输入正确的手机号"
}
]
}

九、

发现在输入框内,鼠标从左往右滑动,会导致弹框自动关闭
<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

十、递归删除某一条元素

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递归循环数组

十一、

<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,下拉框既可以选,也可以手动输入内容进行搜索

十二、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;
    }
},

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

一是解决跨域的问题,二是使用代理,可以使用多个服务,根据前缀的不同使用不同的服务

本地开发模式:
不定义$axios.defaults.baseURL,那么默认的baseURL就是代理名称,比如这里的gsafetyclound,生成的url就是服务器地址【本机就是localhost:8888】+代理名称+具体的接口名称,然后这里的代理名称做了代理【因为是本地开发,所以需要代理做跨域处理】,最终指向的就是target+具体的接口名称
【注意】:这里的代理,只是一个插件,用于本地开发用的,打包之后这个就消失了
上生产环境就需要定义baseURL了,这个就是生产环境的服务地址,后面直接拼接口地址

生产模式:这里就不存在跨域了,直接拼接口地址
定义baseURL,生成的url就是baseURL+代理名称+具体的接口名称,这里需要去掉代理名称,直接域名+接口地址就行了。

八、调接口,
utils里面的http.js插件,里面有baseURL: "/gsafetyclound",
plugins里面封装的axios.js组件,封装好了可以通过this.$axios.$GET来调接口,这里面也配置了baseURL,所以就覆盖了上面的baseURL

九、本地使用live-server跑nuxt打包后的项目命令:
live-server --port=8080 --proxy='/remoteApi':'http://172.19.12.146:9898'

十、厂家标识是sourceId、用传编码是controlHost

返回web开发教程...