0

如何创建具有 React 前端和 Flask 后端的网站？

我已经使用烧瓶和模板创建了网站，我已经使用 react 制作了页面，现在我想将它们结合起来。

我已经尝试了一些东西，唯一有效的东西需要进入反应配置文件并且非常复杂。即便如此，使用 fetch 也很复杂，每次更改 react 文件时我都必须运行 npm run build。

在我看来，这就像一直都会做的事情，但我找不到任何简单的资源来做这件事。

关于网站，有什么我根本不了解的东西，我走错了路吗？

4

1 回答 1

1

专注于开发工作流程，因为在如何部署到生产环境方面有无数种选择。

使用作为根 url 前缀的 Flask 应用程序/api，手动通过为所有路由装饰器添加前缀或使用蓝图来运行。

py/app.py

@app.route('/api')
def index():
    return {'message':'hello'}

将 Flask 开发服务器 url 添加到您的package.json文件中

js/package.json

{
    ...,
    "proxy": "http://localhost:5000"
}

使用组件获取数据

js/Flask.js

import React, { Component } from 'react'

export class Flask extends Component {
    constructor(props) {
        super(props)
        this.state = { data: {}, status: null }
    }

    fetchData() {
        let status
        fetch('/api')
        .then((res) => {
            return {
                data: res.json(),
                status: status
            }
        })
        .then((data) => {
            this.setState({ ...data })
        }
        .catch((err) => {
            console.error(err)
        })
    }

    componentDidMount() {
        this.fetchData()
    }

    render() {
        const { data, status } = this.state
        return (
            <div>
                <h3>Status: { status }</h3>
                <pre>
                    { JSON.stringify(data) }
                </pre>
            </div>
        )
    }
}

export default Flask

最后，将组件包含在您的 mainApp

js/App.js

import React from 'react';
import Flask from './Flask'

function App() {
  return (
    <div className="App">
      <Flask />
    </div>
  );
}

export default App;

使用首选方法启动 Flask 服务器，或者flask run直接执行脚本，然后使用yarn或启动 JS 开发服务器npm start。您应该会看到来自您的 api 路由的响应显示在http://localhost:8000

只要您debug=True使用npm start( not npm run build ) 运行 Flask 服务器，后端或前端所做的任何更改都将被自动检测并重新加载您的应用程序。

于 2020-05-06T11:22:29.377 回答