云服后台代码记录-创新互联
一、页面有很多图表的时候，先定义一个图表对象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
八、表单校验的时候，
: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: "请输入正确的手机号"
}
]
}
九、
发现在输入框内，鼠标从左往右滑动，会导致弹框自动关闭
加上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递归循环数组
十一、
:key="index"
:label="item.label"
:value="item.value"
不加filterable，在下拉框只能选择，加了filterable，下拉框既可以选，也可以手动输入内容进行搜索
十二、vue 多个按钮，每次只能选择一个，按钮上附带数据
{{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': ''
},
},
}一是解决跨域的问题，二是使用代理，可以使用多个服务，根据前缀的不同使用不同的服务
本地开发模式：
不定义$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
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前名称：云服后台代码记录-创新互联
URL标题：http://6mz.cn/article/dhopgj.html