Vue与Flask实现前后端分离及数据交互

最新推荐文章于 2024-04-22 11:39:16 发布

置顶哆啦Ci梦

最新推荐文章于 2024-04-22 11:39:16 发布

阅读量6.7k

点赞数 6

分类专栏： web开发（python+vue前后端分离）文章标签： vue python

本文链接：https://blog.youkuaiyun.com/u010046615/article/details/118704032

版权

web开发（python+vue前后端分离）专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用Vue作为前端框架，结合Vuex管理和Axios进行数据请求，与后端轻量级Python Web框架Flask进行交互。前端通过Element UI组件库提升用户体验，后端处理跨域问题以实现前后端的顺利通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前端框架：

vue：前端开发框架

vuex：前端数据仓库，用于数据存储

axios：前端网络请求库，用于发http/https请求

element:前端UI控件

2、后端框架：

flask:轻量级python web框架

----------------------------------------------------------

在前端代码，App.vue文件的<template>，引入elementUI，例如：

    <form action = "">
      <p>请输入通知消息：</p>
      <p><input type = "text" v-model="formMessage.message"/></p>
    </form>
    <el-button type="primary" @click="getBackend">提交到后端</el-button>
    <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea">
    </el-input>

然后在<script>，将elementUI的数据进行获取，并传给axios发请求，然后通过vuex存储数据，再通过vuex把数据给到前端的文本域控件利用v-model进行回显：

store.js代码:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        backendData:'x'
    },
    mutations: {
        set_backdata(state, data) {
            state.backendData = data
        }
    },
    actions:{
        get_backdata({ commit }, value) {
            commit('set_backdata', value);
            // commit('SET_TOKEN', value2)
        }
    },
  getters: { //数据处理or计算
      bkdata(state){
          return state.backendData;
      }
  }
})
export default store;

App.vue代码:

<script>
//导入组件
import HelloWorld from './components/HelloWorld.vue'
import axios from "axios";

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      textarea: "",
      formMessage:{
        "message":""
      }
    }
  },
  computed:{
    returnData(){
      return this.$store.getters.bkdata
    }
  },
  created(){
    // this.getBackend()
  },
  methods: {
    getBackend() {
      const url = "http://127.0.0.1:5000/guest/" + this.$data.formMessage.message;

      axios.get(url)
          .then((res) => {
            this.$store.dispatch('get_backdata',res.data) //将后端数据存储到vuex里
            this.textarea=this.returnData
          })
          .catch((error) => {
            console.log(error);
          })
    }
  }
}
</script>

由于前后端的端口不同，以及将来独立部署的域名也不同，后端flask需要进行跨域处理(test.py)：

from flask import Flask, redirect, url_for, request
from flask_cors import CORS

app = Flask(__name__)
# 跨域
CORS(app)


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


@app.route('/guest/<guest>')
def hello_guest(guest):
    return 'Hello %s as Guest' % guest


@app.route('/user/<name>')
def hello_user(name):
    if name == 'admin':
        return redirect(url_for('hello_world admin'))
    else:
        return redirect(url_for('hello_guest', guest=name))


@app.route('/success/<name>')
def success(name):
    return 'welcome %s' % name


@app.route('/login', methods=['POST', 'GET'])
def login():
    if request.method == 'POST':
        user = request.form['nm']
        return redirect(url_for('success', name=user))
    else:
        user = request.args.get('nm')
        return redirect(url_for('hello_user', name=user))


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

实现效果：