目录
webpack-dev-server

我们想要给我们的mock data 找一个接口请求,原版配置在 dev-server.js ,新版的 vue-webpack-template 删除了dev-server.js,改用webpcak.dev.conf.js代替(具体更新见github:switch to webpack-dev-server

switch to webpack-dev-server

// # webpack.dev.conf.js
// 在const portfinder = require('portfinder')添加我们需要的一些模块
// node的开发框架express来简化操作
const express = require('express')
const app = express()
// mock data
const appDate = require('../mock/data.json')
const seller = appDate.seller;
const goods = appDate.goods;
const ratings = appDate.ratings;

1、get请求配置

# webpack.dev.conf.js
// 在devServer选项中添加以下内容
before(app){
  app.get('/api/seller',(req,res)=>{
    res.json({
      errno : 0,
      data : seller
    })
  })
  app.get('/api/goods/',(req,res)=>{
    res.json({
      errno : 0,
      data : goods
    })
  })
  app.get('/api/ratings',(req,res)=>{
    res.json({
      errno : 0,
      data : ratings
    })
  })
}

关于devServer.before() webpack有很详细的解释,并且给出了一个例子,它提供了在服务器内部所有中间件之前执行的自定义中间件的能力,用它可以来自定义处理程序

devServer.before

修改完配置之后,我们需要重新运行命令npm run dev重新编译即可

然后标题栏访问

http://localhost:8080/api/seller

api/seller

同样的,我们访问

http://localhost:8080/api/goods
// 和
http://localhost:8080/api/ratings

同样得到了我们的mock data,哈哈,终于给我们的mock data找了一个接口

2、post请求配置

如果配置post请求,我们可以做一下配置

// # webpack.dev.conf.js
app.post('/api/foods',(req,res)=>{
  res.json({
    errno : 0,
    data : foods
  })
})
// 在组件中
// # ..vue
created(){
  this.$http.post('http://localhost:8080/api/foods').then(res)=>{
    console.log(res)
  }
}

这样我们的data mock就有接口可以访问喽。

文章作者: okaychen
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 浅笔墨画❀琐碎小记

评论
2