记录mock.js模拟接口数据

先放官方文档： 语法规范：github.com/nuysoft/Moc…

按名字生成随机属性值，如@title,@id等（参考下图框的）

vue安装及使用

• 安装 npm i mockjs

• 新建目录结构如下

  • index.js文件内容

  
  //创建mock的入口文件，并配置请求的接口地址，提交方式，返回的假数据
  import Mock from 'mockjs'
  //导入的模拟数据
  import courseData from "./course";
  
  /**
   * Mock.mock( rurl, rtype, template )
   * rurl:请求的接口地址
   * rtype:提交方式
   * template:返回数据
   */
  
  Mock.mock("http://www.111.com/coureslist", "get", courseData);
  
  

  • course.js文件内容

  
  import Mock from "mockjs";
  
  //mock课程数据
  var result=Mock.mock({
    code: 200,
    msg: "操作成功",
    data: {
      current_page: 1, // 这种写法返回的是死数据
      last_page: 18, // 死数据
      total: 178, // 死数据
      "list|10": [ //返回的数组，长度为10
        {
          id: "@id",  //模拟id，如 "460000201211215973"
          "price|100-200.1-2": 100, //模拟小数，如 154.14
          "str|1-10": 'abc', //模拟字符串，如 "abcabcabcabcabcabcabc"
          "has_buy|+1": [0,1,2,3], //模拟状态值,如 2
          title: "@ctitle",  //模拟中文标题，如"行求始因相白"
          address: "@county(true)",  //模拟省市县，如"天津 天津市 河西区"
          "teachers_list|1": [ //返回的数组，长度为1
            {
              course_basis_id: "@id", // 如 "140000198902218795"
              id: "@id", //如 "53000019940307611X"
              teacher_avatar: "@image('150x120', '#ff0000', '测试图片')",  //模拟图片，如 http://dummyimage.com/150x120/ff0000&text=测试图片
              teacher_name: "@cname"  //模拟中文姓名，如 "潘洋"
            }
          ]
        }
      ]
    }
  });
  
  export default result;
  
  
  

• 在main.js中引入import 'mock文件的路径'

• 使用方法 不封装axios例子：

    import axios from 'axios';

    export default{
        mounted() {
            axios.get('http://www.111.com/coureslist').then(res=>{
                 console.log(res.data.data,'我是mock数据')
		})
	    },
    }

然后就可正常使用了~

参考链接：juejin.cn/post/699017…