vue-cli項目中如何使用mock.js

• 在項目中安裝mockjs、axios（http請求庫）

cnpm install mockjs axios --save

• 在項目中新建一個mock.js文件，用于定義接口返回的數(shù)據(jù)
• 在main.js引入mock.js

mock.js

const Mock = require('mockjs') // 獲取mock對象
const Random = Mock.Random // 獲取random對象，隨機生成各種數(shù)據(jù)，具體請翻閱文檔
const domain = 'http://mockjs.com/api' // 定義默認域名，隨便寫
const code = 200 // 返回的狀態(tài)碼

// 隨機生成文章數(shù)據(jù)
const postData = req => {
  
  console.log(req) // 請求體，用于獲取參數(shù)

  let posts = [] // 用于存放文章數(shù)據(jù)的數(shù)組
  
  for (let i = 0; i < 10; i++) {
    let post = {
      title: Random.csentence(10, 25), // 隨機生成長度為10-25的標(biāo)題
      icon: Random.dataImage('250x250', '文章icon'), // 隨機生成大小為250x250的圖片鏈接
      author: Random.cname(), // 隨機生成名字
      date: Random.date() + ' ' + Random.time() // 隨機生成年月日 + 時間
    }

    posts.push(post)
  }
  
  // 返回狀態(tài)碼和文章數(shù)據(jù)posts
  return {
    code,
    posts
  }
}

// 定義請求鏈接，類型，還有返回數(shù)據(jù)
Mock.mock(`${domain}/posts`, 'get', postData);

main.js

import Mock from './mock' // 剛剛手寫的mock.js文件
import axios from 'axios' // axios http請求庫

axios.defaults.baseURL = 'http://mockjs.com/api' // 設(shè)置默認請求的url
Vue.prototype.$http = axios

組件使用

this.$http.get("/posts").then(res => {
  console.log(res);
});

示例

image.png

注意

• get請求有帶參數(shù)時，請把接口url寫為正則匹配，否則匹配不到就報錯（Mock.mock('此處為正則'）

最后

本文到此結(jié)束，希望以上內(nèi)容對你有些許幫助，如若喜歡請記得點個 贊 跟 關(guān)注 哦 (　＾?＾)