vue中使用mockjs简单返回数据、包括get,post请求

 1、安装

    npm install mockjs

2、在src文件下
    创建mock文件夹
        在mock文件夹下创建json文件 并在json文件夹下创建index.json
        在mock文件下创建mock.js文件

3、在mian.js文件中引用mock.js        

    import "./mock/mock.js";

    mock.js文件中的内容
    ```
    import Mock from 'mockjs'
    Mock.setup({
         timeout: 500 //设置一个延迟时间虚拟服务器响应效果
     })
//格式： Mock.mock( url, post/get , 返回的数据)； Mock.mock('/getList', 'get', require('./json/index.json'))
// 通过Mock.mock函数模拟post请求
Mock.mock('/api/addgoods', 'post', function (option) {
 // 这里的option是请求的相关参数
var $name=JSON.parse(option.body).name;
if($name){
    return Mock.mock({
        status: 200,
        message: '提交成功！！！'
    })
}else{
    return Mock.mock({
        status: 400,
        message: '未提交参数'
    })
}
})

  ```
index.json文件中的内容
```
{

   "retcode": "0000",

  "retmsg": "成功",

  "data": [

    {

      "tabId": 1,

      "tabShowName": "推荐",

      "tabName": "recommend"

    },

    {

      "tabId": 2,

      "tabShowName": "7×24",

      "tabName": "7x24"

    },

    {

      "tabId": 3,

      "tabShowName": "观点",

      "tabName": "opinion"

    }

  ]
```    

3、发送请求并获取数据此处用的是axios

    方式一：发送get请求

    ```

    this.$axios.get('/getList').then((res)=>{
        console.log(res)
    })

    ```
    方式二：发送post请求
    ```

      var  data={

        name:"张三"

      }

  this.$axios.post("/api/addgoods",data).then(res=>{

        console.log(res,"MOCK __ POST")

  })

    ```

4、附上官网链接
  https://github.com/nuysoft/Mock/wiki

5、目录结构

6、完结