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

安装

npm install mockjs

在src文件下

1、创建mock文件夹 在mock文件夹下
2、创建json文件 并在json文件夹下创建index.json
3、在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

目录结构

完结😁