这是我在做饿了吗项目时遇到的一些坑。
问题:
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。
额 本文暂时没人评论 来添加一个吧
发表评论