VUE開發請求本地數據的配置,早期的vue-lic下面有dev-server.js和dev-client.js兩文件,請求本地數據在dev-server.js裏配置,最新的vue-webpack-template 中已經去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以配置本地訪問在webpack.dev.conf.js裏配置即可。
1、舊版dev-server.js配置本地數據訪問:
在const app = express()後,const compiler = webpack(webpackConfig)前配置即可,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | var appData = require( '../data.json' ) var seller = appData.seller var goods = appData.goods var ratings = appData.ratings var foods = appData.foods var pice = appData.pice var apiRoutes = express.Router() apiRoutes.post( '/foods' , function (req, res) { res.json({ errno: 0, data: foods }); }) apiRoutes.get( '/seller' , function (req, res) { res.json({ errno: 0, data: seller }); }) apiRoutes.get( '/goods' , function (req, res) { res.json({ errno: 0, data: goods }) }) apiRoutes.get( '/ratings' , function (req, res) { res.json({ errno: 0, data: ratings }); }) apiRoutes.get( '/pice' , function (req, res) { res.json({ errno: 0, data: pice }); }) app.use( '/api' ,apiRoutes) |
2、新版webpack.dev.conf.js配置本地數據訪問:
在const portfinder = require(‘portfinder’)後添加
1 2 3 4 5 6 7 8 9 | //首先 const express = require( 'express' ) const app = express() var appData = require( '../data.json' )//加載本地數據文件 var seller = appData.seller//獲取對應的本地數據 var goods = appData.goods var ratings = appData.ratings var apiRoutes = express.Router() app.use( '/api' , apiRoutes) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //然後找到devServer,在裏面添加 before(app) { app.get( '/api/seller' , (req, res) => { res.json({ errno: 0, data: seller })//接口返回json數據,上面配置的數據seller就賦值給data請求後調用 }), app.get( '/api/goods' , (req, res) => { res.json({ errno: 0, data: goods }) }), app.get( '/api/ratings' , (req, res) => { res.json({ errno: 0, data: ratings }) }) } 有的同學說報錯,不能識別before,注意看下你的配置。 |
1 |
補充說一下,有的同學配置後說不能訪問,所有的修改配置都需要重新啓動運行命令的:npm run dev才能生效(切記 ),還有data.json數據也不能少,就放在跟目錄下跟index.html同級;data.json的部分數據:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | { "seller" : { "name" : "粥品香坊(回龍觀)" , "description" : "蜂鳥專送" , "deliveryTime" : 38, "score" : 4.2, "serviceScore" : 4.1, "foodScore" : 4.3, "rankRate" : 69.2, "minPrice" : 20, "deliveryPrice" : 4, "ratingCount" : 24, "sellCount" : 90, "bulletin" : "粥品香坊其烹飪粥料的祕方源於中國千年古法,在融和現代製作工藝,由世界烹飪大師屈浩先生領銜研發。堅守純天然、0添加的良心品質深得消費者青睞,發展至今成爲粥類的引領品牌。是2008年奧運會和2013年園博會指定餐飲服務商。" , "supports" : [ { "type" : 0, "description" : "在線支付滿28減5" }, { "type" : 1, "description" : "VC無限橙果汁全場8折" }, { "type" : 2, "description" : "單人精彩套餐" }, { "type" : 3, "description" : "該商家支持發票,請下單寫好發票擡頭" }, { "type" : 4, "description" : "已加入“外賣保”計劃,食品安全保障" } ], "pics" : [ ], "infos" : [ "該商家支持發票,請下單寫好發票擡頭" , "品類:其他菜系,包子粥店" , "北京市昌平區回龍觀西大街龍觀置業大廈底商B座102單元1340" , "營業時間:10:00-20:30" ] } } |
這樣就可以訪問本地接口:https://localhost:8080/api/seller 了
以上爲get請求,有同學問post怎麼設置,再補充下POST請求:
1 2 3 4 5 6 7 | 老版本: apiRoutes.<strong>post</strong>( '/foods' , function (req, res) { //注意這裏改爲post就可以了 res.json({ errno: 0, data: foods }); }) |
1 2 3 4 5 6 7 | 新版本: app.post( '/api/foods' , function (req, res) { // 注意這裏改爲post就可以了 res.json({ errno: 0, data: foods }); }) |
1 2 3 4 5 6 | 在組件裏面: created () { console.log(response) }) } |
原文轉自:https://www.2cto.com/kf/201712/704330.html