脚本宝典收集整理的这篇文章主要介绍了windows10下,零基础学习VUE(3)-- axios+flask构建前后端通信demo,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
当前为大纲的内容:待完善中
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)
from werkzeug.serving import run_simple
run_simple('0.0.0.0', 9001, app)
模板部分
<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>
以上是脚本宝典为你收集整理的windows10下,零基础学习VUE(3)-- axios+flask构建前后端通信demo全部内容,希望文章能够帮你解决windows10下,零基础学习VUE(3)-- axios+flask构建前后端通信demo所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。