普歌-碼上鴻鵠團隊:nuxt中使用mock隨機生成多條不同數據

• 一、nuxt中使用mock
• 二、使用mock隨機生成數據并獲取
• ~有問題可以評論區留言，喜歡的小伙伴可以點贊、關注、收藏哦 $???$

一、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，可以遍歷了

技術源于追求

~有問題可以評論區留言，喜歡的小伙伴可以點贊、關注、收藏哦 $???$

更多推薦：wantLG的《普歌-碼上鴻鵠團隊：Vue中用ele UI的tabs欄實現由路由參數控制》

---

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。