在Nuxt(vue)渲染模板中使用mock.js随机生成数据

一、nuxt中使用mock

1. 第一步，下载两个模块

• 安装mock,使用mokcjs产生随机数据 npm install mockjs --save-dev或者cnpm install mockjs --save-dev

• 安装axios，用来发送ajax请求 npm install axios --save或者cnpm install axios --save

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

import axios from "axios";

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

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

const Mock = require();

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

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

5. 第五步，创建api文档

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

6. 最后一步，在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里面的内容

---

1. 我直接放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()", //id
    imgurl: 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 }];

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

技术源于追求

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

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

---

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