VueJS中使用前端虚拟接口Mock.js
时间:2022-07-25
本文章向大家介绍VueJS中使用前端虚拟接口Mock.js,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、简介
Mock.js是一个基于NodeJS的用来模拟API的工具,可以方便让前端开发人员在开发过程中用来模拟API接口,方便与后端的联调工作,尤其方便在Vue项目中使用。
官网地址: http://mockjs.com/ 代码托管地址: https://github.com/nuysoft/Mock
二、上手使用
1. 创建一个Vue项目
可使用脚手架生成,这里为了方便直接使用HBuilderX创建了一个 element-ui 项目 。
2. 安装依赖
npm install vue-resource
npm install mockjs
3. 新建一个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="./assets/logo.png">
<div>
<el-button @click="startHacking">Start</el-button>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
methods: {
startHacking () {
Vue.http.get('http://mysite.com').then(
(successData) => {console.log(successData.body);},
(fileData) => {console.log(fileData);}
)
}
}
}
</script>
<style>
#app {
font-family: Helvetica, sans-serif;
text-align: center;
}
</style>
main.js
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": "★"
})// 生成固定长度字符Mock.mock({ "string|3": "★★★"
})// 生成1-100之间的随机数字Mock.mock({ "number|1-100": 100
})// 生成随机小数Mock.mock({ "number|1-100.1-10": 1
})// 生成随机布尔值Mock.mock({ "boolean|1": true
})// 从键值对里随机取两个值Mock.mock({ "object|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}})// 从数组里随机取一个值Mock.mock({ "array|1": [
"AMD",
"CMD",
"UMD"
]})
更多示例可到官网:http://mockjs.com/examples.html 查看。
来源:
https://www.toutiao.com/i6871065404081439245/
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 短视频商城源码,制作彩色验证码
- ubuntu下的mysql安装与使用
- 排序算法
- 并发编程框架Disruptor之高性能设计
- 3分钟短文:Laravel说要用软删除,可不要真删
- leetcode队列之设计循环双端队列
- MySQL8.0的binlog详解
- Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果
- Maven 编译拷贝资源的时候提示 UTF-8 编码信息
- Qt音视频开发30-Onvif事件订阅
- 干掉 Navicat:正版,MySQL 官方客户端真香!
- CentOS 搭建 K8S 环境教程,一次性成功,收藏了!
- IDEA 真香!找出全部未被使用的代码只用了 2 秒钟!
- ArrayList 插入 1000w 条数据之后,我怀疑了 Java 虚拟机。。。
- 本地存储应用案例 ToDoList