[Mock.js] vueプロジェクトでMock.jsを使用する

Mock.jsドキュメント：http：//mockjs.com/examples.html

I.はじめに

Mock.jsの役割：ランダムデータを生成し、Ajaxを傍受します

2、使用

1.Mock.jsをダウンロードします

npm install mockjs --save-dev

2.Vueプロジェクトに新しいMock.jsファイルを作成します

const Mock = require('mockjs')
const Random = Mock.Random

const newsData = function () {
    
    
    let articles = []
    for (let i = 0; i < 10; i++) {
    
    
        let newsObj = {
    
    
            date: Random.date(),  //年月日
            longDate:Random.datetime(), //精确到时分秒
            number:Random.natural(201,205),  //数字
            image:Random.image(),      //图片
            flag:Random.boolean(),  // true-false
            name:Random.cname(),     //姓名
            url:Random.url(),       //url地址
            province:Random.province(),  //省
            city:Random.city(),     //市
            county:Random.county()  //区
        }
        articles.push(newsObj)
    }

    return {
    
    
        code: 0,
        msg: "操作成功",
        data: articles,
    }

}

Mock.setup({
    
    
    timeout: 500
})

``请严格注意get请求的地址``
Mock.mock('/api/user/myTranferRecord', 'post',newsData )   //post请求
Mock.mock(RegExp("/api/user/myTranferRecord"+".*"), 'get', newsData)   //get请求

モックの設定形式は以下のとおりです。

// post请求,带参数,参数会在data中返回,会返回url,type,body三个参数,可以把data打印出来看看
Mock.mock('http://localhost:8080/test/cityInfo', 'post', (data) => {
    
    
  // 请求传过来的参数在body中,传回的是json字符串,需要转义一下
  const info= JSON.parse(data.body)
  let list = {
    
    }
      list.img = Random.image('200x100', '#4A7BF7', info.name);
  return {
    
    
    img: Random.image('200x100', '#4A7BF7', info.name)
  }
})

3.main.jsにファイルMock.jsを導入します

4.ネットワークリクエストを送信します

this.$axios.post('/api/user/myTranferRecord').then(res=>{
    
    
 console.log(res) //这里返回的就是我们在mock中自定义的数据
})

5.返されたデータ

注意：

Mock.js自体は、GETリクエストのサポートにはあまり適していません。
たとえば、
Mock.mock（ "/ user / myTranferRecord"、 "get"、mockData）を使用すると、URLが/ user / getUserInfoと等しいリクエストのみがインターセプトされます。 、および/ user / getUserInfo？id = 12などのパラメーターを持つ要求の場合、/ user / myTranferRecordと等しくないため、インターセプトできません。
解決策：
次の表現を使用してください。

Mock.mock(RegExp("/user/myTranferRecord"+".*"), 'get', newsData)