vue中使用json-server,實現mock數據

學習各種資料,整理出一份可用的mock方式(如有問題還請各位大神多多指教)

>使用到的技術:

?????? vue-cli、webpack、node、npm、json-server

完整步驟:

(基礎版)

? 1、全局安裝json-server

?????? npm i json-server -g

?
2、安裝好之后,修改配置文件,config-->index.js-->proxyTable

????? proxyTable: {

? ? ? ? ? '/api/': {

? ? ? ? ?? target: 'http://localhost:3000',

? ? ? ? ?? changeOrigin: true,

? ? ? ? ?? secure: false,

? ? ? ? ?? pathRewrite: {

? ? ? ? ? ? ? ? ? '^/api/': ''

? ? ? ? ? ? }

? ? ? ? ? }

? ???? },

3、在目錄下創建一個mock文件夾

????? 新建一個db.json文件

???????????? {

????????????????? "data":{

?????????????????????? "data":"world",

? ? ? ? ? ? ? ? ? ? ??? "status":0,

? ? ? ? ? ? ? ? ? ? ? ?? "msg":"success"

? ? ? ? ? ? ? ? ? ?? }

?????????????? }

4、修改package.json文件package.json-->scripts

????? "scripts": {

????????????? "dev": "node build/dev-server.js",

????????????? "start": "node build/dev-server.js",

????????????? "build": "node build/build.js",

? ? ? ? ? ?? "mock": "node mock/db.json --post 9090",

???????????? "mockdev": "npm run mock & npm run dev"

??????? },

5、啟動項目,再啟動服務

???? npm run dev

???? npm run mock

或者

??? npm run mock

6、頁面請求

??? this.$http.get('/api/data').then((res)=>{

? ? ? ? ? console.log(res)

? ? ? })


(進階版)

因為項目內可能不是只是需要一個json文件,可能存在這種情況,如果每個文件都去配置就很麻煩,可以直接在mock文件夾里編寫一個server.js


1、2步驟同上,步驟3創建文件夾如上

4、創建server.js



5、修改package.json文件package.json-->scripts

"scripts": {

????????????? "dev": "node build/dev-server.js",

????????????? "start": "node build/dev-server.js",

????????????? "build": "node build/build.js",

? ? ? ? ? ?? "mock": "node mock/server.js", ///該條配置不一樣

???????????? "mockdev": "npm run mock & npm run dev"

??????? },

6、啟動項目并啟動服務

然后就是開始你的表演啦^0^

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容