Dieses Mal zeige ich Ihnen, wie Sie vue2.0axios für domänenübergreifendes Rendern verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von vue2.0axios für domänenübergreifendes Rendern? , lass uns einen Blick darauf werfen.
(Scaffolding vue-cli verwendet)
Schritt eins: Verwenden Sie die folgende Deklaration in main.js mit
import axios from 'axios'; Vue.prototype.$axios=axios;
Dann können Sie in anderen Vue-Komponenten dies.$axios aufrufen und
Schritt 2: ProxyTable im Webpack konfigurieren (Index unter config .js)
dev:
{
加入以下
proxyTable:
{
'/api':
{
target:
'http://api.douban.com',//设置你调用的接口域名和端口号
别忘了加http
changeOrigin:
true,
pathRewrite:
{
'^/api':
'/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
比如我要调用'http://api.douban.com/v2/movie/top250'，直接写‘/api/v2/movie/top250'即可
}
}
},Schritt 3:
Probieren Sie es aus, die domänenübergreifende Arbeit ist erfolgreich, aber bitte beachten Sie: Ja, Dies ist nur ein domänenübergreifendes Problem, das in der Entwicklungsumgebung (dev) gelöst wird. Wenn es tatsächlich auf dem Server in der Produktionsumgebung bereitgestellt wird, treten immer noch domänenübergreifende Probleme auf, wenn es nicht aus derselben Quelle stammt. Der von uns bereitgestellte Server-Port ist 3001, was ein gemeinsames Debuggen des Front-Ends und des Back-Ends erfordert. Für ein einstufiges Front-End können wir es separat in Produktions- und Entwicklungsumgebungen in config/dev.env.js und prod testen. env.js, also in der Entwicklungs-/Produktionsumgebung, konfigurieren Sie die angeforderte Adresse API_HOST. In der Entwicklungsumgebung verwenden wir die oben konfigurierte Proxy-Adress-API und verwenden die normale Schnittstellenadresse in der Produktionsumgebung, also konfigurieren Sie sie wie folgtmodule.exports = merge(prodEnv, {
NODE_ENV: '"development"',//开发环境
API_HOST:"/api/"
})module.exports = {
NODE_ENV: '"production"',//生产环境
API_HOST:'"http://api.douban.com"'
}instance.post(process.env.API_HOST+'user/login', this.form)
Schritt 4:
<template>
<p>
<ul>
<li v-for="item in movieArr">
<span>{{item.title}}</span>
</li>
</ul>
<button @click="sayOut">渲染</button>
</p>
</template>
<script>
export default {
data () {
return {
movieArr : []
}
},
methods: {
sayOut () {
this.$axios.get('/api/v2/movie/top250')
.then((response) => {
console.log(response.data.subjects)
this.movieArr = response.data.subjects // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例 然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值 这里要注意一下 我被坑了半天 希望小伙伴不要被坑
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>So verwenden Sie xe-utils in vue
vue-router zeigt beim Erstellen keine Routen an So gehen Sie mit der Seite um
Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue2.0axios domänenübergreifend und rendern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
