vue 專案中使用mock假資料實現前後端分離

也是查了很多的資料，整理出來。實現了前後端的分離，用到的技術vue-cli，webpack，node，json-server。首先全域性安裝json-server

1 cnpm i json-server -g

安裝好之後，修改配置檔案，config-->index.js-->proxytable

1

proxytable: 9}
10 },

在目錄下建立乙個mock資料夾  「專案名」-->根目錄-->mock

目錄的結構如圖：

data裡面的資料格式如下

}

1 const jsonserver = require('json-server');

2 const server =jsonserver.create();34
//support middleware
5 const middleware =jsonserver.defaults();
6server.use(middleware);78
//支援載入多個db檔案
9 const _ = require('underscore');
10 const path = require('path');
11 const fs = require('fs');
12 const mockdir = path.join(__dirname, 'data');
13 const base ={};
14 const files =fs.readdirsync(mockdir);
15 files.foreach((file) =>);
18 const router =jsonserver.router(base);
1920
//處理登入邏輯
21 server.post('/account/login', (req, res) =>,
30 message: ''
31})
32})
33//
處理登出邏輯
34 server.post('/account/logout', (req, res) =>)
42})
4344
server.use(router)
4546
//返回自定義格式資料
47 router.render = (req, res) =>)53}
5455 server.listen(3000, () =>)

最後修改package.json檔案package.json-->scripts

1 "scripts": ,

啟動專案

npm run mockdev

最後在頁面中發出請求 ，我這裡使用的axios 在vue 中配置下

頁面的請求函式

vue專案中使用mock

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

在vue專案中, mock資料

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

在vue專案中mock的使用

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