mockjs官网:http://mockjs.com/

一、简介

1.什么是mock

拦截请求,生成随机数据。

2.mock的使用场景

当后端接口还未完成的时候,前端需要一些数据来写页面,此时就需要Mock数据。

mock原理图:

二、在Vue项目中使用mock.js

1.搭建测试项目

可以参考我之前的一篇文章:新建一个Vue项目

2.安装所需要的的依赖

cnpm install axios --save
cnpm install mockjs --save
cnpm install json5 --save # axios发送ajx数据
# mockjs生成随机数据
# json5解决json文件无法添加注释的问题

3.mock的基本的配置和使用

生成一个js文件

const Mock = require("mockjs")

let id = Mock.mock("@id")
console.log(id); let obj = Mock.mock({
id: "@id()",// 随机生成id,字符串
username: "@cname()",// 随机生成中文名
date: "@date()",// 随机生成日期
avatar: "@image('200x200','blue','#fff','Mock~')",// 生成图片(大小,背景色,前景色,文字)
description: "@paragraph()",// 描述
ip: "@ip()",// ip
emai: "@email()"// email
})
console.log(obj);



参考文档:http://mockjs.com/examples.html

4.json5的使用

vsCode插件市场安装一个json5的插件

将刚刚的对象生成一个josn5文件

{
id: "@id()",// 随机生成id,字符串
username: "@cname()",// 随机生成中文名
date: "@date()",// 随机生成日期
avatar: "@image('200x200','blue','#fff','Mock~')",// 生成图片(大小,背景色,前景色,文字)
description: "@paragraph()",// 描述
ip: "@ip()",// ip
emai: "@email()"// email
}

引入josn5库来接续json5格式

const fs = require('fs')
const path = require('path')
const JSON5 = require('json5') var json = fs.readFileSync(path.join(__dirname, "./userInfo.json5"), "utf-8")
console.log(json) var obj = JSON5.parse(json)
console.log(obj)

5.mock和vue-cli结合

参考文档:

wenpack相关:https://cli.vuejs.org/zh/guide/webpack.html

vue-cli配置参考https://cli.vuejs.org/zh/config/#devserver

https://webpack.js.org/configuration/dev-server/#devserverbefore

根目录新建一个vue.config.js的文件

module.exports = {
devServer: {
before: require('./mock/index')
}
}

mock文件夹下新建index.js文件

const fs = require("fs");
const path = require("path");
const Mock = require("mockjs");
const JSON5 = require("json5"); function getJsonFile(filePath) {
// 读取指定文件
var json = fs.readFileSync(path.resolve(__dirname, filePath), "utf-8");
// 解析返回
return JSON5.parse(json);
} // 返回一个函数
module.exports = function (app) {
// 监听http请求
app.get("/user/userinfo", function (rep, res) {
// 读取文件进行处理
var json = getJsonFile("./userInfo.json5");
// 将json传入方法中,返回给浏览器
res.json(Mock.mock(json));
});
}

6.发送ajax请求

在 src\components\HelloWorld.vue 中发送ajax请求

<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
props: {
msg: String,
},
mounted() {
axios
.get('/user/userinfo')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
},
}
</script>[]()

7.mock加入环境判断

参考文档:https://cli.vuejs.org/zh/guide/mode-and-env.html



根目录新建一个 .env.development 文件



mock文件夹中的index.js文件加入判断

重启项目,当为true的时候可以正常访问;

当不为true的时候报404,如果此时后端接口写好,将可以直接拿到数据。

给你项目加个Mock吧的更多相关文章

  1. ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  2. 001-ant design pro安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  3. vue 项目中使用mock假数据实现前后端分离

    也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...

  4. VS2012 VS2015打开项目加载失败

    VS2012 VS2015打开项目加载失败 改成这个$(MSBuildToolsVersion)试试

  5. django之创建第12个项目-加载图片

    百度云盘:django之创建第12个项目-加载图片 1.setting配置 #静态文件相关配置 # URL prefix for static files. # Example: "http ...

  6. linux nginx配置新项目加域名(设置绑定域名)

    转自:linux nginx配置新项目加域名 找到nginx的配置文件 nginx/nginx.conf 第一种方,法直接在nginx.com里面配置 user www www; worker_pro ...

  7. DELPHI给整个项目加编译开关

    DELPHI给整个项目加编译开关 project--options

  8. vue 项目初始化、mock数据以及安装less

    vue 创建一个项目 1.首先建立一个空文件夹,然后将这个文件夹要放到码云或者其他代码管理平台. 例如码云: 在码云上建立一个项目,然后在控制台进入这文件夹执行 git clone 地址是码云上创建的 ...

  9. vue-cli项目中怎么mock数据

    在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...

随机推荐

  1. PHP设计模式之----观察者模式

    一.概述 1.观察者模式(Observer),当一个对象的状态发生改变时,依赖他的对象会全部收到通知,并自动更新. 2.场景:一个事件发生后,要执行一连串更新操作.传统的编程方式,就是在事件的代码之后 ...

  2. java动态代理——字段和方法字节码的基础结构及Proxy源码分析三

    前文地址:https://www.cnblogs.com/tera/p/13280547.html 本系列文章主要是博主在学习spring aop的过程中了解到其使用了java动态代理,本着究根问底的 ...

  3. socket通信的三种实现方式

    三种 socket 的实现方式 nodejs 下的 socket 服务端代码 const net = require('net') const server = net.createServer() ...

  4. PHP curl_unescape函数

    (PHP 5 >= 5.5.0) curl_unescape — 解码经过URL编码的字符串. 说明 string curl_unescape ( resource $ch , string $ ...

  5. three.js 着色器材质基础(一)

    说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质.着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js ...

  6. JDBC报错:Cannot find class: com.mysql.jdbc.Driver

    连接数据库的jar出现异常(通常报错:Cannot find class:com.mysql.jdbc.Drive), 问题:Connector的jar已经导入,还是出现 Cause: java.sq ...

  7. 【Python 实例】面向对象 | 按相反的顺序输出列表的值

    [Python 实例]面向对象 | 按相反的顺序输出列表的值 题目: 解答: 运行结果: 题目: 按相反的顺序输出列表的值 解答: """ 按相反的顺序输出列表的值 &q ...

  8. CustomPlot 在Qt下 鼠标点击曲线 显示当前坐标

    此次记录主要是为了下次使用时能回忆起来才做得笔记,若有需改进的地方,请不吝珠玉. widget.cpp #include "widget.h" #include "ui_ ...

  9. 如何打印完整的MYSQL带参数SQL日志信息

    在mysql的jdbc中开启sql分析,如下: jdbc.url=jdbc:mysql://127.0.0.1/test?useUnicode=true&characterEncoding=U ...

  10. 用python悄悄记录了室友的抖音在线时间

    今天给大家分享一篇有趣的文章,灵感来自于前几天与室友的聊天,他告诉我抖音可以实时显示人的在线情况,如下图: 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在 ...