连接flask后端和vue前端，python后端返回200，但是网页没有显示，请问要怎么解决

Question

连接flask后端和vue前端，python后端返回200，但是网页没有显示，请问要怎么解决
以下是python代码

import json
from flask import Flask, jsonify, request
from flask_cors import CORS

DEBUG = True

app = Flask(__name__)
app.config.from_object(__name__)

CORS(app, resources={r'/*': {'origins': '*'}})


@app.route('/')
def hello_world():
    return 'Hello World!'


@app.route('/vueflask', methods=['POST', 'GET'])
def vueflask():
    if request.method == 'POST':
        # 获取vue中传递的值
        GetMSG = request.get_data(as_text=True)
        print(GetMSG)
        print(int(GetMSG) + 10)
        return jsonify(int(GetMSG) + 10)
    else:
        return 'default'


if __name__ == '__main__':
    app.run()

vue代码：

<template>
  <div>
    <input type="text" placeholder="Edit Me" ref="fmsg">
    <button @click="PostEm()">点我传信息给flask</button>
    <h1>{{msg2}}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "Door",
  data(){
    return{
      msg2:''
    }
  },
  methods:{
    PostEm(){
      const FPath = 'http://localhost:5000/vueflask'
      axios.post(FPath,this.$refs.fmsg.value)
        .then((res) => {this.msg2 = res.data})
        .catch((err) => {console.log(err)})
    }
  },
  created() {
    this.PostEm()
  }
}
</script>

python端显示：

网页显示：

Answer 1

题主搞错访问方式了，浏览器地址栏回车访问vueflask是get请求，应该用render_template返回模板html，而不是返回default这个字符串，然后再点击vue中的按钮再次post请求vueflask这个网址才能获取到数据

如果题主是uniapp，用hbuilder编译好vue文件，后直接访问编译好的页面，而不是访问flask的vueflask这个网址
简单示例如下，注意模板文件vueflask放在和python文件同目录的templates目录下

templates/vudeflask.html

<meta charset="utf-8" />
<div id="app">
    <input type="text" placeholder="Edit Me" ref="fmsg">
    <button @click="PostEm()">点我传信息给flask</button>
    <h1>{{msg2}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = {
        data() {
            return {
                msg2: ''
            }
        },
        methods: {
            PostEm() {
                const FPath = 'http://localhost:5000/vueflask'
                axios.post(FPath, this.$refs.fmsg.value)
                    .then((res) => { this.msg2 = res.data })
                    .catch((err) => { console.log(err) })
            }
        },
        mounted() {//用这个事件而不是created，要不dom未生成报错
            this.PostEm()
        }
    };
    Vue.createApp(app).mount('#app')
</script>

由于vue和flask模板{{}}有冲突，需要修改flask模板表达式声明{{}}为其他的

app.py

import json
from flask import Flask, jsonify, request,render_template
from flask_cors import CORS
 
DEBUG = True
 
app = Flask(__name__)
app.config.from_object(__name__)
 
CORS(app, resources={r'/*': {'origins': '*'}})

########表达式声明修改
app.jinja_env.variable_start_string = '<<'
app.jinja_env.variable_end_string = '>>' 
 
@app.route('/')
def hello_world():
    return 'Hello World!'
 
 
@app.route('/vueflask', methods=['POST', 'GET'])
def vueflask():
    if request.method == 'POST':
        # 获取vue中传递的值
        GetMSG = request.get_data(as_text=True)
        print(GetMSG)
        if GetMSG.isdigit()==False:#要注意判断不是数字默认为0，否则下面的int会报错
            GetMSG="0"
        print(int(GetMSG) + 10)
        return jsonify(int(GetMSG) + 10)
    else:
        return render_template('vudeflask.html')##显示模板html文件
 
 
if __name__ == '__main__':
    app.run()