Utilisez les technologies webpack+vuex+axios pour implémenter des données de requêtes inter-domaines (tutoriel détaillé)-js tutoriel-php.cn

Utilisez les technologies webpack+vuex+axios pour implémenter des données de requêtes inter-domaines (tutoriel détaillé)

亚连

Libérer： 2018-06-01 09:50:26

original

1963 Les gens l'ont consulté

Cet article présente principalement les données de requêtes inter-domaines webpack+vuex+axios. Maintenant, je les partage avec vous et les donne comme référence.

Cet article présente l'exemple de code des données de requête inter-domaines webpack+vuex+axios et le partage avec tout le monde. Les détails sont les suivants :

Utilisez vue-li pour créer le projet webpack. et modifiez le fichier bulid/config/index.js

dev: {
  env: require(&#39;./dev.env&#39;),
  port: process.env.PORT || 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: &#39;static&#39;,
  assetsPublicPath: &#39;/&#39;,
  proxyTable: {
   &#39;/v2&#39;: {
     target: &#39;http://api.douban.com&#39;,
     changeOrigin: true,
     pathRewrite: {
      &#39;^/v2&#39;: &#39;/v2&#39;
    } 
   }
  },
 }

Copier après la connexion

Dans action.js, si vous souhaitez faire une requête interdomaine

, définissez action.js :

import axios from &#39;axios&#39;
export const GET_IN_THEATERS = ({
 dispatch,
 state,
 commit
}) => {
 axios({
  url: &#39;/v2/movie/in_theaters&#39;
 }).then(res => {
  commit(&#39;in_theaters&#39;, res.data)
 })
}

Copier après la connexion

Utiliser dans le composant :

<template>
  <p class="movie-page">
    <ul class="clearfix">
      <movies-item v-for="(item,index) in movie_list" :key="index" :movie="item"></movies-item>
    </ul>
  </p>
</template>
<script>
import {mapState, mapActions, mapGetters} from &#39;vuex&#39;;
import MoviesItem from "./movie-item";
export default {
  data () {
    return {
      
    }
  },
  components: {
    MoviesItem
  },
  computed: {
    ...mapState({
      movie_list: state => {
        return state.in_theaters.subjects
      }
    })
  },
  methods: {
    
  },
  created () {
    this.$store.dispatch(&#39;GET_IN_THEATERS&#39;)
  },
  mounted () {
  }
}
</script>
<style lang="scss">
@import "./../../assets/reset.scss";
@import "./../../assets/main.scss";
.movie-page{
  padding: 0 rem(40);
}
</style>

Copier après la connexion

Si vous souhaitez traverser un domaine au sein du composant

Définir dans main.js :

import axios from &#39;axios&#39;
// 将 axios 改写为 Vue 的原型属性,使在其它的组件中可以使用 axios
Vue.prototype.$axios = axios

Copier après la connexion

Définir dans le composant :

<template>
  <p class="movie-page">
    <ul class="clearfix">
      <movies-item v-for="(item,index) in movie_list" :key="index" :movie="item"></movies-item>
      
    </ul>
  </p>
</template>
<script>
import MoviesItem from "./movie-item";
export default {
  data () {
    return {
      movie_list: []
    }
  },
  components: {
    MoviesItem
  },
  computed: {
    
  },
  methods: {
  },
  created () {
    
  },
  mounted () {
    this.$axios.get(&#39;/v2/movie/in_theaters&#39;).then(res => {
      this.movie_list = res.data.subjects
    }, res => {
      console.infor(&#39;error&#39;)
    })
  }
}
</script>
<style lang="scss">
@import "./../../assets/reset.scss";
@import "./../../assets/main.scss";
.movie-page{
  padding: 0 rem(40);
}
</style>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Implémentation Vue.js du glissement aléatoire des images

Résoudre Vue Modifier le tableau via ce qui suit tableau, le problème du rendu de la page non

Vue2.0 axios solution au problème de rendu inter-domaines

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!