VUEは知識を知っている必要があります（1）--- axiosの基本

axios

この記事では、簡単な使用法についてのみ説明します。パッケージングとインターセプターについては、次の号で説明します。

新しいものと連絡を取るための最良の方法は、ドキュメントを読むことである。Axios
Axiosは、多くの場合、ポストgetおよびその他の要求の要求を送信するために使用される約束のHTTPライブラリです。
約束は、多くの場合、非同期操作のために使用されています。

インストール

npm install axios

基本的な使い方

ポストリクエストなど

axios.post("url", data).then(res => {
        //操作
      });

これらのパラメータとメソッドは、ソースコードを取得することで見つけることができます

もちろん、このように書くこともできます

axios({url,method})method就是post get等用到什么写什么 参考上图

URL、メソッド、データは一般的に必要です

ピットを踏む

これは非同期操作であるため、データをタイムリーにレンダリングできない場合があります。$ nextTickを使用してデータを収集するか、ポータル
について説明した記事をforceUpdate更新する必要があります。

小さな例

後部

小さな例を作ってみましょう。pythonを知っている友達はフォローできますが、そうでない友達は、vueデータの視覚化
を使用してBaidu開発プラットフォームに関する記事の他の例を見ることができます。

簡単なオンラインpythonコンパイラを実装しましょう

バックエンドインターフェイスの書き込みにフラスコを使用

from flask import Flask,request
import subprocess, time

app = Flask(__name__)

@app.route("/hello",methods=['POST'])
def hello():
    ip = request.remote_addr
    print(ip)
    f=open('./1/{}.py'.format(ip),"w",encoding='utf-8')
    f.write(request.form.get("a"))
    f.close()
    p = subprocess.Popen('python ./1/{}.py'.format(ip), stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
    return p.stdout.read()
if __name__=='__main__':
        app.run(host='0.0.0.0',port=6666)

ここでは、localhost：6666 / helloを介してhelloメソッドを呼び出すことができます。

バックエンド思考

フロントエンドからコードを受け取り、それをpythonファイルに保存します。ファイルの名前はip addressです。もちろん、使い終わったらファイルを削除することを忘れないでください。これはosモジュールを使用して実行できます。

ファイルの実行結果をリダイレクトして取得します

qsライブラリ

フロントエンドで一般的に使用されるライブラリ、パラメータの解析またはクエリに使用されるライブラリ
。Installnpminstall
qs

フロントエンド

<template>
  <div>
    <label>
      <textarea v-model="dm" style="width: 300px;height: 400px"> </textarea>
    </label>
    <buton @click="doIt">运行</buton>
    <label>
      <textarea readonly="readonly" v-model="results" style="width: 300px;height: 400px"></textarea>
    </label>
  </div>
</template>

<script>
import qs from "querystring";
import axios from "axios";
export default {
     
     
  name: "pythonTest",
  data() {
     
     
    return {
     
     
      dm: "",
      results: ""
    };
  },
  methods: {
     
     
    doIt() {
     
     
      this.results = "";
      let datas = {
     
      a: this.dm};
      axios.post("/awe/hello", qs.stringify(datas)).then(res => {
     
     
        this.results = res.data;
      });
    }
  }
};
</script>

<style scoped></style>

ここで私はプロキシを使用しました

module.exports = {
  devServer: {
      "/awe": {
        target: "http://127.0.0.1:6666",
        changeOrigin: true,
        pathRewrite: {
          "^/awe": ""
        }
      }
    },
    host: "0.0.0.0",
    port: 8083,
    clientLogLevel: "info"
  }
};

プロキシなしで
このように書く場合
、バックエンドはフォームを介して受信する必要があり、フロントエンドもこのように送信するため、qs.stringifyを使用します

axios.post("http://localhost:6666/hello", qs.stringify(datas)).then(res => {
        this.results = res.data;
      });

フロントエンド思考

データをバックエンドインターフェイスに送信し、バック
エンド処理が完了した
後にフロントエンドに戻ります。

効果

練習したい場合は、
Baidu開発プラットフォームを参照してvueデータの視覚化を使用でき
ます

このシリーズの次のパートでは、axiosとインターセプターのパッケージ化について説明します。

  みなさん、こんにちは。私は「犬」であり、何千マイルも肉を食べることができるので、ソフトウェアカレッジのネットワークエンジニアリングの学生であるコードハスキーです。大学時代に学んだことをみんなと共有し、進歩していきたいです。ただし、レベルに限りがあるため、必然的にブログに間違いがありますので、抜けがありましたらお知らせください！当面は、csdnプラットフォームのブログホームページ（https://blog.csdn.net/qq_42027681）でのみ更新してください。

未经本人允许，禁止转载

後で発売されます

フロントエンド：vueエントリvue開発アップルレットなど。
バックエンド：javaエントリspringbootエントリなど。
サーバー：mysqlエントリサーバープロジェクトを実行するための簡単な指示クラウドサーバー
python：ウォームアップしないことをお勧めし
ます。いくつかのプラグインなどの使用を確認してください。

大学のやり方も自分自身で、一生懸命勉強し、
情熱を持って若くなります。プログラミングに興味がある場合は、qqグループに参加して一緒にコミュニケーションをとることができます：974178910

ご不明な点がございましたら、下にメッセージを残していただければ、よろしければ返信いたします。