Mock学习笔记

1.下载安装

1. 安装

npm install mockjs

1. 导入

var Mocl = require('mockjs')

1. 使用

var data = Mock.mock({...})

2.使用步骤

1. 在src目录下手动创建/src/mock/index.js文件夹与文件

   

2. 在main.js文件中引入创建的mock文件

   //导入mock数据
   import '../mock/index.js'
   ​
   //或者这样导入(二选一即可)
   require('../mock/index.js')

1. /mock/index.js 文件中模拟常用请求方式,并返回数据

   //导入mockjs(npm install mockjs)
   import Mock from 'mockjs'
   ​
   //不限制请求方式
   Mock.mock('/api/login',(req)=>{
       //输出请求参数
       console.log(req)
   })

3.语法规范

• 分为两部分

3.1 数据模板定义规范(Data Template Definition,DTD)

• 数据模板中的每个属性由3部分构成:属性名(name),生成规则(rule),属性值(value);

  'name|rule':value

3.1.1 情况一,属性值是字符串 String

1. 'name|min-max':string

   通过重复string生成一个字符串,重复次数大于等于min,小于等于max

1. 'name|count':string

   通过重复string生成一个字符串,重复次数等于count

• 示例

  • 生成一个用户名,*重复1-10次

  const data = Mock.mock({'username|1-10':'*'})
  console.log(data)
  ​
  //结果
  {username:'**'}
  {username:'****'}

3.1.2 情况二,属性值是Number

1. 'name|min-max':number

   生成一个大于等于min,小于等于max的参数,属性值number只是用来确定类型

• 示例

  • 生成年龄,年龄在18-40

  const data = Mock.mock({'age|18-40':0})
  console.log(data)
  ​
  //结果
  {age:19}
  {age:39}

2.数据占位符定义规范(Data Placeholder Definition,DPD)

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

1. @id():得到随机的id

   const data = Mock.mock('@id(参数)')
   或
   const data = Mock.mock('@id')
   comsole.log(data)
   ​
   //结果
   12312358734857

1. @cname()随机生成中文名字

   const data = Mock.mock('@cname()')
   console.log(data)
   ​
   //结果
   徐明

1. @date('yyyy-MM-dd'): 随机生成日期

2. @parapraph():描述

3. @email():邮箱地址

• 示例

  • 随机生成一个对象

const data = Mock.mock({
    id:'@id()',
    username:'@cname()',
    data:'@date(yyyy-MM-dd)',
    description:'@paragraph()',
    email:'@email()',
    'age|18-40':0,
})

4.Mock.js在Vue中的使用

4.1 步骤

1. 定义接口路由,在接口中并返回mock模拟的数据

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

   const Mock = require('mockjs')
   ​
   //随机生成一个数据
   const data = Mock.mock({
       data:'@id',
       state:20000,
       message:'0k'
   })
   ​
   //登录接口
   export const loginData = Mock.mock('/mock/api/login','get',data)

   • 该方法报错404 不明原因

     // module.exports = function (app){
     //     //node中的exporess框架
     //     //参数1:接口地址,参数2:服务器处理函数
     //     app.use('/mock/api/login',(req,res)=>{
     //         //将模拟的数据转成json格式返回给浏览器
     //         res.json(data)
     //     })
     // }

2. 在vue.config.js中配置devServer,在before属性中引入接口路由函数(好像不是必要的)

   module.exports = {
     devServer:{
       //devServe在发送请求时,会先走道before指定的函数中进行处理,如果before中没有对应的移动路由,才会请求外网
       before:require('./src/mock/index')
     }
   }
   ​

3. 使用axios调用该接口,获取数据

// //mock
      // const {data:res} =  await axios.get('/mock/api/login')
      // console.log(res.data)

4.Mock开关

不想用