普歌-碼上鴻鵠團(tuán)隊(duì):nuxt中使用mock隨機(jī)生成多條不同數(shù)據(jù)

• 一、nuxt中使用mock
• 二、使用mock隨機(jī)生成數(shù)據(jù)并獲取
• ~有問題可以評(píng)論區(qū)留言，喜歡的小伙伴可以點(diǎn)贊、關(guān)注、收藏哦 $???$

一、nuxt中使用mock

第一步，下載兩個(gè)模塊

• 安裝mock,使用mokcjs產(chǎn)生隨機(jī)數(shù)據(jù) npm install mockjs --save-dev或者cnpm install mockjs --save-dev

• 安裝axios，用來發(fā)送ajax請(qǐng)求 npm install axios --save或者cnpm install axios --save

第二步創(chuàng)建axios基地址,創(chuàng)建一個(gè)utils文件夾，下面寫一個(gè)request.js

import axios from "axios";//創(chuàng)建axios實(shí)例 const service = axios.create({baseURL:"",//api的基地址,這里可以為空 }); export default service;

第三步創(chuàng)建mock(模擬一個(gè)test.js)，在js文件中先引入mock

const Mock = require();

• 下面是關(guān)于Mock.mock()配置,有關(guān)mock.mock()的API文檔
  4)第四步在nuxt.config.js引入mock

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

第五步，創(chuàng)建api文檔

• 我在api文件下創(chuàng)建了一個(gè)test.js的測(cè)試文件
  

最后一步，在vue中調(diào)用api，獲得mock模擬的數(shù)據(jù)

• 先在scirpt中引入需要的文件

import axios from "axios"; //這個(gè)是為用axios直接訪問引入的，如果是調(diào)用api中test就不需要 import testApi from "../api/test/test.js"

• 獲取數(shù)據(jù)的話有兩種方式獲取

• 第一種通過api方式獲取

//在methods中寫入函數(shù),最后在create()周期中調(diào)用(this.getTest()) getTest(){testApi.getTest().then(res => console.log(res.data)); }

• 第二種方式用axios直接訪問獲取

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

這就是最后獲取到的數(shù)據(jù),和mock定義的數(shù)據(jù)一樣

二、使用mock隨機(jī)生成數(shù)據(jù)并獲取

---

提示：步驟和上面一樣，只需要更改mock里面的內(nèi)容

---

我直接放mock里的代碼，我這里采取的是隨機(jī)生成8-15中任意條數(shù)據(jù)，并且每條數(shù)據(jù)不同

const Mock = require("mockjs"); //使用Mock自帶的random var Random = Mock.Random; let dynamicNew = []; let dynamicPuge = []; //隨機(jī)生成8-15條數(shù)據(jù) for (let i = 0; i < Random.natural(8, 15); i++) { //用mock自帶的數(shù)據(jù)模板let dynamicData = {id: "@id()", //id值imgurl: Random.dataImage(Random.size, Random.first()), //隨機(jī)生成一個(gè)64位編碼的圖片title: "@cword(4, 8)", //隨機(jī)生成4-8位的純漢字createTime: '@date("yyyy-MM-dd")', //隨機(jī)生成格式如2020-8-5的時(shí)間des: "@cparagraph(1, 4)" //生成1-4行的漢字};//將每次循環(huán)的數(shù)據(jù)放到數(shù)組中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); //將數(shù)據(jù)開放 export default [{ dataDynamicNew, dataDynamicPuge }];

如果大家需要不同的數(shù)據(jù)模板,這里放上傳送門mock的數(shù)據(jù)模板,里面有關(guān)數(shù)字、圖片、id、人名(中文和英文)等一般項(xiàng)目需要的都有。

最后和上面獲取數(shù)據(jù)的方式大同小異，我直接放代碼圖片：
注意：這種方式要引入axios (import axios from 'axios')


然后數(shù)據(jù)給到想要的變量里就OK，可以遍歷了

技術(shù)源于追求

~有問題可以評(píng)論區(qū)留言，喜歡的小伙伴可以點(diǎn)贊、關(guān)注、收藏哦 $???$

更多推薦：wantLG的《普歌-碼上鴻鵠團(tuán)隊(duì)：Vue中用ele UI的tabs欄實(shí)現(xiàn)由路由參數(shù)控制》

---

• 作者：wantLG
• 本文源自：wantLG的wantLG的《普歌-碼上鴻鵠團(tuán)隊(duì):在Nuxt(vue)渲染模板中使用mock.js隨機(jī)生成數(shù)據(jù)》
• 本文版權(quán)歸作者和CSDN共有，歡迎轉(zhuǎn)載，且在文章頁面明顯位置給出原文鏈接，未經(jīng)作者同意必須保留此段聲明，否則保留追究法律責(zé)任的權(quán)利。

總結(jié)

以上是生活随笔為你收集整理的普歌-码上鸿鹄团队:在Nuxt(vue)渲染模板中使用mock.js随机生成数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。