云服后台代码记录
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里面就表明了是一个函数
- 1. 码云上传代码简单记录
- 2. 编写后台服务代码
- 3. Angular 后台报错记录
- 4. matlab代码记录
- 5. mysql代码记录
- 6. mathdqn代码记录
- 7. leetcode代码记录
- 8. 代码bug记录
- 9. 阿里云短信验证码后台代码
- 10. java后台写javascript代码
- 更多相关文章...
- • Markdown 代码 - Markdown 教程
- • ADO 添加记录 - ADO 教程
- • IntelliJ IDEA代码格式化设置
- • Tomcat学习笔记（史上最全tomcat学习笔记）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 码云上传代码简单记录
- 2. 编写后台服务代码
- 3. Angular 后台报错记录
- 4. matlab代码记录
- 5. mysql代码记录
- 6. mathdqn代码记录
- 7. leetcode代码记录
- 8. 代码bug记录
- 9. 阿里云短信验证码后台代码
- 10. java后台写javascript代码