vue使用mockjs
2018-06-22 11:11
417 查看
在使用vue开发的时候,一直疑惑与mockjs怎么用,开了mockjs的开发文档,还是一脸蒙蔽,无从下手!mockjs在前后端分离开发上进行模拟数据,是不可避掉的一环。在网上看了一些博文还有查阅了其文档,终于搞明白了它的基础用法,有什么不完整的地方,还请大家多多指正。
搭建一个vue项目
安装mockjs
启动项目
创建一个mockjs文档
此时可以看到类似于这样的一个项目结构
其中mockjs是我自己创建的一个mock文件,用于存放模拟的数据
项目搭建起来之后,能够在package.json里面看到 "mockjs": "^1.0.1-beta3" 这块代码,就说明mockjs已经引入载入成功,就可以开始我们下一步的操作;
我所理解的有两种方法使用mockjs,第一种是比较简答你的使用,还有一种是模块化的使用
(2)我们在mockjs中进行以下编写
同时,不要忘记了,需要在main.js里面引入该文档,告诉程序,使用了mockjs,来进行数据模拟
(3)重写了Hello.vue
hello.vue中的AJAX请求与mockjs里里面的url相同,这个时候我们可以看到页面上的显示如下图
此块代码写到如下图所在的区域
其中res.send的意思就是把它所包含的数据抛出去,使AJAX能够请求的到,使用这个方法的时候,我们不需要在main.js里面引入就可以直接使用,但是有一点不好的是,这种方法,因为卸载配置里面,比较混乱,跟我们模块化开发的意愿相悖,我们可以尝试这把数据的这一块单独拿出去,我们只需要在这里面引用就可以了;
把上面引入的mockjs注掉,把app.use改写成app.use('/api', require('../src/mock.js'))的形式,其中api是根路径,类似于router中的base路径,后面的require引入的是mock.js里的数据
在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文档
此时可以看到类似于这样的一个项目结构
其中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
hello.vue中的AJAX请求与mockjs里里面的url相同,这个时候我们可以看到页面上的显示如下图
模块化的使用
(1)在build的文件夹下面的dev-server文件中进行配置首先,需要引入mockjs =》 require('mockjs') 其次在dev-server里面配置 app.use('/api/data', (req, res) => { res.send({ data:['a','s'] }) })
此块代码写到如下图所在的区域
其中res.send的意思就是把它所包含的数据抛出去,使AJAX能够请求的到,使用这个方法的时候,我们不需要在main.js里面引入就可以直接使用,但是有一点不好的是,这种方法,因为卸载配置里面,比较混乱,跟我们模块化开发的意愿相悖,我们可以尝试这把数据的这一块单独拿出去,我们只需要在这里面引用就可以了;
把上面引入的mockjs注掉,把app.use改写成app.use('/api', require('../src/mock.js'))的形式,其中api是根路径,类似于router中的base路径,后面的require引入的是mock.js里的数据
在mockjs文档中,我们进行一下数据改写,如下图所示
此时页面显示为
相关文章推荐
- vue使用mockjs配置步骤
- [配置]vue中mockjs的配置和使用
- vue 的mockjs使用
- vue+vuecli+webpack中使用mockjs模拟后端数据的示例
- vue项目中使用mockjs模拟接口返回数据
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- vue中使用mockjs
- vue+vuecli+webpack中使用mockjs模拟后端数据
- 详解在vue-cli项目中使用mockjs(请求数据删除数据)
- vue+vuecli+webpack中使用mockjs模拟后端数据
- vue中使用jsx语法
- vue.js中使用radio和checkbox
- vue-route 导航使用
- 使用VUE在Django中打印“Hello World”
- vue开发调试神器vue-devtools使用详解
- 关于vue组件中定时器中只能使用箭头函数的问题
- 详解vue-cli项目中怎么使用mock数据
- vue使用理解(1)
- vue项目使用webpack loader把px转换为rem
- 使用vue2+Vuex+Router重写饿了么点餐系统和vue插件简析