标签搜索
搜索到
152
篇与
的结果
-
ES6 函数参数解构 解构赋值也可以发生在函数传参的时候，ES6中函数参数的灵活性大大提高了。函数参数的解构既可以用数组形式，也可以用对象形式，先看两个简单的例子：[javascript] view plain copy function foo( [ x, y ] ) { console.log( x + " " +y ); } foo( [ 1, 2 ] ); // 1 2 foo( [ 1 ] ); // 1 undefined foo( [] ); function bar( { x, y:YY } ) { console.log( x + " " + YY ); } bar( { y: 1, x: 2 } ); // 2 1 bar( { y: 42 } ); // undefined 42 bar( {} ); // undefined undefined 数组解构的时候还可以应用rest操作符：[javascript] view plain copy function f3([ x, y, ...z], ...w) { console.log( x + y + z + w ); } f3( [] ); // undefined undefined [] [] f3( [1,2,3,4], 5, 6 ); // 1 2 [3,4] [5,6] 同样函数参数的解构也可以有默认值，看下面的例子：[javascript] view plain copy function f({ x = 10 } = {}, { y } = { y: 10 }) { console.log( x + " " + y +"\n"); } f(); // 10 10 f( undefined, undefined ); // 10 10 f( {}, undefined ); // 10 10 f( {}, {} ); // 10 undefined f( undefined, {} ); // 10 undefined f( { x: 2 }, { y: 3 } ); // 2 3 数组参数解构也可以有默认值，但是如果传入undefined的话，将会报异常，因为undefined不能转换成iterator：[javascript] view plain copy function f([ x=2, y=3, z ]) { console.log(x + " " +y + " " + z + "\n"); } //f();//# Exception: f: cannot coerce undefined to object! f([1]);//1 3 undefined f([1,2]);//1 2 undefined f([1,2,3]);//1 2 3 f([1,2,3,4]);//1 2 3 下面看一下参数函数默认值的两种形式的不同：[javascript] view plain copy function move1({x=0, y=0} = {}) { console.log(x + " " + y + "\n"); } function move2({x, y} = { x: 0, y: 0 }) { console.log(x + " " + y + "\n"); } move1({x: 3, y: 8}); // 3 8 move1({x: 3}); // 3 0 move1({}); //0 0 move1(); //0 0 move1({z:3})//0 0 console.log("\n"); move2({x: 3, y: 8}); //3 8 move2({x: 3}); //3 undefined move2({}); //undefined undefined move2(); //0 0 move2({z:3})//undefined undefined 通过结果可以看出，采用{x=0,y=0} = {}的形式，无论怎么传参，都能保证x，y的默认值是0，但是采用{x,y} = {x:0,y:0}的形式，如果传入的参数值不是undefined，那么将不能有效保证函数参数默认值是0，这里需要仔细区分两者的不同。 -
axios 拦截 , 登陆验证, token 验证 第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的 }, component: Repository第二步:router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.state.token) { // 通过vuex state获取当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next(); }登录拦截到这里就结束了吗？并没有。这种方式只是简单的前端路由控制，并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)还有一种情况便是：当前token失效了，但是token依然保存在本地。这时候你去访问需要登录权限的路由时，实际上应该让用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。第三步: 拦截器 (要想统一处理所有http请求和响应，就得用上 axios 的拦截器。)每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized（未授权） ，让用户重新登录。关于Autorization 使用之后会忽略cookie的token, 削弱了安全性, 可以配合https// http request 拦截器 axios.interceptors.request.use( config => { if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 拦截器 axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: 401 旌旗 灵医 , 只用[授权] 旌旗的医生 才是 灵医 // 返回 401 清除token信息并跳转到登录页面 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的错误信息 }); 完整的方法见 /src/http.js .通过上面这几步，就可以在前端实现登录拦截了。 登出 功能也就很简单，只需要把当前token清除，再跳转到首页即可。githubimport axios from 'axios' import Qs from 'qs'; import 'babel-polyfill'; import router from './router'; import { successMessage, warningMessage, errorMessage } from '@/util/message.js'; const handleErrorResponse = (response, config) => { if (response) { switch (response.status) { case 401: // 未登录或过期，跳至登录页 if (router.currentRoute.path !== '/login') { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); } break; default: if(config && config.silent === true) break; if (response.data && response.data.success === false) errorMessage(response.data.message.substr(0, 60)); else errorMessage('服务器发生 ' + response.status + ' 错误.'); // errorMessage('服务器发生 ' + error.response.status + ' 错误.'); break; } } else if (!config || config.silent !== true) { errorMessage("服务器连接失败"); } }; // http response 拦截器 axios.interceptors.response.use( response => { return response; }, error => { handleErrorResponse(error.response, error.config); return Promise.reject(error) // 返回接口返回的错误信息 }); // ajax 全局错误处理 (function($){ $.ajaxSetup && $.ajaxSetup({ error: function(response) { handleErrorResponse(response.status && response, this); } }); })(jQuery); export default axios;
-
-
在Windows 10中启用/禁用设备驱动程序签名 Option 1 – Command to Enable or DisableClick the “Start” button.Type “command“.Right-click on “Command Prompt” and select “Run As Administrator“.Do one of the following:To disable device driver signing, type “BCDEDIT /set nointegritychecks ON” then press “Enter“To enable device driver signing, type “BCDEDIT /set nointegritychecks OFF” then press “Enter“
-
-
css笔记一 在编写样式中经常遇见, 尺寸的计算.css3中提供了一个计算函数calc(),它支持(+ - * /).如:top: calc(50% - 30%);注意的是在运算符前后都得添加一个空格,否则无效.(支持IE9及以上)去掉input[type="number"]的默认样式input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 利用媒体查询分辨横竖屏@media screen and (orientation:portrait) { /* css[竖向定义样式] */ ...... } @media screen and (orientation:landscape) { /* css[横向定义样式] */ ...... }去手机端点击出现的高亮框-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */ css居中的方式利用伪类使元素居中div:after{ content:""; display:inline-block; height:100%; vertical-align: middle; } 利用定位//这里要使用到css的子绝父相 div{ position:relative; top:0; left:0; right:0; bottom:0; margin:auto; }
-
ES6 const const(常量)定义的变量不可修改.注意javascript的垃圾回收机制不会回收常量.常量的声明必须赋予初值.作用域为块级作用域.那么我们用const定义一个对象呢?const obj = {name : "小米",age : 18}; obj = "小米" //TypeError: Assignment to constant variable.这里obj不可重写.const obj = {name : "小米",age : 18}; obj.age = 20; console.log(obj.age); //20总结:在用const定义应用类型时(对象,数组...)时,不可修改本身,但可以修改对象的属性值以及数组的元素.发现了这个特性, 你可以发现有很多妙用.
-
vue兄弟主件的通讯 情况如下:两个兄弟主件(A,B),在A主件中调用B主件的中的方法实现通讯.在这里我们要借助vue的自定义事件和自定义事件监听机制,vm.$on( event, callback )和vm.emit().我们必须把B主件引用(ref)在父主件上,这样做的目的就是在父主件中可以调用子主件的方法.那么现在只要在主件A调用父主件的方法就可以解决问题.就实现了一个调用链(A->父->B).在父主件监听A主件的自定义事件vm.$on( event, callback ).在A主件内部触发自定义事件vm.emit( event ).在父主件内的监听回调中调用主件B的方法.这样就实现了主件A调用主件B的方法,也就实现了兄弟主件的通讯.
-
XML的解析new DOMParser.parseFromString() 解析 XML 标记来创建一个文档。构造函数new DOMParser()说明DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法：var doc = (new DOMParser()).parseFromString(text)IE 不支持 DOMParser 对象。相反，它支持使用 Document.loadXML() 的 XML 解析。注意，XMLHttpRequest 对象也可以解析 XML 文档。参阅 XMLHttpRequest 的 responseXML 属性。DOMParser.parseFromString()解析 XML 标记语法parseFromString(text, contentType)text 参数是要解析的 XML 标记。contentType 是文本的内容类型。可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。返回值保存 text 解析后表示的一个 Document 对象。参阅 Document.loadXML()，了解这个方法的一个特定于 IE 的替代
-
牛逼的Object.defineProperty var obj = { name: '小米'}; Object.defineProperty(obj, "age", { value:18, //属性值 writable:true,//是否可写 enumerable: true,//该属性是否可以枚举 configurable: true,//属性的总开关(如果是false,下次设置将无效) }); Object.defineProperty(obj,"age",{ //get set 方法不能同时和 value writable 存在 get(){ return 22 //必须返回一个 }, set(val){ console.log(val) } }) obj.age=24
