windows10下，零基礎學習VUE（3）-- axios+flask構建先後端通訊demo

當前爲大綱的內容：待完善中

1. axios

axios 安裝

• npm install axios

參考文檔

• https://www.kancloud.cn/yunye...

示例demo

• https://cn.vuejs.org/v2/cookb...

2. flask

構建api:

from flask import Flask, render_template,jsonify
from flask_cors import CORS
app = Flask(__name__,
        static_folder = "./dist/static",
        template_folder = "./dist")

cors = CORS(app, resources={"/api/*": {"origins": "*"}})

from random import *
@app.route('/api/random')
def random_number():
    response = {
        'randomNumber': randint(1, 100)
    }
    return jsonify(response)

在jupyter_notebook中運行服務

from werkzeug.serving import run_simple
run_simple('0.0.0.0', 9001, app)

3. 在vue中調用，並顯示

• 模板部分

  <template>
    <div>
      歡迎來到首個測試頁面  
      <p>Random number from backend: {{ randomNumber }}</p>
      <button @click="getRandom">New random number</button>
      <p>{{orgdata}}</p>
      <foot-nav v-bind:class="{'isIndex':isIndexNow}"></foot-nav>
    </div>
  </template>

• js腳本部分

  <script>
    import FootNav from "../components/footer.vue";
    import axios from 'axios'
    export default {
      components: {
        FootNav
      },
      methods: {
        getRandomInt (min, max) {
          min = Math.ceil(min)
          max = Math.floor(max)
          return Math.floor(Math.random() * (max - min + 1)) + min
        },
        getRandom () {
          // this.randomNumber = this.getRandomInt(1, 100)
          this.randomNumber = this.getRandomFromBackend()
        },
        getRandomFromBackend () {
          const path = `http://localhost:9001/api/random`
          axios.get(path)
          .then(response => {
            this.randomNumber = response.data.randomNumber
            this.orgdata = response.data
          })
          .catch(error => {
            console.log(error)
          })
        }
      },
      data(){
        return{
          isIndexNow: true,
          randomNumber: 0,
          orgdata:null
        }
      }
    }
  </script>

• css腳本部分，未學習，不過就是頁面醜一點而已，問題不大，回頭再學把。