vue-cli搭建项目模拟后台接口数据,webpack-dev-conf.js文件配置

注:本篇写于2018-12,基于vue2.xxx

 

(一)路径:bulid / webpack.dev.conf.js 

1、在webpack.dev.conf.js 里面找到 const portfinder = require(‘portfinder’),然后在下面写上以下代码:

 

 1 /*模拟后台数据*/ 2 const express = require(‘express‘) 3 const app = express() 4 const router = express.Router() //拿到服务端的路由 5 const appData = require(‘./../mock/data.json‘) //加载模拟的json文件 6 const seller = appData.seller//获取对应的本地数据 7 const goods = appData.goods//获取对应的本地数据 8 app.use(router) 9 10 /*------end--------*/

 

如图一:

 

2、依然在 webpack.dev.conf.js 中,找到 devServer ,添加:

 

 1 /*----end----模拟后台数据*/ 2  before(app) { 3 app.get(‘/api/seller‘, (req, res) => { 4  res.json({ 5 errno: 0, 6  data: seller 7 })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用 8  }), 9 app.get(‘/api/goods‘, (req, res) => {10  res.json({11 errno: 0,12  data: goods13  })14  })15  },16 /*----end----模拟后台数据*/

 

如图二:

 至此,webpack-dev-conf.js配置完成,需要重启运行: npm run dev 才会生效!图二中的请求接口,‘/api/seller‘和‘/api/goods‘,需要对应的模拟数据data.json

(二)增加请求的模拟数据 data.json

数据名字、存放目录皆可自定义。基于此例,我在根目录新建:mock文件夹,然后在mock中新建data.json,

代码如下:

 

 1 { 2 "seller": { 3 "name": "粥品香坊(回龙观)", 4 "description": "蜂鸟专送", 5 "deliveryTime": 38, 6 "score": 4.2, 7 "serviceScore": 4.1, 8 "foodScore": 4.3, 9 10 "bulletin": "坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。",11 "supports": [12  {13 "type": 0,14 "description": "在线支付满28减5"15  },16  {17 "type": 1,18 "description": "VC无限橙果汁全场8折"19  }20  ],21 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"22  },23 "goods": {24 "name": "香辣鸡腿堡",25 "description": "蜂鸟专送",26 "deliveryTime": 2,27 "score": 4.8,28 "serviceScore": 4.6,29 "foodScore": 4.8,30 31 "bulletin": "身份第三个,时间方力申,2013年园博会指定餐饮服务商。",32 "supports": [33  {34 "type": 0,35 "description": "在线支付满28减5"36  },37  {38 "type": 1,39 "description": "VC无限橙果汁全场8折"40  }41  ],42 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"43  }44 }

 

配置到此,已经可以通过本地端口进行访问模拟的接口了:http://localhost:8080/api/seller 或者http://localhost:8080/api/goods

如图三:

 (三)可以尝试请求、打印一下

1、如在XX.vue文件中

1 created(){2 axios.get(‘/api/seller‘)3 .then(res=>{4  console.log(res)5  })6 .catch(err=>{7  console.log(err)8  })9 },

如图四:

此时可以查看打印结果,和请求结果:

如图五、六

 

 图六:

 

 

本地模拟数据完成,有问题直接说,有则改之无则加勉,谢谢各位道友

 

 

 

 

相关文章