vue中的一些小坑（3）
vue开发中mock数据实现接口
在开发中模拟数据，实现接口，主要是在webpack.dev.conf.js中配置代理
项目的目录结构
image.png
在data/data.json中的数据（还是之前小程序中的数据）
{
"companyinfo": {
"name": "深圳市天外天包装印刷有限公司",
"address": "广东 深圳市 宝安区 深圳市光明新区公明街道上村水荫路泛懋工业区12栋",
"telnum": "13410107979",
"qqnum": "2845703136",
"email": "2845703136@qq.com",
"position": {
"latitude": 22.795752,
"longitude": 113.904608,
"markers": [
{
"iconPath": "../../images/icon/location.png",
"id": 0,
"latitude": 22.795752,
"longitude": 113.904608,
"width": 32,
"height": 32
}
]
}
},
"slogan": [
{
"cl": "item01",
"txt": "品质",
"color": "#82a6f5",
"iconurl": "../../images/icon/icon01.png"
},
{
"cl": "item02",
"txt": "信誉",
"color": "#eaf048",
"iconurl": "../../images/icon/icon02.png"
},
{
"cl": "item03",
"txt": "优惠",
"color": "#9ff048",
"iconurl": "../../images/icon/icon03.png"
},
{
"cl": "item04",
"txt": "安全",
"color": "#f6d6ff",
"iconurl": "../../images/icon/icon04.png"
}
],
"bannerinfo": {
"imgUrls": [
{
"bid": "001",
"burl": "../../images/banner01.jpg"
},
{
"bid": "002",
"burl": "../../images/banner02.jpg"
},
{
"bid": "003",
"burl": "../../images/banner03.jpg"
},
{
"bid": "004",
"burl": "../../images/banner04.jpg"
}
],
"indicatorColor": "rgba(255,255,255,.8)",
"indicatorActivecolor": "#0174bb",
"indicatorDots": true,
"autoplay": true,
"interval": 5000,
"duration": 1000
},
"classification": [
{
"typeid": "001",
"typename": "矿泉水贴纸"
},
{
"typeid": "002",
"typename": "热缩膜标签"
},
{
"typeid": "003",
"typename": "珠光膜标签"
},
{
"typeid": "004",
"typename": "绿豆沙杯盖膜"
},
{
"typeid": "005",
"typename": "冰箱海报"
},
{
"typeid": "006",
"typename": "其他"
}
],
"productionlist": [
{
"pid": "001",
"title": " 支装水热缩膜标签 桶装水贴纸 珠光膜双头带胶标签 热缩膜洗洁精印刷",
"update_time": "2016-08-12",
"img_Url": "../../images/img/pro-img001.jpg",
"origin_price": "0.03",
"belong_to_classification": "矿泉水贴纸",
"scale_price": {
"price": "0.02",
"condition": "5000张以上"
},
"is_properties": {
"property": "推荐"
},
"tips": [
"热缩膜标签",
"热缩膜标签热缩膜标签厂家",
"热缩膜标签热缩膜标签厂家",
"缩膜标签"
],
"details": {
"is_Customized": true,
"shape": "长方形，圆形，椭圆",
"material": "pvc不干胶铜板不干胶",
"film": "覆光膜",
"description": "支装水热缩膜标签桶装水贴纸珠光膜双头带胶标签热缩膜洗洁精印刷",
"show_img": "../../images/img/pro-img001-details.jpg"
}
},
{
"pid": "002",
"title": " 一次性桶装水标签 透明防伪标签 一次性透明防伪标签",
"update_time": "2016-08-12",
"img_Url": "../../images/img/pro-img002.jpg",
"origin_price": "0.03",
"belong_to_classification": "矿泉水贴纸",
"scale_price": {
"price": "0.02",
"condition": "5000张以上"
},
"is_properties": {
"property": "推荐"
},
"tips": [
"标签",
"标签厂家",
"标签批发",
"标签报价"
],
"details": {
"is_Customized": true,
"shape": "长方形，圆形，椭圆",
"material": "pvc不干胶铜板不干胶",
"film": "覆光膜",
"description": "一次性桶装水标签透明防伪标签一次性透明防伪标签",
"show_img": "../../images/img/pro-img002-details.jpg"
}
},
{
"pid": "003",
"title": "供应深圳不干胶贴纸 深圳不干胶贴纸矿泉水通标 深圳不干胶贴纸矿泉水桶贴标签",
"update_time": "2016-08-12",
"img_Url": "../../images/img/pro-img003.jpg",
"origin_price": "0.03",
"belong_to_classification": "矿泉水贴纸",
"scale_price": {
"price": "0.02",
"condition": "5000张以上"
},
"is_properties": {
"property": "推荐"
},
"tips": [
"标签",
"标签厂家",
"标签批发",
"标签报价"
],
"details": {
"is_Customized": true,
"shape": "长方形，圆形，椭圆",
"material": "pvc不干胶铜板不干胶",
"film": "覆光膜",
"description": "供应不干胶贴纸矿泉水通标深圳不干胶贴纸矿泉水桶贴标签 天外天包装设备精良，技术精湛，力量雄厚，提供从设计、制版及印刷等一系列服务。☆ 桶装水不干胶不但能有效的防水、防尘，而且能更好的在流通环节上保护产品。 ☆ 产品表面光滑美观,印刷图案精美艳丽,视觉冲击力强,能较好的宣传、美观产品。☆ 该桶装水不干胶系列产品广泛应用于矿泉水、桶装水、纯净水、山泉水，桶装饮用水、食品等桶体包装。",
"show_img": "../../images/img/pro-img003-details.jpg"
}
},
...
]
}webpack配置
1.1 webpack.dev.conf.js配置
const appData = require('../src/data/data.json');
const companyinfo = appData.companyinfo;
const bannerinfo = appData.bannerinfo;
const classification = appData.classification;
const productionlist = appData.productionlist;
const apiRoutes = express.Router();
const app = express()
app.use('/api',apiRoutes)1.2在webpack.dev.conf.js的devServer中添加模拟的接口
devServer: {
...
watchOptions: {
poll: config.dev.poll,
},
//添加的配置
before(app){
app.get('/companyinfo',function(req,res){
res.json({
erron:0,
data:companyinfo
})
});
app.get('/bannerinfo',function(req,res){
res.json({
erron:0,
data:bannerinfo
})
});
app.get('/classification',function(req,res){
res.json({
erron:0,
data:classification
})
});
app.get('/productionlist',function(req,res){
res.json({
erron:0,
data:productionlist
})
});
}
},在vue文件中使用
通过vue-resource来实现ajax请求
created () {
//这里请求的是bannerinfo接口，其他接口类似
this.$http.get('/bannerinfo').then(
res => {
console.log(res);//第32行 将打印data.json中的数据
},
err => {
console.log(err);
}
);
}
image.png
这里的方法旨在练习vue而没有被提供接口的时自己模拟接口，在实际开发中，直接通过vue-resouce请求后台数据接口即可，
created () {
//这里请求的是bannerinfo接口，其他接口类似
this.$http.get('https://xxxx/common/api/index.php?service=Default.Flink&id=9').then(
res => {
console.log(res);//第32行 将打印data.json中的数据
},
err => {
console.log(err);
}
);
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读