1.package.json文件版本的问题
"5.0.3" //表示安装指定的5.0.3
"~5.0.3"//表示安装5.0.x中最新的版本
"^5.0.3"//表示安装5.x.x中最新的版本
2.object.key()语法
Object.keys(obj) 参数：要返回其枚举自身属性的对象 返回值：一个表示给定对象的所有可枚举属性的字符串数组
在实际开发中，我们有时需要知道对象的所有属性; ES5 引入了Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。
- 处理对象，返回可枚举的属性数组
let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person) // ["name", "age", "address","getName"]
- 处理数组，返回索引值数组
let arr = [1,2,3,4,5,6]
Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]
3.findIndex() 方法
- 返回数组中通过测试的第一个元素的索引（作为函数提供）。
- findIndex() 方法对数组中存在的每个元素执行一次函数：
- 如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）。 否则返回 -1 注释：findIndex() 不会为没有值的数组元素执行函数。
注释：findIndex() 不会改变原始数组。
var arr2 = [1,18,2,99,666,44,66];
var flag2 = arr2.findIndex(item => {
return item > 50;
});
console.log(flag2) // 得到： 3
4. Object.assign()
该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。
Object.assign(target, ...sources)
参数： target--->目标对象
source--->源对象
返回值：target，即目标对象
1.使用示例
var target={name:'guxin',age:25};
var source={state:'single'}
var result=Object.assign(target,source);
console.log(target,target==result);
//{ name: 'guxin', age: 25, state: 'single' } true
4.JSON.stringify()
该方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify(value[, replacer[, space]])
参数说明：
-
value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。
-
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
-
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
#####返回值：
返回包含 JSON 文本的字符串。
6. JSON.parse()
该方法将数据转换为 JavaScript 对象。
JSON.parse(text[, reviver]) |
|---|
参数说明：
- text:必需， 一个有效的 JSON 字符串。
- reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
7.登录权限
1.下载cookie插件
npm install js-cookie
2.引入cookie
import Cookie from 'js-cookie'
set 方法设置cookie,remove,删除具体的某一个cookie，get获取cookie的某一个值。
login界面
// 登录
submit() {
// token信息
// const token = Mock.Random.guid()//调用mock方法,获取token
// 从token信息存入cookie用于不同页面的通信
//Cookie.set('token', token);
// 跳转到首页
//this.$router.push('/home')
submit() {
/*validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise*/
// 1.校验通过
this.$refs.form.validate((valid) => {
if (valid) {
getMenu(this.form).then(({ data }) => {
console.log(data);
if (data.code === 20000) {
Cookie.set('token', data.data.token);
// 跳转到首页
this.$router.push('/home')
} else {
this.$message.error(data.data.message);
}
})
}
})
}
main.js
// 添加全局前置路由导航
router.beforeEach((to, from, next) => {
// 判断token存不存在
const token = Cookies.get("token")
// 如果token不存在，说明当前用户是未登录，应该跳转至登录
if (!token && to.name !== 'login') {
next({ name: "login" })
} else if (token && to.name === 'login') {
// token存在，说明用户登录，此时跳转至首页
next({ name: 'home' })
} else {
next();
}
})
8.退出登录
9.菜单权限
- 不同的账号登录有不同的菜单权限
- 通过url输入地址来显示页面
- 对应菜单的数据在不同页面之间的数据通信
三种方案：
-
写死：直接注册所有的路由，url->components的映射关系有注册，但存在一个弊端，用户手动更改路径可以查看，其他没有权限的组件。
-
在前端把不同的角色注册不同的路由，supermain:[{},{},{}],admin:[{},{}]，用户登录拿到用户信息，动态的加载对应的数组，再把对应的数组放到main.routes里面。但也有一个弊端：新增角色时，修改前端代码，重新部署。
-
在拿到菜单之后，动态生成路由映射。菜单的url对应路由里面的path，path在对应我们的components，根据映射关系动态生成数组的routes，动态添加到main的路由的children里面。
9. map（）
map() 方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
因为map生成一个新数组，当你不打算使用返回的新数组却使用map是违背设计初衷的，请用forEach或者for-of替代。你不该使用map: A)你不打算使用返回的新数组，或/且 B) 你没有从回调函数中返回值。
callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。
var map = Array.prototype.map
var a = map.call("Hello World", function(x) {
return x.charCodeAt(0);
})
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
