文档章节

vue使用mockjs

JamesView
 JamesView
发布于 06/22 11:11
字数 870
阅读 186
收藏 1
点赞 0
评论 0

在使用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
粉丝 3
博文 74
码字总数 14188
作品 0
海淀
前端工程师
vue-cli项目中使用mockjs模拟数据

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

daydreammoon
05/28
0
0
mockjs模拟后台接口,前端ajax post请求无效

使用环境是vuejs2.0+vue-resource+webpack+mockjs。 mockjs数据已经配置好,可以get访问,但是在post时mock只返回post的数据,请问如何配置成可post请求? 可以看 vue-exp项目里的配置。...

龙影
2017/03/02
1K
2
Daniel/EasyMall

EasyMall powered by vuejs width a series of vuejs plugins included vuex, vue-router, aixos, mockjs vuex 单页面数据状态管理器 vue-router 单页面路由管理 axios http请求插件 mockjs......

Daniel
2017/11/06
0
0
Vue命令行工具vue-cli

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可...

韦姣敏
06/23
0
0
在 Vue 中使用 TypeScript 的一些思考(实践)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: :使用基础 Vue 构造器,创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是...

三毛丶
07/09
0
0
在 Vue 中使用 TypeScript 中的一些实践(思考)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: :使用基础 Vue 构造器,创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是...

三毛丶
07/05
0
0
入职第三天:vue-loader在项目中是如何配置的

什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用...

闰土大叔
06/02
0
0
Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will
04/05
0
0
使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七
05/09
0
0
前端神器:一行命令,React 组件转 Vue 组件!

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component...

cacao111
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java日志框架-logback配置文件多环境日志配置(开发、测试、生产)(原始解决方法)

说明:这种方式应该算是最通用的,原理是通过判断标签实现。 <!-- if-then form --> <if condition="some conditional expression"> <then> ... </then> </if> ......

浮躁的码农
21分钟前
1
0
FTP传输时的两种登录方式和区别

登录方式 匿名登录 用户名为: anonymous。 密码为:任何合法 email 地址。 授权登录 用户名为:用户在远程系统中的用户帐号。 密码为:用户在远程系统中的用户密码。 区别 匿名登录 只能访问...

寰宇01
22分钟前
0
0
plsql developer 配置监听(不安装oracle客户端)

plsql developer 配置监听(不安装oracle客户端)

微小宝
29分钟前
0
0
数据库(分库分表)中间件对比

本人的宗旨就是,能copy的,绝对不手写。 分区:对业务透明,分区只不过把存放数据的文件分成了许多小块,例如mysql中的一张表对应三个文件.MYD,MYI,frm。 根据一定的规则把数据文件(MYD)和索...

奔跑吧代码
33分钟前
2
0
Netty与Reactor模式详解

在学习Reactor模式之前,我们需要对“I/O的四种模型”以及“什么是I/O多路复用”进行简单的介绍,因为Reactor是一个使用了同步非阻塞的I/O多路复用机制的模式。 I/O的四种模型 I/0 操作 主要...

hutaishi
39分钟前
1
0
【2018.07.16学习笔记】【linux高级知识 20.16-20.19】

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

lgsxp
45分钟前
0
0
用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛 前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为...

ssthouse_hust
49分钟前
17
0
oracle查看表空间大小及表数量

一,查看数据库表空间大小 select tablespace_name ,sum(bytes) / 1024 / 1024 as MB from dba_data_files group by tablespace_name; 二,查看数据库中表的总数 select count(*) from use......

源哥L
59分钟前
0
0
debian 9 下 MySQLdb mysql_config not found

需要说明的是debian9 下MySQL 变成了mariadb. apt install libmariadbd18 apt install libmariadbd-dev apt install mysql-community-client...

idoz
今天
0
0
中介者设计模式

1、用一个中介者对象封装一系列的对象交互 中介者使各对象不需要显示地相互作用,从而使耦合松散,而且可以独立地改变它们之间的交互 中介者模式又称为调停者模式 2、为什么要使用中介者模式...

职业搬砖20年
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部