在vue-cli搭建的项目中使用mockjs

35

在使用vue开发的时候,一直疑惑与mockjs怎么用,开了mockjs的开发文档,还是一脸蒙蔽,无从下手!mockjs在前后端分离开发上进行模拟数据,是不可避掉的一环。在网上看了一些博文还有查阅了其文档,终于搞明白了它的基础用法,有什么不完整的地方,还请大家多多指正。

  • 搭建一个vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack vue-mock
# 安装依赖,走你
$ cd my-project
$ npm install
  • 安装mockjs

npm install mockjs --save-dev
  • 启动项目

npm run dev
  • 创建一个mockjs文档
    此时可以看到类似于这样的一个项目结构

clipboard.png
其中mockjs是我自己创建的一个mock文件,用于存放模拟的数据

项目搭建起来之后,能够在package.json里面看到 "mockjs": "^1.0.1-beta3" 这块代码,就说明mockjs已经引入载入成功,就可以开始我们下一步的操作;
我所理解的有两种方法使用mockjs,第一种是比较简答你的使用,还有一种是模块化的使用

简单的使用

(1)在项目中的mock.js文件中,写入模拟的数据,此时我们需要参照一下mockjs文档中的这样一块

//参照mockjs的文档,进行操作
// 配置 Mock 路径
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    })
    // 输出结果
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})

(2)我们在mockjs中进行以下编写

//引入mockjs
const Mock = require('mockjs')
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {
    return {
        data: ['a','b']
    }
})

同时,不要忘记了,需要在main.js里面引入该文档,告诉程序,使用了mockjs,来进行数据模拟

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

(3)重写了Hello.vue

clipboard.png

hello.vue中的AJAX请求与mockjs里里面的url相同,这个时候我们可以看到页面上的显示如下图

clipboard.png

模块化的使用

(1)在build的文件夹下面的dev-server文件中进行配置

首先,需要引入mockjs =》 require('mockjs')
其次在dev-server里面配置
app.use('/api/data', (req, res) => {
  res.send({
    data:['a','s']
  })
})

此块代码写到如下图所在的区域

clipboard.png

其中res.send的意思就是把它所包含的数据抛出去,使AJAX能够请求的到,使用这个方法的时候,我们不需要在main.js里面引入就可以直接使用,但是有一点不好的是,这种方法,因为卸载配置里面,比较混乱,跟我们模块化开发的意愿相悖,我们可以尝试这把数据的这一块单独拿出去,我们只需要在这里面引用就可以了;

把上面引入的mockjs注掉,把app.use改写成app.use('/api', require('../src/mock.js'))的形式,其中api是根路径,类似于router中的base路径,后面的require引入的是mock.js里的数据
在mockjs文档中,我们进行一下数据改写,如下图所示

clipboard.png

此时页面显示为

clipboard.png

你可能感兴趣的

30 条评论
小被子 · 2017年09月19日

请问 使用简单的方式,为何F12 -》Network,看不到发出的请求?

回复

1

简单形式下,发送的请求,直接被mockjs给拦截了

懂漾 作者 · 2017年09月30日
阿晋 · 2017年09月23日

请问 使用简单的方式,如果是POST请求该怎么配置呢?

回复

0

参照它文档的这个案例 http://jsfiddle.net/nuysoft/E...

懂漾 作者 · 2017年09月30日
0

@懂漾 谢谢!

阿晋 · 2017年10月21日
旧梦随风去 · 2017年10月24日

楼主是不是有什么写漏的啊? 我新人 照着做报错了,TypeError: Cannot read property 'post' of undefined"

回复

0

@旧梦随风去 可否把你的代码粘出来,我看下

懂漾 作者 · 2017年10月24日
0

是因为在找不到$axios,在vue的原型上加上就可以了

Thomas · 2018年01月11日
南岸李达康 · 2017年10月27日

模块化接口404如何解决呢?

回复

0

@南岸李达康 那就是数据接口写的有问题了!

懂漾 作者 · 2017年10月27日
abc26296 · 2018年01月30日

除了使用mockjs,xe-ajax是一个开源的基于Promise API的请求函数,支持Mock
https://github.com/xuliangzha...

回复

亚当斯密 · 2018年03月10日

require('./mock')//此部分引入的是我们所编写的mockjs文档
?????

回复

0

是的

懂漾 作者 · 2018年04月17日
Listenight · 2018年04月13日

为什么我简单使用的时候没有问题, 改成 模块化就报错了? 求指教

回复

0

有报错信息截图吗?

懂漾 作者 · 2018年04月17日
0

怎么给截图? 他报没有找到 fs 和 net 模块, 但是我装不上去...

Listenight · 2018年04月17日
0

不好意思,这个问题我没有遇到过,我中午的时候查一下,到时候给你回复

懂漾 作者 · 2018年04月17日
天下第三人 · 2018年04月21日

1.需要安装mockjs模块,看模块化使用中你安装了express模块,是否还有其它模块需要安装呢?
2.按照你提供的文档,报错404

回复

xuweijian · 2018年05月03日

大神,较新的 vue-cli 生成后的工程中没有 dev-server.js 文件,此时该如何配置呢?谢谢!

回复

0

不看他写的就好了

公子稷 · 6月19日
buhuixiejs · 2018年06月04日

增删改查都可以吗

回复

0

这个我只是用来展示数据的,至于增删改查,你可以看一下mock的官方文档

懂漾 作者 · 2018年08月06日
zhanggy · 2018年08月21日

require(['mock'], function(Mock) { } vue项目报错,“Module not found: Error: Can't resolve 'mock' in '/Users/iotek/item/element/src'” require(['mockjs'], function(Mock) { } 没有报错。

"axios": "^0.18.0",
"echarts": "^4.1.0",
"element-ui": "^2.4.4",
"mockjs": "^1.0.1-beta3",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"

回复

lao42981894zh · 2018年11月15日

你好,想请问一下 在 npm run build 后,mockjs会被引入进正式服代码块吗?这部分应该只能存在测试服吧

回复

Caster · 1月16日

楼主简单使用的第二步那个mockjs是放在哪里的

回复

很响亮 · 1月19日

(1)在项目中的mock.js文件中,写入模拟的数据,此时我们需要参照一下mockjs文档中的这样一块
(2)我们在mockjs中进行以下编写
请问这两块分别放在哪一个文件夹中啊?

回复

0

哦~~~懂了。。

很响亮 · 1月19日
载入中...