Informationen zur Lösung von domänenübergreifenden Routing-Konflikten durch Vue

Vue.js (ausgesprochen /vjuː/, ähnlich wie view) ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Analyse der Ideen von Vue zur Lösung von domänenübergreifenden Routing-Konflikten. Ich hoffe, dass er allen helfen kann.

vue-Einführung

Vue.js (ausgesprochen /vjuː/, ähnlich wie view) ist ein progressives Framework zum Erstellen von Benutzeroberflächen.

Vue konzentriert sich nur auf die Ansichtsebene und übernimmt ein inkrementelles Entwicklungsdesign von unten nach oben.

Das Ziel von Vue ist es, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten über eine möglichst einfache API zu ermöglichen.

Vue ist sehr einfach zu erlernen. Dieses Tutorial basiert auf dem Versionstest von Vue 2.1.8.

Wenn wir den folgenden Proxy im Routing konfigurieren, können wir das domänenübergreifende Problem lösen

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

Diese Konfigurationsmethode löst das domänenübergreifende Problem bis zu einem gewissen Grad. aber es wird einige Probleme mit sich bringen,

Zum Beispiel ist unsere Vue-Route auch benannte Waren, was zu Konflikten führen wird

Wenn es viele Schnittstellen im Projekt gibt, ist es sehr mühsam und einfach Um sie alle hier zu konfigurieren, tritt ein Routing-Konflikt auf.

Korrekte Haltung

Wenn alle Schnittstellen als ein Eingang vereinheitlicht und standardisiert sind, werden Konflikte bis zu einem gewissen Grad gelöst.

Vereinheitlichen Sie die oben genannten Konfigurationen mit /api/ vor sie

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

Wenn wir es auf diese Weise konfigurieren, wird es sich ändern, wenn eine HTTP-Anfrage verwendet wird. Vor der Anfrage wird eine API hinzugefügt, die relative Route wird sich ebenfalls ändern und eine API wird hinzugefügt Vor der Schnittstelle wird es sehr mühsam sein, eine Verbindung zur API herzustellen.

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

Der obige Code dient zum Entfernen unserer virtuellen API-Schnittstelle Wenn wir tatsächlich zum Backend gehen, um die Zeit anzufordern, wird das API-Präfix nicht hinzugefügt. Wenn wir also eine Front-End-HTTP-Anfrage stellen, müssen wir auch das API-Präfix hinzufügen, das mit dem Proxy übereinstimmt. Der Code lautet wie folgt:

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);
  })
 }

Wir können die baseUrl von axios verwenden. Der direkte Standardwert ist api, sodass bei jedem Zugriff das API-Präfix automatisch hinzugefügt wird und wir dieses Präfix nicht manuell auf jede Schnittstelle schreiben müssen uns selbst

Die Konfiguration in der Eintragsdatei ist wie folgt:

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

Wenn Sie „api/“ konfigurieren, wird standardmäßig die lokale Domäne gelesen

Falls konfiguriert Auf diese Weise wird die Produktions- und Entwicklungsumgebung nicht unterschieden.

Erstellen Sie im Konfigurationsordner eine neue api.config.js-Konfigurationsdatei

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

und fügen Sie sie dann in main.js ein. Dadurch kann sichergestellt werden, dass das Definitionspräfix von Produktion und Entwicklung dynamisch über die oben genannten

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

angepasst wird. Nach der Konfiguration kann im Dom problemlos darauf zugegriffen werden, und es ist nicht erforderlich, das Axios-Modul in eines einzuführen Komponente.

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);
  })
 }

Der endgültige Code

wird im Proxy konfiguriert

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

api.config.js in der Konfiguration wird

in der Konfiguration konfiguriert Ordner Erstellen Sie darin eine neue api.config.js-Konfigurationsdatei

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

Ich weiß nicht viel über Produktions- und Entwicklungskonfiguration

Sie können zu dev-server.js gehen, um es zu sehen der Konfigurationscode

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

Konfigurieren Sie in der main.js-Eintragsdatei

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

Die Geste des Anforderns der API im 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: Lass uns Lernen Sie die domänenübergreifenden Einstellungen unter Vue anhand eines Codes

1. Bei der Entwicklung mit Vue gibt es häufig domänenübergreifende Probleme. Tatsächlich verfügen wir über Dateien zum Einrichten domänenübergreifender Anforderungen .

2. Wenn domänenübergreifende Anfragen nicht gestellt werden können, können wir den Teil dev:{} in index.js im Konfigurationsordner unter dem Projekt ändern.

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
}

Stellen Sie das Ziel auf den Domänennamen ein, auf den wir zugreifen müssen.

3. Legen Sie dann globale Attribute in main.js fest:

Vue.prototype.HOST = '/api'

4. An dieser Stelle können wir diesen Domainnamen wie folgt global verwenden:

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

Verwandte Empfehlungen:

Detailliertes Beispiel für das Prinzip der domänenübergreifenden Ajax-Anfrage

Das Problem zweier Anfragen bei domänenübergreifender Ajax-Anfrage Einreichung in der JQuery-Lösung

Wie man Js domänenübergreifend versteht

Das obige ist der detaillierte Inhalt vonInformationen zur Lösung von domänenübergreifenden Routing-Konflikten durch Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!