vue專案使用mock資料的幾種方式

2021-10-03 03:10:08 字數 2631 閱讀 9840

以下講解基於vuecli3.0建立的專案

首先我們來說一說vue/cli 3.0 與 2.0 的一些不同:

3.0 移除了 static 檔案目錄,新增了 public 目錄,這個目錄下的靜態資源不會經過 webpack 的處理,會被直接拷貝,所以我們能夠直接訪問到該目錄下的資源,靜態資料(如json資料、等)需要存放在這裡。

3.0 移除了 config、build 等配置目錄,如果需要進行相關配置我們需要在根目錄下建立 vue.config.js 進行配置即可。

方式一:借助mockjs外掛程式實現本地mock資料

1.安裝外掛程式:npm i mockjs -d;

2.在src目錄下建立乙個mock資料夾,在mock資料夾下建立乙個index.js和乙個json資料夾(用於存放專案需要的模擬資料),如下圖所示:

3.mock目錄下的index.js示例如下:

const mock = require('mockjs');

//格式: mock.mock( url, post/get , 返回的資料);

mock.mock('/index/foodlist', 'get', require('./json/foodlist.json'));

mock.mock('/index/foodlist2', 'post', require('./json/foodlist2.json'));

4.json資料夾下的json資料示例如下:

,]}

5.在main.js入口檔案中引入mock資料,不需要時,則注釋掉。

import vue from 'vue';

import router from './router';

require('./mock'); //引入mock資料,關閉則注釋該行

vue.config.productiontip = false;

new vue();

6.最後,在vue模板中使用即可

axios.get('/user/userinfo')

.then(function(res))

.catch(function(err));

方式二:在public資料夾放mock資料(無需使用mockjs外掛程式)1.在public資料夾下建立乙個mock資料夾,在mock資料夾裡建立專案需要的json檔案,目錄結構如下:

2.在vue.config.js裡進行路徑配置,如下:

3.最後,在vue模板中使用即可

// 模擬請求本地mock資料(不基於外掛程式)

注:但是本方式貌似只能使用get請求方式,不支援post等其它方式,具體還需再研究下。

方式三:前端本地啟動乙個nodejs服務,vue專案向nodejs服務請求mock資料

1.建立乙個node專案(為了方便,本例直接在vue專案根目錄建立,當然也可以是其它任何地方)

2.serve.js示例如下:

// url模組用於處理與解析 前端傳給後台的url,適用於get請求(不適用於post請求),詳情參見文件

啟動node服務:node serve

3.配置vue.config.js的proxy,解決跨域

注意:這裡配置的埠號不要和node的埠一樣,否則會報埠號被占用

3.最後,在vue模板中使用即可

// 模擬請求本地node服務

總結:以上介紹了三種使用mock資料的方式,方便前端開發在本地開發環境下開發專案,使前後端分離,加快了開發效率,個人建議使用方式一(使用方便、靈活)。

vue專案中使用mock

1 src下新建mock資料夾,mock資料夾下新建response目錄 造後台介面資料,輸出getuserinfo import mock from mockjs const random mock.random export const getuserinfo options userinfo....

在vue專案中mock的使用

模擬後台介面,提供頁面需要的資料。使用例子 使用 mock var mock require mockjs var data mock.mock 輸出結果 console.log json stringify data 資料模板中的每個屬性由3部分構成 name rule value 屬性名 生成規...

在vue專案中, mock資料

1.在根目錄下建立 test 目錄,用來存放模擬的 json 資料,在 test 目錄下建立模擬的資料 data.json 檔案 2.在build目錄下的 dev server.js的檔案作如下更改 3.在.vue做請求,就可以成功獲取data.json的資料了,下面使用 axios 進行請求axi...