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

 1、安装

    npm install mockjs

2、在src文件下

    创建mock文件夹

        在mock文件夹下创建json文件 并在json文件夹下创建indexjson

        在mock文件下创建mockjs文件

3、在mianjs文件中引用mockjs        

    import "/mock/mockjs";

    mockjs文件中的内容

    ```

    import Mock from 'mockjs'

    Mocksetup({

         timeout: 500 //设置一个延迟时间虚拟服务器响应效果

     })

//格式： Mockmock( url, post/get , 返回的数据)； Mockmock('/getList', 'get', require('/json/indexjson'))

// 通过Mockmock函数模拟post请求

Mockmock('/api/addgoods', 'post', function (option) {

 // 这里的option是请求的相关参数

var $name=JSONparse(optionbody)name;

if($name){

    return Mockmock({

        status: 200,

        message: '提交成功！！！'

    })

}else{

    return Mockmock({

        status: 400,

        message: '未提交参数'

    })

}

})

  ```

indexjson文件中的内容

```

{

   "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$axiosget('/getList')then((res)=>{

        consolelog(res)

    })

    ```

    方式二：发送post请求

    ```

      var  data={

        name:"张三"

      }

  this$axiospost("/api/addgoods",data)then(res=>{

        consolelog(res,"MOCK __ POST")

  })

    ```

4、附上官网链接

  https://githubcom/nuysoft/Mock/wiki

5、目录结构

6、完结