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

安装

```npm install mockjs```

在src文件下

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

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

 ```
    import "./mock/mock.js";
```

##mock.js文件中的内容
```
import Mock from 'mockjs'
Mock.setup({
     timeout: 500 //设置一个延迟时间虚拟服务器响应效果
 })
Mock.mock('/getList', 'get', require('./json/index.json'))
Mock.mock('/api/addgoods', 'post', function (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"

}

]

#发送请求并获取数据此处用的是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")

  })

    ```

#附上官网链接
  [https://github.com/nuysoft/Mock/wiki](https://github.com/nuysoft/Mock/wiki)

5、目录结构

![image](https://upload-images.jianshu.io/upload_images/24471554-dc32b2465f9c4a8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

6、完结