一、nuxt中使用mock

第一步，下载两个模块

安装mock,使用mokcjs产生随机数据 npm install mockjs --save-dev或者cnpm install mockjs --save-dev
安装axios，用来发送ajax请求 npm install axios --save或者cnpm install axios --save

第二步创建axios基地址,创建一个utils文件夹，下面写一个request.js

import axios from "axios";//创建axios实例
const service = axios.create({baseURL:"",//api的基地址,这里可以为空
});
export default service;

第三步创建mock(模拟一个test.js)，在js文件中先引入mock

const Mock = require();

下面是关于Mock.mock()配置,有关mock.mock()的API文档
4)第四步在nuxt.config.js引入mock

//在配置添加mockplugins:[{src:"@/mock/test",ssr:false}]

第五步，创建api文档

我在api文件下创建了一个test.js的测试文件

最后一步，在vue中调用api，获得mock模拟的数据

先在scirpt中引入需要的文件

import axios from "axios";  //这个是为用axios直接访问引入的，如果是调用api中test就不需要
import  testApi from "../api/test/test.js"

获取数据的话有两种方式获取

第一种通过api方式获取

//在methods中写入函数,最后在create()周期中调用(this.getTest())
getTest(){testApi.getTest().then(res => console.log(res.data));
}

第二种方式用axios直接访问获取

//同样需要在create中调用
getTest2(){axios.get("/puge/test2").then(res => console.log(res.data)).catch(err => console.log(err));
}

这就是最后获取到的数据,和mock定义的数据一样

二、使用mock随机生成数据并获取

提示：步骤和上面一样，只需要更改mock里面的内容

我直接放mock里的代码，我这里采取的是随机生成8-15中任意条数据，并且每条数据不同

const Mock = require("mockjs");
//使用Mock自带的random
var Random = Mock.Random;
let dynamicNew = [];
let dynamicPuge = [];
//随机生成8-15条数据
for (let i = 0; i < Random.natural(8, 15); i++) {//用mock自带的数据模板let dynamicData = {id: "@id()", //id值imgurl: Random.dataImage(Random.size, Random.first()), //随机生成一个64位编码的图片title: "@cword(4, 8)",   //随机生成4-8位的纯汉字createTime: '@date("yyyy-MM-dd")',  //随机生成格式如2020-8-5的时间des: "@cparagraph(1, 4)"  //生成1-4行的汉字};//将每次循环的数据放到数组中dynamicNew.push(dynamicData);
}
const dataDynamicNew = Mock.mock("/puge/dynamicNews", "get", dynamicNew);for (let i = 0; i < Random.natural(8, 15); i++) {let dynamicData = {id: "@id()", //idimgurl: Random.dataImage(Random.size, Random.first()),title: "@cword(4, 8)",createTime: '@date("yyyy-MM-dd")',des: "@cparagraph(1, 4)"};dynamicPuge.push(dynamicData);
}
const dataDynamicPuge = Mock.mock("/puge/dynamicPuge", "get", dynamicPuge);
//将数据开放
export default [{ dataDynamicNew, dataDynamicPuge }];

如果大家需要不同的数据模板,这里放上传送门mock的数据模板,里面有关数字、图片、id、人名(中文和英文)等一般项目需要的都有。
最后和上面获取数据的方式大同小异，我直接放代码图片：
注意：这种方式要引入axios (import axios from 'axios')

然后数据给到想要的变量里就OK，可以遍历了

技术源于追求

~有问题可以评论区留言，喜欢的小伙伴可以点赞、关注、收藏哦 ♥♥♥\color{red}{♥♥♥}♥♥♥

更多推荐：wantLG的《普歌-码上鸿鹄团队：Vue中用ele UI的tabs栏实现由路由参数控制》

作者：wantLG
本文源自：wantLG的wantLG的《普歌-码上鸿鹄团队:在Nuxt(vue)渲染模板中使用mock.js随机生成数据》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。

普歌-码上鸿鹄团队:在Nuxt(vue)渲染模板中使用mock.js随机生成数据相关推荐

普歌-码上鸿鹄团队：配合node+MongoDB后台+vue-cli用API接口获取数据库数据
前端:Node.js+MongoDB模拟后台数据并通过api在Vue中获取数据(以vivo官网顶部栏为例) 话不多说,上操作----编程萌新,欢迎大家在评论区提建议!
普歌-码上鸿鹄团队:(tab栏)nuxt+element实现路由传参控制tab栏
普歌-码上鸿鹄团队:Vue中用ele UI的tabs栏实现由路由参数控制 1. 实现思路(vue+nuxt+eleui) 1) 第一步用链接先传递参数,去到tabs栏的页面接收参数 2) 第二步用wa ...
普歌-码上鸿鹄团队：vue/Nuxt实现当年或每年哀悼日网站全站变灰
html/css/vue根据时间全站自动变灰 1. 当年时间-全站变灰 2. 如果要设置每年固定日期变灰(我这里只设置了国家公祭日(南京)和汶川地震) 2.1这里演示在vue项目中如何使用 vue-c ...
普歌-码灵团队-java中的equals方法和toString方法及总结
普歌-码灵团队:Object类中的方法介绍及其用法一.Object类二.方法介绍 1.toString方法 2.重写equals方法: 3. 拓展三.总结一.Object类的简单介绍二.Ob ...
普歌-码灵团队-日期和时间的类
普歌-码灵团队-日期和时间的类一.毫秒值的概念和作用二.Date类的构造方法和成员方法构造方法: 空参构造:获取当前系统的日期和时间带参构造:Date(long date):传递毫秒值,把毫秒 ...
【码上实战】【立体匹配系列】经典PatchMatch: （3）随机初始化
下载完整源码,点击进入: https://github.com/ethan-li-coding/PatchMatchStereo 欢迎同学们在Github项目里讨论,如果觉得博主代码质量不错,右上角s ...
普歌-码灵团队——简述io
io io概述什么是io io的分类字节流字节输出流字节输出流的续写和换行字节输入流字节输入流读取字节数据字符流字符输入流 Reader类和FileReader类字符输入流读取字符数 ...
Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码
1. 下载安装包 npm i qrcodejs2 -S 2. 在要生成二维码的页面或组件内导入qrcodejs2 import QRCode from "qrcodejs2"; 3 ...
普歌-码灵团队-System类，StringBuilder类的常用方法详解
System类,StringBuilder类的常用方法详解(java基础必掌握)java面试必问) System类的介绍: System类中常用方法: 1.System.currentTimeMill ...
随机生成数据字母混合的兑换码（优惠券码红包码）
package com.yzcx.utils;/*** @Description: 随机生成兑换码(数字和字母的字符串)* @Author: xgs* @Date: 2019/11/2 10:04*/ ...

普歌-码上鸿鹄团队:在Nuxt(vue)渲染模板中使用mock.js随机生成数据

普歌-码上鸿鹄团队:nuxt中使用mock随机生成多条不同数据

一、nuxt中使用mock

二、使用mock随机生成数据并获取

技术源于追求

~有问题可以评论区留言，喜欢的小伙伴可以点赞、关注、收藏哦 ♥♥♥\color{red}{♥♥♥}♥♥♥

普歌-码上鸿鹄团队:在Nuxt(vue)渲染模板中使用mock.js随机生成数据相关推荐

最新文章

热门文章