`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.数据模板定义规范:

数据模板中的每一个属性由3个部分组成:属性名(name), 生成规则(rule), 属性值(value)
'name|rule': value

2.数据占位符定义规范

占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中
@占位符

@占位符(参数 [, 参数])

基本使用

1.数据模板定义

属性值是字符串形式:String
' name|min-max ' : ' string '
通过重复的string生成一个字符串,重复次数介于min 到max之间
' name|count ' : ' string '
通过重复的string生成一个字符串,重复次数等于count

代码展示:

// 导入mock(两种方法)
// import Mock from 'mockjs'
const Mock = require('mockjs')

// 调用Mock方法,生成模拟数据
// 1.生成一个username *出现次数为1-10次
var data1 = Mock.mock({'username|1-10':'*'})

// 生成一个username *出现次数为5次
var data2 = Mock.mock({'username|5':'*'})

console.log('随机出现1-10次的data1',data1);
console.log('出现5次的data2',data2);

结果展示:

属性值是数值形式:Number
' name|min-max ' : ' number '
生成一个介于min到max之间的整数,属性值number只是用来确定类型

代码展示:

// 2.生成一个数值类型的模拟数据
// 生成一个年龄介于18-40的数值(这里的初始值给0即可)
var data3 = Mock.mock({'age|18-40':0})
console.log('年龄:',data3);

结果展示:

2.数据占位符定义

@id()&&@guid;等到一个随机生成的id(或者:Mock.Random.guid();)
@cname():得到一个随机的生成的中文名字
@date('yyyy-MM-dd'):得到一个随机生成的日期
@paragraph():得到一个随机生成的描述
@email:得到一个随机生成的邮箱地址

代码展示:

// 3.数据占位符定义
var data4 = Mock.mock({
    id:'@id()',//id = Mock.mock("@guid");
    username:'@cname()',
    date:'@date(yyyy-MM-dd)',
    description:'@paragraph()',
    email:'@email()',
    'age|18-40':0
})
console.log(data4);

结果展示:

`Mock.js`在`Vue`项目中的使用

使用步骤:

1.在项目的根目录下新建.env.development文件,并填入以下代码用于确定是否启用mock接口来模拟数据还是向后台请求数据

# 这里添加mock接口的开关
# 控制是否需要使用到mock模拟生成的数据,还是向后端发请求,请求数据
# Mock = ture :使用mock模拟数据,false:不使用mock模拟数据而是向后台请求数据

Mock = false

2.定义接口路由,在接口中返回mock模拟的数据(在mock文件夹下的index.js当中)

// 导入mock(两种方法)
// import Mock from 'mockjs'
const Mock = require('mockjs')//推荐使用nodejs写法,因为配置文件用的就是commonjs写法

// 让它随机生成一个对象
var data = Mock.mock({
    id:'@id()',
    username:'@cname()',
    date:'@date(yyyy-MM-dd)',
    description:'@paragraph()',
    email:'@email()',
    'age|18-40':0
})

console.log('使用mock随机生成的对象',data);

// 定义路由接口,在接口中返回mock的数据
// 首先将服务器的接口函数暴露出去(node中的express框架)
// 实际上vue-cli中集成的就是express框架[服务器]
module.exports = function(devServer){
    // 添加判断,mock接口是否为true(是否使用mock模拟数据)
    if(process.env.Mock === 'ture'){
        // 参数1:接口地址(真正的后端接口) ,参数2: 服务器处理函数(req请求对象,res响应对象)
        // app就是创造的服务器实例 
        devServer.app.get('/api/userinfo' , (req , res) => {
            // 将模拟的数据以json格式返回给客户端(浏览器)
            res.json(data)
        })
    }
}

3.在vue.config.js中配置devServer,在onBeforeSetupMiddleware属性中引入接口路由函数

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 关闭依法提示
  transpileDependencies: true,

  devServer:{
    /* vue-cli跑起来的时候会自动的起一个服务器,
    该服务器在向后端发送请求的时候,
    会先经过这里的before有没有返回接口数据,
    如果有的话就直接返回before这里的数据不会再向下走了,
    如果没有才会向后端发送请求
    就相当于一个拦截器 */
    onBeforeSetupMiddleware: require('./mock/index.js')
  }
})

4.在对应的组件(该组件向后台请求数据)当中使用axios调用该接口,获取数据

<!-- 这里展示的是App组件的代码片段(练习使用的是app组件向外发送请求) -->
<script>
  // 引入axios
  import axios from 'axios'

  export default {
    name: 'App',
    created() {
      // 前端调用接口请求数据
      axios.get('/api/userinfo').then(res=>{
        console.log(res.data);
      })
    },
  }
</script>