专业的编程技术博客社区

网站首页 > 博客文章 正文

将 Flask 与前端框架集成：React 和 Vue

baijin 2024-09-10 11:01:56 博客文章 8 ℃ 0 评论

Flask 是一个轻量级且功能强大的 Python Web 框架，非常适合构建后端 API 和 Web 服务。但是，对于动态和交互式用户界面，集成 React 或 Vue 等前端框架可以提供无缝且引人入胜的用户体验。本博客将探讨如何设置和集成 Flask 与 React 和 Vue，包括帮助您入门的演示。

设置 Flask

首先，让我们设置一个基本的 Flask 应用程序，它将作为我们的后端 API。

步骤 1：安装 Flask

pip install Flask

步骤 2：创建 Flask 应用程序

创建一个名为 `app.py` 的文件并添加以下代码：

from flask import Flask, jsonify


app = Flask(__name__)


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


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

此 Flask 应用程序有一个端点 `/api/data`，它返回 JSON 响应。

将 Flask 与 React 集成

设置 React

步骤 1：安装 Create React App

npx create-react-app my-react-app
cd my-react-app

步骤 2：创建 API 服务

在 React 项目中，创建一个新文件 `src/api.js` 并添加以下代码：

const API_URL = 'http://127.0.0.1:5000/api/data';


export const fetchData = async () => {
    const response = await fetch(API_URL);
    const data = await response.json();
    return data;
};

将 React 连接到 Flask API

步骤 3：在 React 组件中从 Flask API 获取数据

修改 `src/App.js` 文件以从 Flask API 获取数据并显示：

import React, { useEffect, useState } from 'react';
import { fetchData } from './api';


function App() {
    const [data, setData] = useState(null);


    useEffect(() => {
        fetchData().then(response => setData(response));
    }, []);


    return (
        <div className="App">
            <header className="App-header">
                <h1>React and Flask Integration</h1>
                {data && <p>{data.message}</p>}
            </header>
        </div>
    );
}


export default App;

演示：在 React 中从 Flask API 获取数据

现在，运行 Flask 和 React 应用程序：

1. 启动 Flask 服务器：

python app.py

2. 启动 React 开发服务器：

npm start

在浏览器中导航到 `http://localhost:3000`，您应该会看到从 Flask API 获取的消息。

将 Flask 与 Vue 集成

设置 Vue

步骤 1：安装 Vue CLI

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

步骤 2：创建 API 服务

在您的 Vue 项目中，创建一个新文件 `src/api.js` 并添加以下代码：

import axios from 'axios';


const API_URL = 'http://127.0.0.1:5000/api/data';


export const fetchData = async () => {
    const response = await axios.get(API_URL);
    return response.data;
};

将 Vue 连接到 Flask API

步骤 3：在 Vue 组件中从 Flask API 获取数据

修改 `src/App.vue` 文件以从 Flask API 获取数据并显示它：

<template>
  <div id="app">
    <header>
      <h1>Vue and Flask Integration</h1>
      <p v-if="data">{{ data.message }}</p>
    </header>
  </div>
</template>


<script>
import { fetchData } from './api';


export default {
  name: 'App',
  data() {
    return {
      data: null
    };
  },
  mounted() {
    fetchData().then(response => {
      this.data = response;
    });
  }
};
</script>


<style>
/* Add your styles here */
</style>

演示：在 Vue 中从 Flask API 获取数据

现在，运行 Flask 和 Vue 应用程序：

1. 启动 Flask 服务器：

python app.py

2. 启动 Vue 开发服务器：

npm run serve

在浏览器中导航到 `http://localhost:8080`，您应该会看到从 Flask API 获取的消息。

其他类高级用法

1. 使用 Flask 处理 React 中的表单

Flask 后端

在 `app.py` 中添加一个端点来处理表单数据：

from flask import request


@app.route('/api/form', methods=['POST'])
def handle_form():
    form_data = request.json
    response = {'received': form_data}
    return jsonify(response)

React 前端

在 `src/App.js` 中创建表单：

import React, { useState } from 'react';


function App() {
    const [formData, setFormData] = useState({ name: '', email: '' });
    const [response, setResponse] = useState(null);


    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
    };


    const handleSubmit = async (e) => {
        e.preventDefault();
        const res = await fetch('http://127.0.0.1:5000/api/form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData),
        });
        const data = await res.json();
        setResponse(data);
    };


    return (
        <div className="App">
            <header className="App-header">
                <h1>React and Flask Form Integration</h1>
                <form onSubmit={handleSubmit}>
                    <input
                        type="text"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        placeholder="Name"
                    />
                    <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        placeholder="Email"
                    />
                    <button type="submit">Submit</button>
                </form>
                {response && <p>Received: {JSON.stringify(response.received)}</p>}
            </header>
        </div>
    );
}


export default App;

2. 使用 Flask 处理 Vue 中的表单

Flask 后端

使用与上述相同的端点处理表单数据。

Vue 前端

在 `src/App.vue` 中创建一个表单：

<template>
  <div id="app">
    <header>
      <h1>Vue and Flask Form Integration</h1>
      <form @submit.prevent="handleSubmit">
        <input type="text" v-model="formData.name" placeholder="Name" />
        <input type="email" v-model="formData.email" placeholder="Email" />
        <button type="submit">Submit</button>
      </form>
      <p v-if="response">Received: {{ response.received }}</p>
    </header>
  </div>
</template>


<script>
import axios from 'axios';


export default {
  name: 'App',
  data() {
    return {
      formData: {
        name: '',
        email: ''
      },
      response: null
    };
  },
  methods: {
    async handleSubmit() {
      const res = await axios.post('http://127.0.0.1:5000/api/form', this.formData);
      this.response = res.data;
    }
  }
};
</script>


<style>
/* Add your styles here */
</style>

3. 在 Flask 和 React 中使用 JWT 进行用户身份验证

Flask 后端

安装 Flask-JWT-Extended：

pip install Flask-JWT-Extended

更新 `app.py` 以包含用户身份验证：

from flask import Flask, request, jsonify
from flask_jwt_extended import JWTManager, create_access_token, jwt_required, get_jwt_identity


app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'your_jwt_secret_key'
jwt = JWTManager(app)


users = {'testuser': 'testpassword'}


@app.route('/api/login', methods=['POST'])
def login():
    username = request.json.get('username')
    password = request.json.get('password')
    if username in users and users[username] == password:
        access_token = create_access_token(identity=username)
        return jsonify(access_token=access_token)
    return jsonify({'msg': 'Invalid credentials'}), 401


@app.route('/api/protected', methods=['GET'])
@jwt_required()
def protected():
    current_user = get_jwt_identity()
    return jsonify(logged_in_as=current_user)

React Frontend

在 `src/App.js` 中创建登录表单并处理 JWT 身份验证:

import React, { useState } from 'react';


function App() {
    const [credentials, setCredentials] = useState({ username: '', password: '' });
    const [token, setToken] = useState(null);
    const [protectedData, setProtectedData] = useState(null);


    const handleChange = (e) => {
        const { name, value } = e.target;
        setCredentials({ ...credentials, [name]: value });
    };


    const handleLogin = async (e) => {
        e.preventDefault();
        const res = await fetch('http://127.0.0.1:5000/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(credentials),
        });
        const data = await res.json();
        setToken(data.access_token);
    };


    const fetchProtectedData = async () => {
        const res = await fetch('http://127.0.0.1:5000/api/protected', {
            headers: {
                'Authorization': `Bearer ${token}`,
            },
        });
        const data = await res.json();
        setProtectedData(data);
    };


    return (
        <div className="App">
            <header className="App-header">
                <h1>React and Flask JWT Authentication</h1>
                {!token ? (
                    <form onSubmit={handleLogin}>
                        <input
                            type="text"
                            name="username"
                            value={credentials.username}
                            onChange={handleChange}
                            placeholder="Username"
                        />
                        <input
                            type="password"
                            name="password"
                            value={credentials.password}
                            onChange={handleChange}
                            placeholder="Password"
                        />
                        <button type="submit">Login</button>
                    </form>
                ) : (
                    <div>
                        <p>Logged in with token: {token}</p>
                        <button onClick={fetchProtectedData}>Fetch Protected Data</button>
                        {protectedData && <p>Protected Data: {protectedData.logged_in_as}</p>}
                    </div>
                )}
            </header>
        </div>
    );
}


export default App;

4. 使用 Flask-SocketIO 和 React 进行实时更新

Flask 后端

安装 Flask-SocketIO：

pip install Flask-SocketIO

更新 `app.py` 以包含 WebSocket 支持：

from flask_socketio import SocketIO, emit


app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return 'Flask-SocketIO server'


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected to Flask-SocketIO'})


@socketio.on('my event')
def handle_my_custom_event(json):
    print('received event: ' + str(json))
    emit('my response', {'data': 'Event received'})


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

React Frontend

安装 Socket.IO 客户端：

npm install socket.io-client

在 `src/App.js` 中创建 Socket.IO 连接：

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';


const socket = io('http://127.0.0.1:5000');


function App() {
    const [messages, setMessages] = useState([]);


    useEffect(() => {
        socket.on('connect', () => {
            console.log('Connected to server');
        });


        socket.on('message', (data) => {
            setMessages((prevMessages) => [...prevMessages, data]);
        });


        socket.on('my response', (data) => {
            setMessages((prevMessages) => [...prevMessages, data]);
        });


        return () => {
            socket.off('connect');
            socket.off('message');
            socket.off('my response');
        };
    }, []);


    const sendMessage = () => {
        socket.emit('my event', { data: 'Hello from React' });
    };


    return (
        <div className="App">
            <header className="App-header">
                <h1>React and Flask-SocketIO</h1>
                <button onClick={sendMessage}>Send Message</button>
                <ul>
                    {messages.map((msg, index) => (
                        <li key={index}>{msg.data}</li>
                    ))}
                </ul>
            </header>
        </div>
    );
}


export default App;

将 Flask 与 React 和 Vue 等现代前端框架集成可以创建强大而动态的 Web 应用程序。本博客演示了如何设置基本的 Flask API 并将其连接到 React 和 Vue 应用程序以及一些额外的演示展示了 Flask 与 React 和 Vue 等前端框架之间更高级的集成。处理表单、身份验证和实时更新是现代 Web 应用程序中的常见要求。通过利用 Flask 的后端功能以及 React 和 Vue 提供的强大 UI，您可以创建强大且交互式的应用程序。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表