1.什么是Mock.js?

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

通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。

优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

2.安装

npm install mockjs --save-dev

3.安装好之后新建一个mock文件用于引入文件

import Mock from 'mockjs'

4.然后在main.js 导入mock文件 

// 引入mock

import './mock/index.js'

5.mock语法

        01 .生成指定次数的文本 长度字符串  

                    const data = Mock.mock ({

                        "string":"hello world"

                     })

        02 生成指定范围的长度字符串  

                    const data = Mock.mock ({

                          "string|1-6":"hello world"  //生成1-6随机次数的 hello world

                    })

          02 生成文本

                生成随机的字符串

                  const data = Mock.mock ({

                            "string":"@cword()"  // 括号中可以设置文字的数量以及文字数量的区间

                    })

          03 生成指定范围的标题和句子

                const data = Mock.mock({

                   title: "@ctitle(5,8)",

                    sentence: '@csentence(50,100)'

                })

           04 随机生成段落 

                const data = Mock.mock({

                        content: '@cparagraph()'

                })

            05 生成范围数字 

                const data = Mock.mock({

                        "number|1-999": 1

                })

           06 生成增量id 

                const data = Mock.mock({

                        id: '@increment()'

                })

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

                const data = Mock.mock({

                    name: '@cname()',

                    idCard: '@id()',

                    address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市

                })

            08 随机生成图片 生成图片参数1：图片可选大小  参数2：图片背景色 参数3：图片前景色

                参数4：图片格式  参数5：图片文字

                     const data = Mock.mock({

                          image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"

                      })

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

                    const time = Mock.mock({

                            time1: '@date()', // 只有年月日

                            time2: '@date(yyyy-MM-dd hh:mm:ss)'

                    })

                11.定数组返回的条数  -- 指定长度：'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: '获取新闻列表数据成功'

    }

})

在目标组件中

export default {

  created() {

        axios.get('/api/get/user')

          .then(function (response) {

          console.log(response);

      })

    }

}