最近自己在學(xué)vue的知識，其中遇到數(shù)據(jù)這一塊的問題爪膊，總結(jié)記錄下
跨域解決的方法
使用代理助泽，說到代理就想到es6中的代理proxy,這里說的是接口跨域的 vue proxyTable
我們在使用vue-cli啟動項(xiàng)目的時候npm run dev便可以啟動我們的項(xiàng)目了顾瞻，通常我們的請求地址是以localhost:8080來請求接口數(shù)據(jù)的膊存，localhost是沒有辦法設(shè)置cookie的判哥。
設(shè)置代理接口：
config index.js
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { //設(shè)置開始
'/api': {
target: 'https://api.douban.com/v2',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
代理其實(shí)是利用的就是 http-proxy-middleware 插件完成的遥倦；
入口文件
main.js
下面是自己的配置：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
Vue.prototype.$axios = axios;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
webpack.dev.conf.js 配置
// 后端代理
const express=require('express')
const axios=require('axios')
const app=express()
var apiRoutes=express.Router()
app.use('/api',apiRoutes)
//引用
devServer: {
before(app){
app.get('/api', (req, res) => {
})
})
},
組件中引用數(shù)據(jù)
created:function (){
var url='/api/movie/in_theaters';
this.$axios.get(url).then((response)=>{
console.log(response)
}).catch((e)=>{
console.log(e)
})
靜態(tài)路由數(shù)據(jù)模擬配置
webpack.dev.conf.js 配置
// 后端代理
const express=require('express')
const axios=require('axios')
const app=express()
var apiRoutes=express.Router()
app.use('/api',apiRoutes)
//引用本地?cái)?shù)據(jù)文件
var homeData=require('../src/data/homeData.json');
//引用
devServer: {
before(app){
app.get('/api/homeData', (req, res) => {
res.json({
errno:0,
data:homeData //配置返回函數(shù)名字
})
})
})
},
組件引用
data(){
return{
recommendData:[],
hotData:[]
}
},
created:function (){
this.fetchData();
this.$axios.get('/api/homeData').then((response)=>{
console.log(response.data)
})
},
methods:{
fetchData(){
this.$axios.get('/api/homeData').then((response)=>{
let data = response.data.data.recommend_feeds;
let recommend = [];
let hot = [];
for(var i in data){
if(data[i].card && data[i].card.name == '為你推薦'){
recommend.push(data[i]);
}else{
hot.push(data[i]);
}
}
this.recommendData=recommend;
this.hotData=hot;
})
}
}
