vue2.0中 axios 在没有dev-server.js下的 本地数据请求方法
1、package.json安装 axios vue-axio
"dependencies": {
"axios": "^0.18.0",
"vue-axios": "^2.1.1",
},
控制台安装:
npm install
2、main.js 配置
import axios from 'axios' // 本地JSON
import VueAxios from 'vue-axios' // 本地JSON
Vue.use(VueAxios, axios)
3、webpack.dev.conf.js 配置json访问
const portfinder = require('portfinder')
//在const portfinder = require(‘portfinder')后添加
const express = require('express') // nodejs开发框架express,用来简化操作
const app=express() // 创建node.js的express开发框架的实例
var appData = require('../data.json') //加载本地数据文件
// json数据名
var seller = appData.seller //商家数据
var goods = appData.goods //商品数据
var ratings = appData.ratings //评论数据
var apiRoutes = express.Router() // 编写路由
app.use('/api',apiRoutes) // 所有通过接口相关的api都会通过api这个路由导向到具体的路由
watchOptions: {
poll: config.dev.poll,
},
before(app) {
app.get('/api/seller',function(req,res){
//服务端收到请求后返回给客户端一个json数据
res.json({
//当我们数据正常时,我们通过传递errno字符为0表示数据正常
errno:0,
//返回json中卖家数据
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
})
})
},
4、界面访问:
<script>
import axios from 'axios'
export default {
name: 'App',
data () {
return {
seller: [] // 展示部分
}
},
created () {
this.getGoods() // 本地JSON
},
methods: {
// 本地json获取商品数据
getGoods () {
axios.get('/api/seller').then((res) => {
// this.seller = res.data.data
console.log(res.data.data);
})
}
}
}
</script>
5、浏览器访问 http://localhost:8080/api/seller