Vue-Cli- und Python-Integration

1. 1. Zweck

・ Ich möchte Vue-Cli und Python verbinden. (Ich möchte Python auf einer App ausführen, die Vue-CLi verwendet.)

2. Methode

-Das Frontend besteht aus Vue-Cli. Platzieren Sie den Python-Code im Backend. -Die Schnittstelle zwischen Vue-Cli und Python ist [Python-Shell](https://qiita.com/NT1123/items/09aed7b23388190cba23#3-1-%E3%82%A4%E3%83%B3%E3%82 % B9% E3% 83% 88% E3% 83% BC% E3% 83% AB% E6% 96% B9% E6% B3% 95) wird verwendet.

• Weisen Sie dem Front-End und dem Back-End unterschiedliche Ports zu, damit beide miteinander kommunizieren können.

3. 3. Vorlieben / Vorbereitung

Die Installationsmethode und Version des verwendeten Pakets oder der verwendeten Bibliothek werden unten beschrieben.

Vier. App erstellt

Fügen Sie auf der Webseite +3 zum eingegebenen Wert hinzu und zeigen Sie das Berechnungsergebnis an.

★ (1) bis (6) in der obigen Abbildung entsprechen den unten erläuterten Operationen (1) bis (6).

(1) "Demo-Bildschirm" Geben Sie den numerischen Wert in das Textfeld ein. (2) Klicken Sie auf die Schaltfläche Get. (3) Der in (1) eingegebene numerische Wert wird über index.js (mit Python-Shell) an den Python-Code (sample.py) gesendet. (4) sample.py addiert +3 zum eingegebenen Wert. (5) sample.py gibt den vollständigen numerischen Wert an index.js zurück. (6) index.js gibt den von sample.py empfangenen numerischen Wert an den "Demo-Bildschirm" zurück. (7) Der "Demo-Bildschirm" zeigt die Berechnungsergebnisse an.

4-1 Systemkonfiguration

Es wird davon ausgegangen, dass Vue-Cli bereits installiert und einsatzbereit ist.

4-2 Verzeichnisstruktur

Die Verzeichnisstruktur jeder Datei ist wie folgt angeordnet.

4-3 Code

/src/component/main.js

// eslint-disable-next-line
/* eslint-disable */ 
// 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'  //Bei Verwendung von Axios main.Importieren mit js.

Vue.config.productionTip = false
Vue.prototype.$axios = axios  //Bei Verwendung von Axios main.Müssen Sie diese Zeile in js hinzufügen

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

/src/components/Top.vue

<template>

  <div>
    <h1>Demo-Bildschirm</h1>
    <input type="button" value="Bewegung" @click="goNewTask()"> <br>
    <input type="number" v-model="message"><input type="button" value="Erhalten" @click="getdata()">
    <p> <font size="2">Eingabedaten:{{ $data.message }} </font> </p>
    <p> <font size="2">Ausgabedaten:{{ $data.result }} </font> </p>
    <p> <font size="2">Status:{{ $data.state }} </font> </p>
  </div>

</template>

<script>
// eslint-disable-next-line
/* eslint-disable */ 
import * as d3 from 'd3'  //Ermöglichen

export default {
  name: 'top',
  data: function(){
    return { 
        message:'',  //Eine Variable, die Eingabedaten speichert.
        result :'',  //Eine Variable, die das Operationsergebnis speichert.
        state:"wait" //Eine Variable, die den aktuellen Status speichert.
    }
  },
  methods: {
    //Eine Methode, die die im Textfeld eingegebenen Daten an das Backend sendet, das Berechnungsergebnis vom Backend empfängt und das Ergebnis anzeigt.
    getdata:function(){
        this.state="getting data"
        this.$axios.get('http://192.168.0.4:3000/api',{params:{dat:this.message}})
          .then(function(response){
            console.log(response.data.message)  //Das vom Back-End zurückgegebene Operationsergebnis ist die Konsole.Ich logge mich ein.
            this.result= response.data.message
            this.state="done"    
            }.bind(this))  //Bei der Promise-Verarbeitung.bind(this)Ist notwendig
          .catch(function(error){  //Informationen zur Verarbeitung, die ausgeführt werden soll, wenn ein Fehler vom Back-End zurückgegeben wird
            this.state="ERROR"
            }.bind(this))
          .finally(function(){
            }.bind(this))}
     
  } 
}

</script>

/bkend/index.js

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())


//Die CORS-Richtlinie ist deaktiviert.
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


app.get('/api', function(req, res) {

  var {PythonShell} = require('python-shell');
  var pyshell = new PythonShell('sample.py');  
  console.log("req")
  console.log(req.query.dat) //Konsolidieren Sie die vom Frontend empfangenen Daten.Ich logge mich ein.

  pyshell.send(req.query.dat); //Von diesem Code zu Python-Code'req.query.dat'Wird als Eingabedaten bereitgestellt

  //Nach dem Ausführen des Python-Codes werden Daten von Python an diesen Code übergeben.
  pyshell.on('message',  function (data) {
    console.log("return data")
    res.send({
      message: data   //Das Ergebnis der von Python durchgeführten Berechnung wird an das Frontend zurückgegeben.
    })
  })

})

app.listen(3000)

/bkend/sample.py

import sys
data = sys.stdin.readline()  #Daten von der Standardeingabe abrufen
num=int(data)

def sum(a):
    return a+3

print(sum(num))  #Python den Inhalt des Drucks-Kehre zur Shell zurück

4-4 Ausführen

Fünf. Punkt

5-1 Gründe für die Verwendung von Pyshon-Shell

Vue-cli funktioniert mit Webpack, aber Python-Shell scheint mit Webpack nicht zu funktionieren. Daher habe ich einen neuen Server gestartet, der nicht mit vue-cli ausgeführt wird, und Python-Shell darauf ausgeführt.

5-2 Problemumgehung für das CORS-Problem

Beim Zugriff auf xxx.xxx.xx.xx: 3000 von xxx.xxx.xx.xx: 91 wird die Kommunikation aus Sicherheitsgründen blockiert, da die Domänen unterschiedlich sind [CORS-Problem]. Um das CORS-Problem zu vermeiden, gibt es Fälle, in denen Maßnahmen auf der Zugangsseite ergriffen werden, und Fälle, in denen Maßnahmen auf der Zugangsseite ergriffen werden. In diesem Fall wurden jedoch Maßnahmen auf der Zugangsseite ergriffen. Weitere Informationen finden Sie unter hier.

/bkend/index.Ein Teil von js

/bkend/
//Die CORS-Richtlinie ist deaktiviert.
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});