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

Posted 2023-03-02

参考技术A  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、完结😁