VUE笔记11（$attrs属性，mock.js生成假数据）

        用于接收props未接收的绑定属性

        例如：下图中props没有接收sex和height属性，但是$attrs可以接收sex和height属性，如果现在把sex属性写入props中，那么$attrs就只能接收到height属性，也就是说，attrs只是接收props未接收的绑定属性

2mockjs

        20  安装(仅在开发环境安装即可)

                npm install mockjs -D

        21  导入mockjs

                在mainjs中导入mockjs

                import '/mock/indexjs'

        22  src文件下新建文件夹mock，其中新建文件indexjs编译文件

有的时候前端开发需要用到假数据，但是mock js 会显得不是很直观，而且自由度不是很好

这里采用了koa的服务器

最后工作流程为：在后端那里要来json文件，通过fs批量require进来，文件名就是变量名，注册到router上。

项目路径如下

appjs

routerjs

js文件是没有接口文档，自己模拟数据来使用的，基本上用不太到。

之后配置packagejson 整合到vue start里面

这里要填2个包

nodemon //server的热更新

concurrently //npm多开任务

mockjs 是一款模拟数据生成器，帮助前端人员独立于后端进行开发，帮助编写单元测试， 前后端合作期间，后端人员需给到需开发的接口名称、返回的数据格式，前端人员根据这些数据格式，编写mock，可直接用于开发，编写页面交互。

根据数据模板生成模拟数据 拦截真实的ajax请求，并模拟Ajax请求，生成并返回模拟数据 基于HTMML模板生成模拟数据

注意：项目已经做配置，只需要看

官方文档： >

前后端分离开发的时候，前端和后端是并行开发的，前端往往刚开始不能拿到测试的数据，都需要自己写测试数据。 编写测试数据还是比较浪费时间的，虽然简单，但是都是体力活。

那么是否有工具可以帮我们生成数据，生成API接口，让前端能够爽爽的开发。

Mockjs 正是这样一款类库，可以帮我们模拟生成一堆数据。

引入引入mockjs的包，然后生成数据。

生成的数据(数据的个数，1-10个中随机个数)

配置模拟数据

发送Ajax请求：

返回数据：

注意：

属性名 和 生成规则 之间用 | 分隔。生成规则 是可选的。生成规则 有 7 种格式：

生成规则 的 含义 需要依赖 属性值 才能确定。

属性值 中可以含有 @占位符。

属性值 还指定了最终值的初始值和类型。

可以在具体vue文件中，或者mainjs中引用mockjs

或者

正常进行业务开发，这时候页面发送的请求会被mock拦截，如果url一致，或者正则匹配到了，则返回mock数据，没有进行网络请求发起

只需要把引用的mockjs删掉或者注释掉就可以了。

或者

前言： 刚刚看了下的后台，发现我技术文章中，阅读留言最多的是关于移动端的文章，甚至还有人付费赞赏或咨询。关于 PC 端的技术文章就显得比较冷清了，唉，废了好大劲写的，没人看。 和我想的一样，移动端才是王道，下次找工作我也搞移动端