VUE must know knowledge (1) ---axios basics

axios

This article only talks about simple usage, packaging and interceptors will be written in the next issue

The best way to get in touch with new things is to read the documentation. Axios
Axios is a promise HTTP library often used to send post get and other request requests.
Promises are often used for asynchronous operations.

installation

npm install axios

Basic usage

Such as post request

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

You can find
these parameters and methods by picking up the source code

Of course we can also write like this

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

URL, method and data are generally necessary

Step on the pit

Because it is an asynchronous operation, sometimes the data can not be rendered in a timely manner, we should use $ nextTick come and collect data or forceUpdate update
the article we talked about the portal

Small example

rear end

Let's make a small example, friends who know python can follow along, and those who don’t, can see other examples of articles on
Baidu development platform using
vue data visualization

Let's implement a simple online python compiler

Flask is used to write the back-end interface

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)

Here you can call the hello method through localhost:6666/hello

Back-end thinking

Receive the code from the front end and save it to a python file. The file is named ip address. Of course, remember to delete the file when you are done using it. This can be achieved through the os module

Redirect the file execution result and get it

qs library

A library commonly used in the front end, used to parse parameters or query parameters.
Install
npm install qs

front end

<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>

Here i used proxy

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

If you
write it like this without a proxy,
use qs.stringify because the back-end needs to receive through the form, and the front-end also sends like this

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

Front-end thinking

Send data to the back-end interface, and
return to the front-end
after the back-end processing is completed.

effect

If you want to practice, you can refer to
Baidu development platform to use
vue data visualization

The next part of this series will talk about packaging axios and interceptors

  Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .

未经本人允许，禁止转载

Will be launched later

Front-end: vue entry vue development applet, etc.
Back-end: java entry springboot entry, etc.
Server: MySQL entry server simple instructions cloud server to run the project
python: recommended not to warm up, be sure to see
the use of some plug-ins, etc.

The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910

If you have any questions, you can leave a message below, I will reply if you see it