vue餓了麼學習-第十篇(配置路由)
阿新 • • 發佈:2019-02-19
1.在build檔案下,開啟dev-server.js檔案,新增引入express檔案,並使用它。
var express = require('express')
var app = express()
已經將data.json資料,引入到了這裡,如下
//9.5 定義資料讀取,引入全部資料,並分類賦給seller,goods,ratings var appDate = require('../data.json'); var seller = appDate.seller; var goods = appDate.goods; var ratings = appDate.ratings;
現在需要吧上面三個資料,seller,goods,ratings分別配置到不同的路由中去,
//把上面的三個資料,交給不同的路由下面的data,前端請求的時候接收到的res,就是這裡配置好了的對應data; var apiRoutes = express.Router(); apiRoutes.get('/seller',function (req, res) { res.json({ errno: 0, data: seller }) }) apiRoutes.get('/',function (req, res) { res.json({ errno: 0, data: goods }) }) apiRoutes.get('/ratings',function (req, res) { res.json({ errno: 0, data: ratings }) }) app.use('/api', apiRoutes)
程式碼如上,結尾不要忘了最後一句(路由埠的配置就完成了)
3.前端頁面的寫法,(開啟App.vue),建立一個cteated函式,如下
created () { this.$http.get('/api/seller').then( (res) => { //這裡請求的是seller路由,接收的是dev-server.js下面配置好的seller的data,可以在瀏覽器network中檢視是否請求到了seller檔案資源 res = res.body //errno是路由配置的請求成功引數,成功後則把資料資料返給vue例項中的seller if(res.errno === ERR_OK) { this.seller = res.data console.log(this.seller) } }) },
上面是請求的seller路由下的資料,要請求goods,ratings路由下的資料,只需要修改 ‘/api/seller’ 後面的seller為goods等。