flask vue axios 框架推荐

13572025090

于 2024-08-04 03:56:15 发布

阅读量49

点赞数

文章标签： flask vue.js python 后端前端

基于 Flask 和 Vue 的全栈开发框架推荐

在现代前后端分离的开发模式中，Flask 和 Vue.js 是两个非常受欢迎的框架。Flask 是一个轻量级的 Python Web 框架，而 Vue.js 是一个渐进式 JavaScript 框架，广泛应用于构建用户界面。结合这两个框架，我们可以实现高效的 SPA（单页应用）开发。本文将介绍如何利用 Flask 提供后端支持，使用 Vue.js 构建前端，并通过 Axios 进行 API 请求。

开发环境搭建

在开始之前，我们需要确保开发环境中安装了 Python 和 Node.js。接下来，我们用以下命令创建 Flask 和 Vue 项目。

安装 Flask：

创建 Flask 应用：

# app.py
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({"message": "Hello from Flask!"})

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

在这个示例中，我们创建了一个简单的 Flask 应用，并定义了 /api/data 这个 API。

安装 Vue.js：

创建 Vue 组件：

// src/components/DataDisplay.vue
<template>
  <div>
    {{ message }}
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:5000/api/data')
        .then(response => {
          this.message = response.data.message;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>