1. 程式人生 > >vue餓了麼學習-第十篇(配置路由)

vue餓了麼學習-第十篇(配置路由)

1.在build檔案下,開啟dev-server.js檔案,新增引入express檔案,並使用它。

var express = require('express')
var app = express()

已經將data.json資料,引入到了這裡,如下

//9.5 定義資料讀取,引入全部資料,並分類賦給sellergoods,ratings
var appDate = require('../data.json');
var seller = appDate.seller;
var goods = appDate.goods;
var ratings = appDate.ratings;

現在需要吧上面三個資料,seller,goods,ratings分別配置到不同的路由中去,

//把上面的三個資料,交給不同的路由下面的data,前端請求的時候接收到的res,就是這裡配置好了的對應datavar 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
下面配置好的sellerdata,可以在瀏覽器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等。