- 博客(15)
- 收藏
- 关注
RSS订阅原创 vue路由导航守卫的使用
路由导航守卫,顾名思义就是像守卫 一样对路由进行监听判断,验证身份使用路由导航守卫可以避免用户不进行登陆操作而直接访问到后台界面,使用方法:在路由文件中导出路由对象之前添加一个导航守卫,有三个参数,分别是到哪个路由去,从哪个路由来,next跳转下面代码是判断是否去的是login界面,如果去login界面的话,直接调用next函数放行,如果去其他界面的话,需要验证本地存储中是否有登录成功后生成的token字段,如果有,则表示用户已登录成功,可以进行正常调整,否则表示用户 没有登录进行身份验证,此时调用
2020-09-23 08:40:39
158
原创 vue数据劫持原理
在vue生命周期中的 created阶段,data中声明的数据,都会被getter/setter劫持并赋值到this组件实例上面,这也是在其他组件,如计算属性compute,方法methods,侦听器watch中能够直接使用this.数据而不是data.数据的原因;原理:利用Object.defineProperty()方法对数据进行处理:Object.defineProperty():可以 定义新属性或修改原有的属性;在操作vue数据之前,先来操作一个对象中的数据来进行体验:目的是令obj中da
2020-09-18 19:52:26
1450
原创 在axios中使用async/await对promise进行优化
利用promise解决了发送ajax的回调地狱问题,是代码看起来简洁了许多;但是如果要按顺序发送多次请求,还是有些麻烦的,因为我们需要一直去.then来得到结果,所以在ES7中有了一种新的语法:async/await,可以更加方便的进行异步操作,先看一下上面的请求如果在axios中用这个语法来写是什么效果: axios.defaults.baseURL = 'http://localhost:3000'; async function queryData() {
2020-09-17 16:03:08
1223
原创 promise解决回调地狱问题
由于ajax请求为异步请求,所以无法保证请求返回时间顺序,为了保证请求的有序进行(或者说下次请求需要用到上次请求得到的数据)这样一来就必须把后面的请求嵌套在上一次请求的内部,以保证顺序,回调地狱:代码的可阅读性非常差;为了解决这个问题,有了promise对象Promise是异步编程的一种解决方案,从语法上讲, Promise是一个对象,从它可以获取异步操作的消息使用 Promise主要有以下好处1,可以避免多层异步调用嵌套问题(回调地狱)2,Promise对象提供了简洁的API,使得控制
2020-09-17 14:42:28
635
原创 axios拦截器
总结1,拦截器拦截器分为请求拦截器和响应拦截器1.1请求拦截器并非将请求拦截下来,而是拦截到所有请求之后,对请求做一个统一的处理,之后再进行发送;请求拦截器的作用就是在请求发送前对请求添加一个统一的逻辑:例如给每个请求体都加上token,只需要设置一个请求拦截器具体用法: //请求拦截器axios.interceptors.requset.use(function(config){ console.log( config.url); config.header.mytoken='你好
2020-09-16 19:00:24
193
原创 防抖和节流
防抖:当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时用户在输入框中输入信息将要进行搜索时,可以通过用户输入的内容来对用户进行智能推荐,此时需要客户端根据用户输入的信息来向服务器发送请求得到数据;一般我们通过键盘弹起事件来判断用户是否进行了输入,然后获取输入框内容,那么问题来了,用户使用键盘进行输入,是不是每按下一个键,就会发送一次请求呢?是这样的,只要用户进行键盘输入就会触发键盘弹起事件,从而发送请求,这样就导致了发
2020-09-10 11:08:07
120
原创 使用nodejs写接口连接数据库
如何在服务器端写接口?创建服务器1.1导入express包;const express=require(‘express’);1.2 创建服务器实例:const app=express();要注意的是:在路由之前** 创建解决跨域问题的中间件:const cors=require(‘cors’)app.use(core())** 创建处理表单数据的中间件:app.use (express.json())app.use(express.urlencoded({extended:fa
2020-09-09 20:18:44
1704
原创 vue中v-model数据双向绑定底层原理
什么是双向数据绑定首先存在双方：一方是界面中显示的数据，另一方是vue中的数据vue中的数据变化，显示的数据跟着变化显示的数据变化，vue中的数据跟着变化vue中,通过v-module指令可以实现双向绑定最简单的例子: <div id="app"> <div>{{msg}}</div> <div> <!-- 使用model指令进行数据的双向绑定 -->
2020-09-08 22:43:10
2763
原创 express解析数据方式
使用express可以快速创建一个服务器;express中含有两个常用的内置中间件用于解析数据:1,express.json,用于解析JSON格式的请求体数据(有兼容性,仅在4.16.0+版本可用)2,express.unlencoded,用于解析URL-encoded格式的请求体数据(有兼容性,仅在4.16.0+版本可用);当请求体的数据格式为json格式时需要在服务器端路由之前配置解析数据的中间件:app.use(express.json())即可正常接收;当请求体的数据格式为urlenco
2020-09-08 21:18:07
785
原创 template模板引擎的原理,并手动封装
1,核心原理利用正则表达式对字符进行替换;正则替换方法:https://blog.csdn.net/weixin_44134588/article/details/108327043封装的模板引擎函数:function template(id, data) { let str = document.getElementById('tpl-user').innerHTML; console.log(str); let pattern = /{{\s*([a-zA-Z]+)\s*
2020-09-07 22:59:30
489
原创 nodejs入门学习总结
1,如何创建一个最简单的服务器?**原生:// 1. 导入 http 模块const http = require('http')// 2. 创建 web 服务器实例const server = http.createServer()// 3. 为服务器实例绑定 request 事件，监听客户端的请求server.on('request', function (req, res) { console.log('Someone visit our web server.')})// 4.
2020-09-05 20:14:32
172
原创 浅拷贝和深拷贝
浅拷贝:只拷贝第一层属性,更深层次的属性是对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。注意：当内存销毁的时候，指向对象的指针，必须重新定义，才能够使用;改变更深层次赋值对象的属性时,原对象的属性也会改变方法一:遍历对象for (var k in obj){}方法二:Object.assign(o, obj); assign es6新增语法糖,第一个参数为拷贝后的对象,第二个参数为要拷贝的对象, let obj = { uname: '张三',
2020-09-05 13:49:46
165
原创 制作出0.5px的线
方法一:利用css3中的缩放: <style> * { margin: 0; padding: 0; } .box { width: 800px; height: 200px; margin: 100px auto; /* background-color: red; */ te
2020-09-03 16:48:43
171
原创 js常见面试题及简单回答
一 h5新特性:1, 新增了语义化标签header,footer,article,aside,section,nav,hgroup,time,main等2,新增表单控件email,tel,url,number,range,search,color,3 表单属性palceholder 输入框提示autofocus 表单获取输入焦点required 必填字段4 本地存储4.1localStorage储存时间:除非手动清除,永久保存,大小:20MB4.2 sessionsStorage
2020-09-03 16:20:21
1019
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人