使用JSON-Server搭建JSON伺服器
阿新 • • 發佈：2019-01-04
JSON-Server主要的作用是搭建一臺JSON伺服器，測試一些業務邏輯（我之前都是採用讀取檔案的方式尷尬）。
一、安裝
| 1 | npm install --save json-server |
前提是已經安裝好了node環境，並且初始化好了專案。
二、提供json資料檔案。
在專案根目錄下，新建一個 JSON 檔案db.json。
三、配置json-server
在build\webpack.dev.conf.js下配置，如果是用舊版本的手腳架工具初始化的專案，是在build/dev-server.js下配置。
| 1234567891011121314 | /*----------------jsonServer---------*//*引入json-server*/const jsonServer = require('json-server')/*搭建一個server*/const apiServer = jsonServer.create()/*將db.json關聯到server*/const apiRouter = jsonServer.router('db.json')const middlewares = jsonServer.defaults()apiServer.use(middlewares)apiServer.use(apiRouter)/*監聽埠*/apiServer.listen(3000, () => {console.log('JSON Server is running')}) |
四、訪問資料
配置完成後，要npm dev run 重啟專案，然後再位址列輸入http://localhost:3000 就可以訪問到資料。
五、設定代理
最後做一下瀏覽器代理設定，在 config/index.js中：
| 12345678910 | /*代理配置表，在這裡可以配置特定的請求代理到對應的API介面*//* 下面的例子將代理請求 /api/getNewsList 到 http://localhost:3000/getNewsList*/proxyTable: {'/api': {changeOrigin: true,// 如果介面跨域，需要進行這個引數配置target: 'http://localhost:3000',// 介面的域名pathRewrite: {'^/api': ''//後面可以使重寫的新路徑，一般不做更改}} |
具體設定代理的方法，參見：
六、最後驗證一下代理是否成功
在瀏覽器輸入地址：http://localhost:8080/api。
七、使用
使用vue-resouce傳送Ajax獲取資料。
| 123456 | this.$http.get('/api/getNewsList')//代替http://localhost:3000/getNewsList.then((res) => {this.newsList = res.data}, (err) => {console.log(err)}) |
轉載自：https://www.cnblogs.com/superlizhao/p/8618221.html