如何在Flask中渲染JSX文件？React表单整合MySQL遇阻求助

我正尝试通过Flask将React联系表单与MySQL Workbench进行整合，已完成数据库初始化及基于SQLAlchemy的模型创建，但在使用render_template时遇到问题。能否渲染contact.jsx文件而非index.html文件？若可以，具体该如何操作？

用户提供的代码：

from flask import Flask, request, render_template
from flask_sqlalchemy import SQLAlchemy


# create a flask instance
app = Flask(__name__)
# Add Database
#scp.config['SQLALCHEMY_DATABASE_URI'] = 'mysql:username:password@localhost/db_name'
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localhost/student_career_prediction'

# Initialize the database
mysql = SQLAlchemy(app)

# Create Model same name as in database
# by Default nullable is true


class ContactUs(mysql.Model):
    First_Name = mysql.Column(mysql.String(200),unique=False,nullable=False)
    Last_Name = mysql.Column(mysql.String(
        200), nullable=False, primary_key=True)
    Email = mysql.Column(mysql.String(100), nullable=False)
    Description = mysql.Column(mysql.String(500), nullable=False)


@app.route('/Contact', methods=['GET', 'POST'])
def Contact():
    if request.method == 'POST':
        # Add Entry to Database
        fname = request.form.get('fname')
        lname = request.form.get('lname')
        email = request.form.get('email')
        msg = request.form.get('msg')
        entry = ContactUs(First_Name=fname, Last_Name=lname,Email=email, Description=msg)
        mysql.session.add(entry)
        mysql.session.commit()

    return render_template('Contact.jsx')


# these is to display the code in browser
# debug=True means display errors on browser.
if __name__ == "__main__":
    app.run(debug=True)

解决方案 #

Flask的render_template默认没法直接渲染JSX文件——JSX是React专属语法，必须先编译成浏览器能识别的普通JavaScript才能正常运行，直接返回JSX文件只会让浏览器把它当成无法解析的文本/代码。

你可以按以下两种思路处理：

思路一：Flask配合React构建产物，作为静态文件服务器 #

1. 在你的React项目中执行npm run build，生成build文件夹，里面是编译好的静态HTML、JS、CSS文件
2. 将build文件夹中的内容复制到Flask项目的templates（存放HTML）和static（存放JS/CSS）文件夹，或者直接修改Flask配置指向build文件夹
3. 修改Flask路由，让/Contact返回React的入口index.html，通过React的前端路由来展示Contact组件；表单提交时调用Flask的专属API接口（比如/submit-contact）完成数据库写入
4. 这种模式下，Flask负责后端逻辑，前端页面完全由React渲染

思路二：前后端分离，Flask仅作为API服务 #

1. 把Flask的/Contact接口改成仅处理POST请求，专注接收表单数据并写入数据库，GET请求可返回接口状态说明
2. React项目单独启动（比如npm start），在Contact组件中用axios或fetch向Flask的/Contact接口发送POST请求
3. 这种方式前后端完全独立，开发和部署都更灵活

额外代码修正建议 #

• 你的ContactUs模型把Last_Name设为主键不合理，极易出现主键重复问题，建议新增自增ID作为主键：

class ContactUs(mysql.Model):
    id = mysql.Column(mysql.Integer, primary_key=True, autoincrement=True)
    First_Name = mysql.Column(mysql.String(200), unique=False, nullable=False)
    Last_Name = mysql.Column(mysql.String(200), nullable=False)
    Email = mysql.Column(mysql.String(100), nullable=False)
    Description = mysql.Column(mysql.String(500), nullable=False)

• 表单提交成功后，建议重定向或返回提示信息，避免用户刷新页面重复提交：

from flask import redirect, url_for

@app.route('/Contact', methods=['GET', 'POST'])
def Contact():
    if request.method == 'POST':
        # 原有数据库写入代码
        mysql.session.commit()
        # 重定向到当前页面或成功页面
        return redirect(url_for('Contact'))
    # 思路一返回index.html，思路二可返回API状态
    return render_template('index.html')

内容的提问来源于stack exchange，提问作者Muaz Ashraf