À propos de la résolution des conflits de routage inter-domaines par Vue

Vue.js (prononcé /vjuː/, similaire à view) est un framework progressif permettant de créer des interfaces utilisateur. Cet article vous donne une introduction détaillée à l'analyse des idées de Vue pour résoudre les conflits de routage entre domaines. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

vue introduction

Vue.js (prononcé /vjuː/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur.

Vue se concentre uniquement sur la couche de vue et adopte une conception de développement incrémental ascendant.

L'objectif de Vue est de permettre une liaison de données réactive et des composants de vue composés via l'API la plus simple possible.

Vue est très facile à apprendre. Ce tutoriel est basé sur le test de la version Vue 2.1.8.

Lorsque nous configurons le proxy suivant dans le routage, nous pouvons résoudre le problème inter-domaines

proxyTable: {
   '/goods/*': {
    target: 'http://localhost:3000'
   },
   '/users/*': {
    target: 'http://localhost:3000'
   }
  },

Cette méthode de configuration résout le problème inter-domaines dans une certaine mesure, mais cela entraînera quelques problèmes,

Par exemple, notre route de vue est également nommée marchandises, ce qui provoquera des conflits

S'il y a de nombreuses interfaces dans le projet, c'est très gênant et facile. pour les configurer tous ici. Un conflit de routage se produit.

Posture correcte

Si toutes les interfaces sont unifiées et standardisées comme une seule entrée, les conflits seront résolus dans une certaine mesure

Unifiez les configurations ci-dessus avec /api/ devant eux

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000'
   },
  },

Si nous le configurons de cette manière, cela changera lors de l'utilisation de la requête http. Une API sera ajoutée devant la requête, la route relative changera également et une API sera ajoutée. devant l'interface. Il sera très difficile de se connecter à l'API. Nous pouvons utiliser les méthodes suivantes pour résoudre ce problème

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

Le code ci-dessus consiste à supprimer notre interface API virtuelle pour le moment. , nous allons en fait au backend pour demander. À ce moment-là, le préfixe api ne sera pas ajouté, donc lorsque nous faisons une requête http front-end, nous devons également ajouter le préfixe api pour correspondre au proxy. Le code est le suivant :

logout(){
  axios.post('/api/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  axios.post('/api/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

Nous pouvons utiliser la baseUrl d'axios La valeur directe par défaut est api, de sorte qu'à chaque fois que nous y accédons, le préfixe api est automatiquement ajouté, et nous n'avons pas besoin d'écrire manuellement ce préfixe sur chaque interface nous-même

La configuration dans le fichier d'entrée est la suivante :

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'

Si vous configurez 'api/', il lira le domaine local par défaut

S'il est configuré ainsi, l'environnement de production et de développement ne sera pas distingué

Dans le dossier config Créez un nouveau fichier de configuration api.config.js

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

puis introduisez-le dans main. js. Cela peut garantir que le préfixe de définition de production et de développement correspond dynamiquement

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

via la configuration ci-dessus, il est facilement accessible dans le dom, et il n'est pas nécessaire d'introduire le module axios. dans n’importe quel composant.

logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

Le code final

est configuré dans le proxy

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

api.config.js dans la config est configuré

dans la config dossier Créez-y un nouveau fichier de configuration api.config.js

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

Je ne connais pas grand-chose à la configuration de production et de développement

Vous pouvez aller sur dev-server.js pour voir le code de configuration

const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') ?
 require('./webpack.prod.conf') :
 require('./webpack.dev.conf')

Configurer dans le fichier d'entrée main.js

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

Le geste de demander l'API dans le dom

logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

PS : Allons Apprenez les paramètres inter-domaines sous Vue grâce à un morceau de code

1. Des problèmes inter-domaines sont souvent impliqués lors du développement avec vue. En fait, dans vue cli, nous avons des fichiers pour configurer les requêtes inter-domaines. .

2. Lorsque les requêtes inter-domaines ne peuvent pas être effectuées, nous pouvons modifier la partie dev:{} dans index.js dans le dossier de configuration sous le projet.

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: false,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

Définissez la cible sur le nom de domaine auquel nous devons accéder.

3. Ensuite, définissez les attributs globaux dans main.js :

Vue.prototype.HOST = '/api'

4 À ce stade, nous pouvons utiliser ce nom de domaine globalement, comme suit :

var url = this.HOST + '/movie/in_theaters'
  this.$http.get(url).then(res => {
   this.movieList = res.data.subjects;
  },res => {
   console.info('调用失败');
  });

Recommandations associées :

Exemple détaillé du principe de la requête inter-domaine Ajax

Le problème de deux requêtes lorsque ajax cross-domain soumission dans la solution jquery

Comment comprendre Js cross-domain

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!