一、简介
文章插图
Mock.js是一个基于NodeJS的用来模拟API的工具，可以方便让前端开发人员在开发过程中用来模拟API接口，方便与后端的联调工作，尤其方便在Vue项目中使用 。
官网地址：
http://mockjs.com/
代码托管地址：
https://github.com/nuysoft/Mock
二、上手使用1. 创建一个Vue项目可使用脚手架生成，这里为了方便直接使用HBuilderX创建了一个 element-ui 项目。
文章插图
2. 安装依赖
npm install vue-resourcenpm install mockjs3. 新建一个mockjs文件，输入代码：import Mock from 'mockjs';export default Mock.mock('http://g.cn', {'name': '@name','age|1-100': 100,'color': '@color'});这里@称为占位符 。4. 其它文件内容App.vue
<template><div id="app"><img src=https://www.isolves.com/it/cxkf/bk/2020-09-11/"./assets/logo.png">Start import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'import VueResource from 'vue-resource'require('./mock')Vue.use(ElementUI)Vue.use(VueResource)new Vue({el: '#app',render: h => h(App)})项目目录如下：
文章插图
三、运行测试
npm run dev
文章插图
每次点击按钮，在控制台都会显示随机的结果出来 。
四、 其它一些常用语法1. 占位符占位符类型占位符方法Basicboolean, natural, integer, float, character, string, range, date, time, datetime, nowImageimage, dataImageColorcolorTextparagraph, sentence, word, title, cparagraph, csentence, cword, ctitleNamefirst, last, name, cfirst, clast, cnameWeburl, domain, email, ip, tldAddressarea, regionHelpercapitalize, upper, lower, pick, shuffleMiscellaneousguid, id
占位符不满足使用的时候还可以进行扩展 。
2. 模板
// 生成随机长度字符Mock.mock({"string|1-10": "
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 2000余字长文讲解Excel中的“数据验证”，我收藏了
- 企业微信API使用基本教程
- Python中*args和*kwargs
- 如何使用VSCode调试JS？
- 唐朝外族将领 唐代异族名将
- 有关Google使用Go的新案例研究
- 中国古代英雄有哪些 中国古代十大民族英雄
- 中国程序员和国外程序员，差距在哪里？
- 在命令行中使用 nmcli 来管理网络连接
- 全国最大的县城是哪里？
