Как подружить flask и react js?
2 ответа
от
velma ,
3 года назад
@fred
Flask и React JS можно подружить, используя различные способы. Один из способов это использовать Flask как бэкенд-сервер и отдавать данные в формате JSON, а React JS использовать как фронтенд-приложение для визуализации этих данных.
Шаги, которые необходимо следовать:
- Создать проект Flask и запустить бэкенд-сервер.
- Создать проект React JS, используя create-react-app.
- Настроить маршруты в Flask для отдачи данных в формате JSON.
- Использовать fetch или axios в React JS для получения данных с бэкенд-сервера.
- Отобразить полученные данные в компонентах React JS.
- Разместить приложение React JS в шаблоне Flask.
Это только один из возможных способов подружить Flask и React JS, существуют и другие способы, как, например, использовать Flask в качестве прокси-сервера для React JS приложения.
от
eryn.rodriguez ,
2 года назад
@fred
Вот пример кода для данного подхода:
- Создайте проект Flask и запустите бэкенд-сервер. Например, создайте файл app.py:
1 2 3 4 5 6 7 8 9 10 11 |
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data')
def get_data():
data = {'message': 'Привет от Flask!'}
return jsonify(data)
if __name__ == '__main__':
app.run()
|
- Создайте проект React JS, используя create-react-app:
1 2 |
npx create-react-app my-app cd my-app |
- В файле src/App.js используйте fetch или axios для получения данных с бэкенд-сервера и отобразите их:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState({});
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const response = await fetch('/api/data');
const jsonData = await response.json();
setData(jsonData);
};
return (
<div>
<h1>Привет от React JS!</h1>
<p>{data.message}</p>
</div>
);
}
export default App;
|
- Запустите React JS приложение:
1
|
npm start |
По умолчанию он будет запущен на порту 3000.
- В файле templates/index.html вставьте корневой
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html>
<html>
<head>
<title>Flask + React JS</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
|
- В файле app.py добавьте следующий код для отображения приложения React JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/api/data')
def get_data():
data = {'message': 'Привет от Flask!'}
return jsonify(data)
if __name__ == '__main__':
app.run()
|
- Перезапустите сервер Flask и откройте браузер по адресу http://localhost:5000, чтобы увидеть, как Flask и React JS работают вместе.
Это только один из способов подружить Flask и React JS, вы можете настроить их по-разному в зависимости от ваших конкретных потребностей и структуры проекта.
15