饿了吗数据API

这是我在做饿了吗项目时遇到的一些坑。

问题：

​ 1、在使用vu-cli脚手架搭建项目时，build目录中少了dev-server.js以及dev-client.js，数据接口怎么配置呢？

​ 2、不知道怎么在服务开启的时候接口数据也对应。

博主推荐在遇到问题时，多看看官方文档，会大有益处，废话不多说，接着走。

问题解决：

问题1、bulid目录少文件的原因是自己webpack版本过高（4.29.6）

配置数据接口：

第一步：

npm install express --save-dev

第二步：

最新版的vue-cli 的配置中浏览器服务都在webpack-dev-server 这个插件中,所以就在其 webpack.dev.conf.js 进行修改. 在webpack.dev.conf.js 文件中开始进行相关的数据获取。

在webpack.dev.conf.js添加:

const express = require('express')

var app = express()
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

问题2、在查看webpack插件配置文档时，发现有一个属性devServer.before ，于是对webpack.dev.conf.js 进行修改。

webpack.dev.conf.js

devServer: { 下添加：

,before: function(app,server) {
    app.get('/api/seller',function(req,res){
      res.json({
        errno:0,  //自定义错误码
        data:seller
      })
    });
    app.get('/api/goods',function(req,res){
      res.json({
        errno:0,
        data:goods
      })
    });
    app.get('/api/ratings',function(req,res){
      res.json({
        errno:0,
        data:ratings
      })
    });
  }
  },

最后重启webpack。

npm run dev

浏览器输入http://localhost:8080/api/ratings

发现已经有数据……

{"errno":0,"data":{"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":"已加入“外卖保”计划,食品安全保障"}],"avatar":"http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg","pics":["http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180","http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180","http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180","http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"],"infos":["该商家支持发票,请下单写好发票抬头","品类:其他菜系,包子粥店","北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340","营业时间:10:00-20:30"]}}

大功告成，，nice。