肥林の仓库

mock.js学习mock初识: mock是一种模拟后端接口的解决方案,能够让我们提前调用模拟接口,完成前端开发,本质上是一个第三方的模块 mock官网 项目当中mock替换后端接口请求的流程图[过程]: mock的优点: 前后端分离:让前端工程师独立于后端进行开发 开发无侵入:不需要更改现有的代码就可以拦截ajax请求,返回模拟的响应数据 数据类型丰富:`支持生成司机的文本,数字,布尔值,日期,邮箱,链接,图片,颜色等… 增加单元测试的真实性:通过随机数据,模拟各种场景 用法简单:符合直接的接口 方便扩展:支持扩展更多的数据类型,支持自定义函数和正则 mock.js环境的搭建 mock的安装$ npm install mockjs 导入// node.js中:var Mock = require('mockjs')// es6中import Mock from 'mockjs' 使用流程:var data = Mock.mock({...[对象]}) Mock.js的语法规范包括两部分:1.数据模板定义规范 ...

Es6学习笔记(3)1.class类与对象参考往期博客2.Set集合 ES6 提供了新的数据结构 ``Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法： 1)size 返回集合的元素个数 2)add 增加一个新元素，返回当前集合 3)delete 删除元素，返回 boolean 值 4)has 检测集合中是否包含某个元素，返回 boolean 值 5)clear 清空集合，返回 undefined 代码展示// 1.创建一个集合let s = new Set();//Set(0) {size: 0} "object"// 2.集合里面可以接受一个可迭代数据,一般是给里面传入一个数组let s1 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿'])// ...

Es6学习笔记（2）1.(…)拓展运算符 es6新增的扩展运算符... 作用： 所有能够被迭代的东西，都可以被展开运算符…，进行展开,即可将数组展开变成参数序列，将字符串展开变成单一的字符 代码展示:// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』//声明一个数组 ...const tfboys = ['易烊千玺','王源','王俊凯'];// => '易烊千玺','王源','王俊凯'// 声明一个函数function chunwan(){ console.log(arguments);}chunwan(tfboys);//结果只有一个参数，即一个数组chunwan(...tfboys);//结果有三个参数，相当于转换成chunwan('易烊千玺','王源','王俊凯') 结果展示: 拓展运算符的应用:代码展示://1. 数组的合并：相当于把每一个目标 ...

Es6学习笔记（1）1.let声明变量 let关键字是用于声明变量(存在作用域,不能进行变量提升)，作用与var基本一样 代码展示//声明变量let a = 1;let b,c,d;let e = 100;let f = 521, g = 'iloveyou', h = [];//赋值，字符串，数组//1. 变量不能重复声明// let star = '罗志祥';// let star = '小猪';//2. 块级作用域 全局, 函数, eval// if else while for // {// let girl = '周扬青';// }// console.log(girl);//3. 不存在变量提升(let直接报错)// 什么是变量提升呢：就是先调用变量，在声明变量，浏览器就会输出一个undefined// console.log(song);// let song = '恋爱达人';//4. 不影响作用域链{ let school ...

使用Vercel服务器免费部署上线自己的项目介绍一下vercel vercel 是一个站点托管平台，提供CDN加速，同类的平台有Netlify 和 github Page，相比之下，vercel 国内的访问速度更快，并且提供Production环境和development环境，对于项目开发非常的有用的，并且支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，都会生成不一样的链接可供预览。 并且vercel针对个人用户是免费的，针对teams用户是收费的！ vercel类似于github Page，但远比github Page强大，速度也快得多得多，而且将github授权给vercel后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。 vercel 还支持部署serverless接口 。那代表着，其不仅仅可以部署静态网站，甚至可以部署动态网站，而这些功能，统统都是免费的，vercel 还支持自动配置https ，不用自己去freeSSL 申请证书，更是省去了一大堆证书的配置 部署方式：github仓库部署 和 本地部署一.gi ...

13.路由器的两种工作模式 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。 hash模式： 地址中永远带着#号，不美观 。 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。 兼容性较好。 效果展示: history模式： 地址干净，美观 。 兼容性和hash模式相比略差。 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。 效果展示: 案例代码展示: router-index.js// 这里配置路由(创建整个应用页面的路由器)// 首先引入路由import VueRouter from "vue-router";// 引入各个组件import About from '../pages/About'import Home from '../pages/Home'import Message from '../pages/Messag ...

Vue中的路由守卫(路由跳转前中后的一些钩子函数) 作用:对路由进行权限的控制 Vue中的路由守卫分为三种 全局路由守卫（前置和后置） 独享路由守卫 3.组件内路由守卫 (1)-全局路由守卫(所有路由组件都会经过) 1.全局前置路由守卫(在index.js中暴露路由组件之前编写) 初始化以及每次路由跳转之前调用这个给api里面的函数//前置全局路由守卫router.beforeEach((to,from,next)=>{}) 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next()：放行函数，决定是否展示你要看到的路由页面。 从名字全局前置守卫不难理解，它是全局的，即对 整个单页面应用(SPA) 中的所有路由都生效，所以当定义了全局的前置守卫，在进入每一个路由之前都会调用这个回调，那么如果你在回调中对路由的跳转条件判断出错，简单点就是死循环…因为你遗漏了某种路由跳转的情况，守卫会一直执行。所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。在的项目当中常用于进行权限的判断,相当于门卫查看你进门的证件 2. ...

两个新的生命周期钩子（路由专属） 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。 具体名字： activated路由组件被激活(获取该路由组件焦点)时触发。 deactivated路由组件失活(失去该路由组件焦点)时触发。 使用场景 在渲染路由组件时 我们可能会为了保留组件内填写的数据 通过<keep-alive include="Home">标签缓存路由组件使组件不被销毁，从而监测不到组件内的beforeDestroy()销毁组件之前的钩子来进行销毁前的工作比如清除定时器等等… 这个时候我们就可以通过deactivated()方法来替代beforeDestroy()来进行最后的收尾工作 代码展示:要求:实现”Hello Vue标题的渐变” News组件 <template> <ul> <li :style="{opacity}">Hello Vue!!!</li> <!-- 给这些新闻后面加入输入框 ...

Vue路由（route）-编程式路由导航为什么会需要编程式路由导航？ 我们之前学习的Vue路由(route)是通过标签实现页面的跳转的(声明式路由导航),而标签最终会解析成<\a>标签渲染到页面上,但是我们都知道真正实际的开发中不可能全部路由组件都由<\a>标签来引导,有时候,我们会设置一个来实现点击页面(路由)的跳转,这时就用到了”编程式路由导航”。 实现原理: 所谓”编程式路由导航”其实就相当于使用全局路由器($router)身上的一些特殊的api配合Vue组件的methods方法来操控浏览器的历史记录 作用: 使路由的跳转无需再借助标签,更加灵活! 有5个常用的api 使用方法: 1.push(压栈式路由跳转,会给浏览器留下历史记录) // 字符串式this.$router.push('home')// 对象式this.$router.push({ path: 'home' })// 命名路由this.$router.push({ name: 'user', p ...

Vue路由(route)中的props配置 并非组件间(父组件=>子组件)有props配置传递参数,路由(route)当中也有props配置传递参数,数据的. Vue-router中的props配置的作用是让路由组件更加方便的接收到参数 使用场景如下所示: 当我们使用路由(route)去接收组件通过query或者params传过来的参数时,一般是这样设置接收的 当要求接收的参数过多时,模板代码就会显得非常的复杂冗余,如下: 这时我么也许会想到使用计算属性(computed)去解决问题,如下: 但是当要求接收的参数很多时,你的计算属性就同样会要求写非常多重复的代码去代替插值入口,因此使用计算属性去简化接收参数并不是最好的办法反而会让问题变得更加复杂. Vue中的props配置 作用:让路由组件更方便的接收到参数{   name:'xiangqing',   path:'detail/:id',   component:Detail,   //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会 ...