psogos 2022-05-25 19:39 采纳率: 83.7%
浏览 306
已结题

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

连接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端显示:

img


网页显示:

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-05-25 21:49
    关注

    题主搞错访问方式了,浏览器地址栏回车访问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()
     
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月24日
  • 已采纳回答 7月16日
  • 修改了问题 5月25日
  • 创建了问题 5月25日

悬赏问题

  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥20 为什么我写出来的绘图程序是这样的,有没有lao哥改一下
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥200 关于#c++#的问题,请各位专家解答!网站的邀请码
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号