普歌-碼上鴻鹄團隊:在Nuxt(vue)渲染模闆中使用mock.js随機生成資料

普歌-碼上鴻鹄團隊:nuxt中使用mock随機生成多條不同資料

• 一、nuxt中使用mock
• 二、使用mock随機生成資料并擷取
• ~有問題可以評論區留言，喜歡的小夥伴可以點贊、關注、收藏哦 ♥ ♥ ♥ \color{red}{♥♥♥} ♥♥♥

一、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

1. 第二步建立axios基位址,建立一個utils檔案夾，下面寫一個request.js

   

import axios from "axios";

//建立axios執行個體
const service = axios.create({
  baseURL:"",//api的基位址,這裡可以為空
});
export default service;
           

1. 第三步建立mock(模拟一個test.js)，在js檔案中先引入mock

• 下面是關于Mock.mock()配置,有關mock.mock()的API文檔

  4)第四步在nuxt.config.js引入mock

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

1. 第五步，建立api文檔

• 我在api檔案下建立了一個test.js的測試檔案

  

1. 最後一步，在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 }];

           

1. 如果大家需要不同的資料模闆,這裡放上傳送門mock的資料模闆,裡面有關數字、圖檔、id、人名(中文和英文)等一般項目需要的都有。
2. 最後和上面擷取資料的方式大同小異，我直接放代碼圖檔：

   注意：這種方式要引入axios (import axios from 'axios')

   

   

   然後資料給到想要的變量裡就OK，可以周遊了

技術源于追求

~有問題可以評論區留言，喜歡的小夥伴可以點贊、關注、收藏哦 ♥ ♥ ♥ \color{red}{♥♥♥} ♥♥♥

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

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