笔记
## 存到localStroage中的值不主动删不会消失
## 存到essionStroage中的值是关掉标签就没了
## 存到cookie中的根据设置时间来确定是否还存在
## 对数组的常用操作
判断数组中是否含有某个元素
arr.indexOf(某元素)：未找到则返回 -1。
array.findIndex()：返回第一个符合条件的数组元素的位置，如果所有元素都不符合条件，则返回-1
## 调取js中的方法等
#### 第一种
js中
页面中引用
页面中使用
#### 第二种
页面中引入
页面中使用
## index.js中写接口执行顺序问题
不使用vue封装的axios，使用原生的XMLHttpRequest
```js
let oReq = new XMLHttpRequest();
oReq.open("POST", baseServerUrl+"api/services/app/Login_OAuth/GetUserInfoByToken", false); // 同步请求
oReq.setRequestHeader("Content-type", "application/json");
oReq.send(JSON.stringify(parameter));//发送数据需要自定义，这里发送的是JSON结构
let res = oReq.responseText;//响应结果
```
## 日期比较
```js
const validateReturnTime = (rule,value,callback)=>{
if(value<this.innerInfo.signedDate){
return callback(new Error("合同完成日期要大于合同签订日期"));
}else{
callback();
}
}
```
```js
ruleValidate: {
finishDate:[validateReturnTime]
},
```
## iview DatePicker禁止选择今天之前的日期
## 序号自动添加
` Math.max(...lists.map(x => x.id));`
## 请求接口报错
405：请求方式错误，检查请求方式是post还是get
404：接口找不到，检查api.js中的接口地址是否正确
400：请求参数问题，检查参数数据类型
500：接口问题
## 动态路由页面跳转
#### 问题1
点击左侧菜单页面跳转不过去，并没有报错信息
###### 原因
router实例化之前未对route进行处理
###### 解决方案
应该router实例化之前对route进行处理的
#### 问题2
点击左侧菜单页面跳转不过去，并有一下报错信息
###### 原因
vue异步加载组件问题
后台管理配置菜单实际地址时，是这样配的
`@/view/personal_information/personal_information.vue`
将获取的路由处理时，是这样处理的
这个改变了@的意思 把@当成字符串了
#### 解决方案
后台配置菜单实际地址，从view开始配置，将@/去掉
`view/personal_information/personal_information.vue`
在处理路由时加上@/
## cookie和session和js-cookie的用法
#### cookie用法
`setCookie("username",user,30);`
`getCookie("username");`
#### session用法
`sessionStorage.setItem('userInfo', userInfo);`
`sessionStorage.getItem('userInfo')`
## js-cookie用法
`npm install js-cookie --save`
`import Cookies from 'js-cookie'`
`Cookies.set(USER_INFO, userInfo, { expires: cookieExpires || 1 })`
`Cookies.get(USER_INFO)`
## vue路由守卫及路由守卫无限循环问题详析
错误代码
```js
if (!store.state.user.token) {
window.location.href = "http://192.168.199.171:8081/login";
} else {
next({
name: "home" // 跳转到homeName页
})
}
```
会陷入死循环，原因：因为你的 next({ name: 'home')} 是相当于一个路由跳转，它会再次触发全局路由守卫，你又进入了全局路由守卫进行再次判断，如此循环。想要结束路由守卫，整段代码的逻辑必须由 next() 进行结尾
正确代码
```js
if(!store.state.user.token){
window.location.href = "http://192.168.199.171:8081/login";
} else if(token && to.name === LOGIN_PAGE_NAME) {
next({
name: "home" // 跳转到homeName页
})
}else{
next();
}
```
##判断一个对象是否为空
JSON.stringify(to.query)!="{}"
## vue将数据存到store里面
`import store from '@/store'`
`store.commit("setUserInfo",to.query.userInfo[0]);`
## url传参，参数是个对象
`window.location.href = document.referrer+"?token="+userInfo.result.access_token+"&userInfo="+JSON.stringify(userInfo);`
## 获取前页面地址
`document.referrer`
## 动态路由
## beforeEach无限循环问题
## push、join、slice不会改变原数组的值，concat、pop、shift、unshift都会改变原数组的值
## 判断值为null和undefined时
例：如果response.settings的值是null或undefined。就会返回默认值300
```js
const animationDuration = response.setting ?.animationDuration ?? 300
```
## signalr
## 打包之后修改地址配置
## 菜单无法显示中文名称
## 使用shijianzujianDatePicker，选值和传值不一致 @on-change取值
## render 函数的style设置无效
## 一个页面多次用得到同一个组件，数据被污染=》设置不同的ref
## 与U3D交互，编码问题
## websocket用法
## css的一种风格
## 引入定义使用组件规范
## 运行.vue文件
#### 全局安装 快速原型开发 编译.vue文件
`npm install -g @vue/cli-service-global`
#### 运行
`vue serve xx.vue`
如果文件时App.vue可省略`vue serve`
## 组件定义一般开头用大写
## 关于VUE的小贴士
## 获取组件中属性的值可以这样定义和使用
## 父组件向子组件传值，当数据是个对象是可以这样写
## props中验证
## 监听当前路由
## 在当前页面的另一个vue实例中访问当前页面的vue实例中的
## IIS部署后端
## render 可以写两个[]
## 路由跳转页面卡死，报错
#### 检查跳转的路由是否正确
## 数据渲染不出来
## 自定义验证
## 弹窗中有多个表单进行验证
## 2019-10-15
#### 父子组件双向绑定
## 2019-10-14
#### 嵌套表单验证
## 2019-10-10
#### 使用store中的值页面不进mounted时，使用计算属性
```js
<template>
<div id="app">
<!-- 头部开始 -->
<TopMenu class="topMenu" v-if="isShow"></TopMenu>
<!-- 头部结束 -->
<router-view/>
</div>
</template>
<script>
import "echarts-liquidfill/src/liquidFill.js";
import TopMenu from "./view/common/top_menu.vue";
export default {
name: 'App',
components:{
TopMenu
},
data(){
return {
}
},
computed:{
isShow(){
return this.$store.state.app.topMenuState
}
}
}
</script>
```
## 2019-10-09
#### iview 验证
```js
data() {
const validateConfirmPassWord = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入确认密码"));
} else if (value !== this.infoPass.passWord) {
callback("两次输入密码不一致");
} else {
callback();
}
};
return {
innerInfo:{},
ruleValidate: {
//表单验证
confirmPassWord: [validateConfirmPassWord]
},
};
},
```
#### qs
需要去了解
#### 新增、详情、编辑等状态管理可以使用这种方式
#### 弹窗
#### 字符串以逗号隔开，组成数组,取出最后一个元素
var a="1,3,4,5"
a.split(',').pop();
//获取数组的第一个元素
//a.split(',').shift();
####
#### 接口参数
## 2019-10-08
#### 调用别的地方的接口配置
config下面的index.js中配置
#### 使用
```js
import axios from '@/libs/api.request'
import config from '@/config';
const ManageCenterUrl = process.env.NODE_ENV === 'development' ? config.manageCenterServerUrl.dev : config.manageCenterServerUrl.pro
const ManageCenterServerUrl = `${ManageCenterUrl}api/services/app`
/**
* chenwan
* 新增
* 2019-08-21
* @param {*} parameter
*/
export const InsertData = (params) => {
return axios.request({
url: `${ManageCenterServerUrl}/Organization/Create`,
data: params,
method: 'post'
})
}
```
## 2019-09-20
#### map转数组
[...map]
#### 数组转map
new Map(arr)
#### img标签动态绑定src图片不出来
地址前面要加http://
## 2019-09-19
#### 判断一个数组中的某个值在另一个数组中存不存在
1.filter
2.includes
## 2019-09-11
#### 1.发布之后的exe、外网访问，维护任务、值班管理、人员进出及值班统计中的数据字典获取不到问题
## 2019-09-09
问题记录：
#### 1.
```js
getNowYear() {
let date = new Date();
return `${date.getFullYear()}`;
},
```
```js
_this.dataList.forEach((e,index) => {
if (e.isSelect) {
_this.searchList.push({ yearData: _this.getNowYear() })
}else{
_this.searchList.push({})
}
});
```
`yearData: Tue Jan 01 2019 00:00:00 GMT+0800 `
#### 2.修改完之后的echarts组件传值数据有误
push前先清空之前的数据
#### 3.数据校验问题
新增完数据之后，进行盘点选到了数据但是总是提醒请选择数据（校验）
当我选择其他本来已有的数据再去选新增的那条数据就不会提示了
当我选择完之后清空选择的，选择了其他数据之后后面的实存数和账存数提示不能为空
#### 报警管理-处理时，选择专业队必填
#### 设备故障报警在故障和任务界面处理之后备品备件的账存数变成最新的了
#### 立即执行函数:
```js
(function(){
console.log(111)
})()
```
#### 闭包:
```js
var add=(function(){
var count=0;
return function(){return count++}
})()
```
#### $set:
`this.$set(Object,"propotype","value")`
#### sync:
`$emit("update:addmodal",false)`
#### instaceof:
引用类型：（Object、Array、Function）值类型：string、number、boolean、undefined、null
#### 除了数组和类数组，所有对象的非空判断都可以直接用if套起来或者 if(!!obj)来进行显式bool转换
#### 数组
```js
a=[1,2,3,4]
a.toString();//"1,2,3,4"
```
#### Array.prototype.find
#### Map,时间复杂度：O(1)
#### object.vlaues()
#### vuex
#### aysnc
#### promise
#### watch:复杂类型监听
```js
watch:{
info:{
handler(val){
debugger;
this.innerInfo=this.$helper.deepClone(val)
},
deep:true,
}
},
```
#### Promise
```js
let promises=[];
promises.push(this.$refs.fromValue0.validate());
this.$refs.fromValue.forEach(e=>promises.push(e.validate()));
let res = await Promise.all(promises);
```
#### array.prototype.every()
array.every(e=>e)
#### 对象的属性可以用[]（方括号）或者.（点运算符）来取··
#### eval() //将字符串转变为JS代码来执行