Intégration Vue-Cli et Python

1. 1. Objectif

・ Je veux lier Vue-Cli et Python. (Je veux exécuter Python sur une application qui utilise Vue-CLi)

2. Méthode

-Le frontal est composé de Vue-Cli. Placez le code Python sur le backend. -L'interface entre Vue-Cli et Python est [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) est utilisé. -Attribuez différents ports pour le frontal et le back-end afin que les deux puissent communiquer.

3. 3. Préférences / préparation

La méthode d'installation et la version du package ou de la bibliothèque utilisée sont décrites ci-dessous.

Quatre. Application créée

Depuis la page Web, ajoutez +3 à la valeur saisie et affichez le résultat du calcul.

★ (1) à (6) sur la figure ci-dessus correspondent aux opérations (1) à (6) expliquées ci-dessous.

(1) "Écran de démonstration" Entrez la valeur numérique dans la zone de texte. (2) Cliquez sur le bouton Obtenir. (3) La valeur numérique saisie dans (1) est envoyée au code Python (sample.py) via index.js (exécutant Python-shell). (4) sample.py ajoute +3 à la valeur saisie. (5) sample.py renvoie la valeur numérique complétée à index.js. (6) index.js renvoie la valeur numérique reçue de sample.py à «l'écran de démonstration». (7) L '«écran Démo» affiche les résultats du calcul.

4-1 Configuration du système

On suppose que Vue-Cli est déjà installé et prêt à être utilisé.

4-2 Structure du répertoire

La structure des répertoires de chaque fichier est organisée comme suit.

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'  //Lors de l'utilisation d'axios,.Importez avec js.

Vue.config.productionTip = false
Vue.prototype.$axios = axios  //Lors de l'utilisation d'axios,.Besoin d'ajouter cette ligne dans js

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

/src/components/Top.vue

<template>

  <div>
    <h1>Écran de démonstration</h1>
    <input type="button" value="Bouge toi" @click="goNewTask()"> <br>
    <input type="number" v-model="message"><input type="button" value="Avoir" @click="getdata()">
    <p> <font size="2">Des données d'entrée:{{ $data.message }} </font> </p>
    <p> <font size="2">des données de sortie:{{ $data.result }} </font> </p>
    <p> <font size="2">Statut:{{ $data.state }} </font> </p>
  </div>

</template>

<script>
// eslint-disable-next-line
/* eslint-disable */ 
import * as d3 from 'd3'  //Autoriser

export default {
  name: 'top',
  data: function(){
    return { 
        message:'',  //Une variable qui stocke les données d'entrée.
        result :'',  //Une variable qui stocke le résultat de l'opération.
        state:"wait" //Une variable qui stocke l'état actuel.
    }
  },
  methods: {
    //Méthode qui envoie les données saisies dans la zone de texte au backend, reçoit le résultat du calcul du backend et affiche le résultat.
    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)  //Le résultat de l'opération renvoyé par le back-end est console.Je me connecte.
            this.result= response.data.message
            this.state="done"    
            }.bind(this))  //Lors du traitement des promesses.bind(this)Est nécessaire
          .catch(function(error){  //À propos du traitement à effectuer lorsqu'une erreur est renvoyée depuis le back-end
            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())


//La stratégie CORS est désactivée.
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) //Consolider les données reçues du front-end.Je me connecte.

  pyshell.send(req.query.dat); //De ce code au code python'req.query.dat'Est fourni comme données d'entrée

  //Après avoir exécuté le code python, les données sont transmises de python à ce code.
  pyshell.on('message',  function (data) {
    console.log("return data")
    res.send({
      message: data   //Le résultat du calcul effectué par python est renvoyé au frontal.
    })
  })

})

app.listen(3000)

/bkend/sample.py

import sys
data = sys.stdin.readline()  #Obtenir des données à partir d'une entrée standard
num=int(data)

def sum(a):
    return a+3

print(sum(num))  #python le contenu de l'impression-Retour à la coque

4-4 Comment exécuter

Cinq. point

5-1 Raisons d'utiliser Pyshon-shell

Vue-cli fonctionne sur webpack, mais python-shell ne semble pas fonctionner sur webpack. Par conséquent, j'ai démarré un nouveau serveur qui ne fonctionne pas avec vue-cli et j'ai fait fonctionner python-shell dessus.

5-2 Solution de contournement pour le problème CORS

Lors de l'accès à xxx.xxx.xx.xx: 3000 à partir de xxx.xxx.xx.xx: 91, la communication est bloquée pour des raisons de sécurité car les domaines sont différents [problème CORS]. Afin d'éviter le problème CORS, il existe des cas où des mesures sont prises du côté de l'accès et des cas où des mesures sont prises du côté de l'accès, mais dans ce cas, des mesures ont été prises du côté de l'accès. Pour plus de détails, veuillez consulter ici.

/bkend/index.Fait partie de js

/bkend/
//La stratégie CORS est désactivée.
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();
});