mockJs基础用法示例

什么是mockJs

生成随机数据，拦截 Ajax 请求

参考文档：Mock.js

为什么使用mockJs

如果后端接口还未开发完成，我们自己手动模拟后端接口返回随机数据完成交互功能

采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查
采用mockJs进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查

使用mockJs

通过vue-cli创建基本项目

在项目中安装mock
```
npm install mockjs
```

在项目中新建mock文件夹，在mock文件夹中创建index.js

//引入mock模块
import Mock from 'mockjs';

var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

mock语法

生成字符串

生成指定次数字符串

const data = Mock.mock({
    "string|4": "yx！"
})
console.log(data)

生成指定范围长度字符串

const data = Mock.mock({
    "string|1-8": "yx"
})
console.log(data)

生成文本

生成一个随机字符串

const data = Mock.mock({
    "string": "@cword"
})
console.log(data)

生成指定长度和范围

const data = Mock.mock({
    string: "@cword(1)",
    str: '@cword(10,15)'
})
console.log(data)

生成标题和句子

const data = Mock.mock({
    title: "@ctitle",
    sentence: '@csentence'
})
console.log(data)

生成指定长度的标题和句子

const data = Mock.mock({
    title: "@ctitle(8)",
    sentence: '@csentence(50)'
})

生成指定范围的

const data = Mock.mock({
    title: "@ctitle(5,8)",
    sentence: '@csentence(50,100)'
})
console.log(data)

生成段落

随机生成段落

const data = Mock.mock({
    content: '@cparagraph()' 
})
console.log(data)

生成数字

生成指定数字

const data = Mock.mock({
    "number|80": 1
})
console.log(data)

生成范围数字

const data = Mock.mock({
    "number|1-999": 1
})
console.log(data)

生成增量id

随机生成标识

const data = Mock.mock({
    id: '@increment()'
})
console.log(data)

生成姓名-地址-身份证号

随机生成姓名-地址-身份证号

const data = Mock.mock({
    name: '@cname()',
    idCard: '@id()',
    address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
})
console.log(data)

随机生成图片

生成图片：
参数1：图片可选大小
参数2：图片背景色
参数3：图片前景色
参数4：图片格式

参数5：图片文字

  const data = Mock.mock({
      image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
  })
  console.log(data)

生成时间

@Date

生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

const time = Mock.mock({
    time1: '@date()', // 只有年月日
    time2: '@date(yyyy-MM-dd hh:mm:ss)'
})
console.log(time)

指定数组返回的条数

指定长度：'data|5'

指定范围：'data|5-10'

const data = Mock.mock({
    'list|50-99':[
        {
            name: '@cname()',
            address: '@city(true)',
            id: '@increment(1)' // 每次都增加1
        }
    ]
})

mock拦截请求

在项目中安装axios
```
npm install axios
```
在 main.js 文件引入
```
import axios from 'axios'
```
在mock文件夹的index.js文件中写mock语法

定义不携带参数的get请求

Mock.mock('/api/get/user','get',()=>{
    return {
        status: 200,
        message: '获取新闻列表数据成功'
    }
})

定义post请求

Mock.mock('/api/post/user','post',()=>{
    return {
        status: 200,
        message: '添加新闻列表数据成功'
    }
})

在 App.vue 文件发送请求

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  created() {
        axios.get('/api/get/user')
          .then(function (response) {
          console.log(response);
       }),

        axios.post('/api/post/user')
          .then(res => console.log(res)),
    }
}
</script>

<style lang="less" scoped>

</style>

mockJs基础用法示例

什么是mockJs

为什么使用mockJs

使用mockJs

mock语法

猜你喜欢