[MokeJs]Vue配合MockJs

1.说明:

mockjs可以提供假数据,其原理就是拦截所有发送的请求,如果此次请求的url中在mock存在,则拦截下来,然后返回Mock中对应的内容。


2.安装

npm install mockjs --save

3.模块化

新建一个mock文件夹

  • 新建index.js文件:该文件只负责引用其他文件。
  • 新建对应的模块文件,每个模块可以对应一个js文件。
    然后在main.js中,只引入mock/index.js即可。

4.使用

假设现在有一个商品模块,则在mock文件夹下创建一个shopping.js

// 引入Mock
import Mock from 'mockjs';

// 然后在下面编写路由及控制器

/*
Mock.mock(path, method, controller)
 - path<String|正则>:路由地址
 - methods<String>:请求方式
 - controller<Function|Object>:
  - Function:可以接收到一个<config>参数,它存储着请求的信息,例如参数等...然后通过return返回内容。
  - Object:返回的对象
  - 在返回时,支持写Mock语法
*/

// 获取全部的商品信息
Mock.mock('/mock/api/shopping', 'get', {
    code: 200,
    // 该数组中,有100条对象
    "data|100": [
        {
            id: '@id',
            name: '@name'
        }
    ]
});

5.注意(超级重要,踩过坑)

在配置axios时,如果你要配置baseURL

  • 千万不要写http://localhost,直接写你mock路由地址的前缀即可,忽略本地地址!忽略本地地址!
Mock.mock('/mock/api/shopping', 'get', {...});

baseURL: '/mock'

然后在发送请求时,只需要写 /api/shopping 即可。
发表评论 / Comment

用心评论~

金玉良言 / Appraise
HenryLexLV 1
2022-06-22 11:49
在线工作可以为您带来丰厚的利润。 http://go.afalobo.com/0ide
HenryLexLV 1
2022-06-22 01:58
寻找额外的钱? 尝试最好的金融工具。 http://go.afalobo.com/0ide
LinaSaceLV 1
2022-06-21 03:58
Hеllо all, guуѕ! Ι know, mу messаge maу bе tоо ѕpeсifіc,
But my sіster found niсе man here аnd theу mаrriеd, ѕо how abоut mе?ǃ :)
I am 25 yeаrs оld, Lіnа, frоm Rоmаnіа, I know Εngliѕh and Gеrman lаnguageѕ аlsо
And... Ι hаve sрeсifiс disеaѕе, nаmed nуmрhоmаniа. Who knоw whаt is thiѕ, сan underѕtand me (bеttеr to ѕау іt immеdiаtelу)
Аh yеs, Ι сook verу taѕty! and I lоvе not onlу сoоk ;))
Ιm reаl girl, not рroѕtitutе, аnd looking fоr ѕеriоus аnd hоt relatіonѕhір...
Аnуwау, you сan find mу profile hеrе: http://klasfiltlonatheaper.tk/user/87233/