文档章节

vue使用mockjs

JamesView
 JamesView
发布于 06/22 11:11
字数 870
阅读 201
收藏 1

在使用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

本文转载自:https://segmentfault.com/a/1190000010592626

共有 人打赏支持
JamesView
粉丝 7
博文 96
码字总数 20042
作品 0
海淀
前端工程师
私信 提问
vue-element-admin 3.9.2 发布,后台集成解决方案

vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组...

局长
10/23
2.9K
1
vue-cli项目中使用mockjs模拟数据

为何 之前写过一篇文章vue-cli项目中怎么mock数据?,虽然这种方法不错,但是显然存在一个很明显的弊端,那就是要自己手写数据,因此我现在推荐大家使用mockjs,至于好处大家就手动点进去了解...

daydreammoon
05/28
0
0
分享我在 vue 项目中关于 api 请求的一些实现及项目框架

本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只...

易墨
08/11
0
0
vue+mockjs 模拟数据,实现前后端分离开发

在项目中尝试了mockjs,mock数据,实现前后端分离开发。 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 3.数据类型丰富 4.通过...

大灰狼的小绵羊哥哥
10/15
0
0
基于 vue+element 的后台集成方案 - vue-element-admin

vue-element-admin 本项目的定位是后台集成方案,不适合当基础模板来开发,模板建议使用 vueAdmin-template , 桌面端 electron-vue-admin 注意:该项目目前使用 element-ui@1.4.1 版本,所以...

匿名
2017/08/23
0
19

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
29分钟前
11
1
EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
17
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
20
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
24
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部