MockJS在Vue中的简单使用

MockJS 的使用

什么是MockJS？

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.
能够用来模拟服务器响应. 优势是很是简单方便, 无侵入性, 
基本覆盖经常使用的接口数据类型.

一、建立 mock.js

mock.js

//引入 mockjs 模块
import Mock from "mockjs";
Mock.mock("getNewsList", {
  "list|5": [
    //随机返回5项
    {
      title: "@ctitle(5,20)",
      url: "@url" //随机生成url
    }
  ]
});

二、在 main.js 中引入自定义的 mock.js

require("./mock");
//此部分引入的是咱们所编写的mockjs文档

三、通常咱们使用 mockjs 的时候模拟后台接口时会配合使用 axios 模块来接管 vue 中的 ajax 请求工具。

//引入 axios 而且将 axios 设置为默认的 ajax 请求的公户

import axios from "axios";
Vue.prototype.$http = axios;

四、请求数据

this.$http
  .get("getNewsList")
  .then(res => {
    this.newsList = res.data.list;
  })
  .catch(err => {
    // alert(2);
    console.log(err);
  });