当前位置:网站首页>Mock模拟数据,并发起get,post请求(保姆级教程,一定能成功)
Mock模拟数据,并发起get,post请求(保姆级教程,一定能成功)
2022-08-03 17:52:00 【咖啡壶子】
Mock模拟数据,并发起get,post请求(保姆级教程,一定能成
第一步,创建一个脚手架项目。
vue create mockdemo
创建完成,在控制台安装mockjs,和axios
npm i mockjs
npm i axios
安装完成之后,重点来了,先在src文件夹下创建一个mock文件夹,然后在mock文件夹中创建一个index.js文件。
目录大概就是这么个目录,
index.js文件种应该写什么?
首先,你得知道,mock数据的规则,这个具体的可以到官网上学习(http://mockjs.com/)。
其次,mock了两个简单的数据。来上代码:
import Mock from "mockjs";
var {
userdata } = Mock.mock({
'userdata|10': [
{
name: "@cname()",
IDcard: "@id()",
address: "@city(true)"
}
]
})
Mock.mock('/user/userInfo', 'get', () => {
return {
code: 200,
message: '查询用户信息成功',
data: userdata
}
})
var {
newList } = Mock.mock({
'newList|20-30': [
{
id: "@increment(1)",
title: '@ctitle',
updat: '@date(yyyy-MM-dd hh:mm:ss)',
info: '@cparagraph(5,10)',
small: "@dataImage(300x200,电影图片)"
}
]
})
Mock.mock('/api/movie', 'get', () => {
return {
status: 200,
message: '获取电影列表成功!',
total: newList.length,
data: newList
}
})
mock完数据,怎么使用呢?
<template>
<div>
<!-- <div v-for="(item,index) in userInfo" :key="index">{
{item.info}}</div> -->
<div >{
{userInfo}}</div>
</div>
</template>
<script> import axios from "axios"; // 引入axios import '@/mock/index' // 引入mock数据 export default {
name: "", components: {
}, props: {
}, data() {
return {
userInfo: {
}, }; }, computed: {
}, methods: {
getUserInfo() {
// axios({method:'get',url:"/api/movie"}).then((res) => {
// console.log(res); // this.userInfo = res.data.data // }); axios({
method:'get',url:"/user/userInfo"}).then((res) => {
console.log(res); this.userInfo = res.data.data }); }, }, created() {
this.getUserInfo() }, mounted() {
}, }; </script>
<style scoped> </style>
运行起来就成功啦
边栏推荐
- websocket Handshake failed due to invalid Upgrade header
- 七夕
- cdc抽取mysql整个实例的binlog,有没有方案通过配置的方式将这些库表拆开分发到kafka
- JVM参数设置
- 常见荧光染料修饰多种基团及其激发和 发射波长数据一览数据
- 深度学习跟踪DLT (deep learning tracker)
- Is OnePlus Ace worth buying?Use strength to interpret the power of performance
- 这是Facebook母公司 关于元宇宙的80万亿美元豪赌
- select......for update 语句的功能是什么? 会锁表还是锁行?
- rhel8.3 系统下修改有线网卡配置信息实现联网
猜你喜欢
随机推荐
火热的印度工厂,带不动印度制造
ThreeJS简介
如何成为优秀的产品运营?
CodeTON Round 2 (Div. 1 + Div. 2, Rated, Prizes!) A-E
细胞不可渗透的荧光探针 锌离子荧光探针Zinquin 151606-29-0
理想L9旗舰级的安全性有多强?守护一家人安全出行“底线”
茅台日赚1.65亿,经销商日子却越来越难
383. Ransom Note
Crack: WebKitX ActiveX and WebKitX VHX
使用o.execute_sql 查询很很很小的表, 要7/8秒钟, 这个怎么解决
es6新增-async函数(异步编程的最终解决方案)
Discuz新闻资讯GBK模板
【机器学习】机器学习的基本概念/术语2
技术干货|如何将 Pulsar 数据快速且无缝接入 Apache Doris
opencv 直方图比较
多表查询最值
我们为何看好投资 DAO?
SkyWalking概要介绍
STM32——LCD—FSMC原理简介
【Deliberately practice the view of the back tube】deliberately practice