vue开发中,对本地数据地址进行请求
2018-03-30 19:58
656 查看
原版配置在dev-server.js中,而新版的vue-webpack-template删除了dev-server.js,用webpack.dev.conf.js代替了,所以需要在webpack.dev.conf.js中进行配置。
先将data.json文件放入项目中
例如:data.json文件格式为
{"result" : {
"xxx" : "xxx",
"xxx" : "xxx"
}
}
webpack.dev.conf.js目录中
const express = require('express') //导入express模块const app = express() //创建一个express应用
const appData = require('../data.json') //导入json文件
const goods = appData.result //数据内容保存到goods中
const apiRoutes = express.Router() //创建一个路由
app.use('/api', apiRoutes) //将请求地址发送到路由
在devServer: {}中
before(app){
app.get('/api/goods', (req,res) => {
res.json({
erron: 0,
data: goods
})
})
}
启动服务,在地址栏输入localhost:8080/api/goods可以看到数据已经获取到
在vue中,使用vue-resource请求数据在main.js中
import vueResource from 'vue-resource' //导入vue-resource
Vue.use(vueResource) //引用vueResource
在App.vue中
created() {
this.$http.get('/api/goods').then((response) => {
response = response.body
console.log(response)
})
}
在控制台可以看到数据已经请求到了
可以定义一个空对象,将请求到的数据保存起来
export default {
data() {
return {
goods: {}
}
},
created() {
this.$http.get('/api/goods').then((response) => {
response = response.body
this.goods = response.data
})
}
}
这样数据就保存到goods中了
在组件中传人goods
在组件中用props接收
props: {
goods: {
type: Object
}
}
之后就可以绑定数据了
相关文章推荐
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- vue开发请求本地模拟数据的配置方法
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- vue开发请求本地数据旧版本dev-server.js,新版本webpack.dev.conf.js
- VUE开发请求本地数据的配置
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- vue实现app问题总结(一)vue-cli本地开发数据Mock
- iOS开发中大部分App的网络数据交换是基于HTTP协议的。本文将简单介绍在Swift中使用HTTP进行网络请求的几种方法。
- Android开发本地及网络Mp3音乐播放器(十一)使用Jsoup组件请求网络,并解析音乐数据
- Mock.js -- 生成随机数据,拦截 Ajax 请求,让前端攻城师独立于后端进行开发
- Android开发本地及网络Mp3音乐播放器(十一)使用Jsoup组件请求网络,并解析音乐数据
- Vue2.0 使用vue-resource 模拟网络请求加载本地数据
- vue项目开发遇到的问题:如何改变请求的host以及referer抓取做了host以及referer限制的接口数据
- 【vue】本地开发mock数据支持
- Vue-cli 使用json server在本地模拟请求数据
- VUE请求本地数据的配置json-server
- ios开发---对网络请求的数据进行解码(Unicode)
- 详解vue-cli 本地开发mock数据使用方法
- vue中请求本地的json数据