Flask后端结合Angular实现提交按钮添加评论功能的方案咨询

第一步：后端Flask接口改造 #

先修改你的app.py，新增评论提交的API接口，同时支持跨域请求（如果前端是单独项目的话需要开启）：

from flask import Flask, render_template, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app) 

# 临时用内存存储评论，生产环境建议替换为SQLite/MySQL等数据库
comments = []

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/blog')
def blogpost():
    return render_template('blogpost.html')

# 新增评论提交接口
@app.route('/api/submit_comment', methods=['POST'])
def submit_comment():
    data = request.get_json()
    # 简单校验参数
    if not all(key in data for key in ['name', 'email', 'comment_body']):
        return jsonify({'code': 400, 'msg': '参数缺失'}), 400
    new_comment = {
        'name': data['name'],
        'email': data['email'],
        'content': data['comment_body']
    }
    comments.append(new_comment)
    return jsonify({'code': 200, 'msg': '提交成功', 'data': new_comment})

# 可选：新增获取评论列表接口，页面加载时拉取所有评论
@app.route('/api/get_comments', methods=['GET'])
def get_comments():
    return jsonify({'code': 200, 'data': comments})

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

修改完成后先安装依赖：pip install flask-cors

方案1：使用Angular实现前端逻辑 #

这里提供两种适配方式，可根据项目情况选择：

方式A：轻量嵌入AngularJS（1.x）到现有Flask模板 #

不需要重构整个项目，直接在现有blogpost.html中引入CDN并写逻辑即可：

1. 先修改HTML模板的评论部分和表单部分，绑定Angular指令：

<!-- 评论列表部分改成ng-repeat渲染 -->
<div class="comments" ng-app="commentApp" ng-controller="commentCtrl">
    <div class="comment" ng-repeat="comment in comments">
        <h3>{{comment.name}}</h3>
        <h5>{{comment.email}}</h5>
        <p>{{comment.content}}</p>
        <hr>
    </div>

    <div class='submit_comment'>
        <form id='comment_form' ng-submit="submitComment()">
            <label for='name'>Name:</label>
            <input id='name' type="text" name='name' ng-model="formData.name" required>

            <label for='email'>Email:</label>
            <input id='email' type='email' name='email' ng-model="formData.email" required>

            <label for='comment_body'>Comment:</label>
            <!-- 注意你原代码这里textarea的name写错成了email，已经修正 -->
            <textarea id='comment_body' name='comment_body' rows=8 cols=100 ng-model="formData.comment_body" required></textarea>

            <input id='submit' type='submit' name='submit' value='Submit'>
        </form>
    </div>
</div>

2. 在模板末尾引入AngularJS和逻辑代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('commentApp', []);
app.controller('commentCtrl', function($scope, $http) {
    $scope.formData = {};
    // 页面加载时拉取已有评论
    $http.get('/api/get_comments')
        .then(res => {
            $scope.comments = res.data.data;
        });
    // 提交评论逻辑
    $scope.submitComment = function() {
        $http.post('/api/submit_comment', $scope.formData)
            .then(res => {
                // 提交成功后把新评论加到列表最前面
                $scope.comments.unshift(res.data.data);
                // 清空表单
                $scope.formData = {};
                alert('评论提交成功');
            })
            .catch(err => {
                alert('提交失败，请检查输入');
            });
    }
});
</script>

方式B：使用Angular 2+ 单独前端项目 #

如果你已经搭建了独立的Angular项目，只需要做如下配置：

1. 在environment.ts里配置后端API地址
2. 创建评论服务，封装getComments和submitComment的HTTP请求方法
3. 在博客组件中调用服务方法，绑定表单和评论列表即可
4. 开发时配置代理转发到Flask的5000端口，生产环境打包后放到Flask的static目录部署即可

方案2：更轻量的原生JavaScript实现（替代方案） #

如果项目不需要用到Angular的其他复杂能力，用原生JS实现更简单，不需要引入额外框架：
直接在blogpost.html末尾添加如下代码即可：

<script>
// 页面加载时拉取评论
window.addEventListener('load', getComments);
// 监听表单提交事件
document.getElementById('comment_form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认跳转
    const formData = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        comment_body: document.getElementById('comment_body').value
    };
    // 发送提交请求
    fetch('/api/submit_comment', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(res => res.json())
    .then(data => {
        if(data.code === 200) {
            // 插入新评论到列表顶部
            const commentDiv = document.createElement('div');
            commentDiv.className = 'comment';
            commentDiv.innerHTML = `
                <h3>${data.data.name}</h3>
                <h5>${data.data.email}</h5>
                <p>${data.data.content}</p>
                <hr>
            `;
            document.querySelector('.comments').prepend(commentDiv);
            // 清空表单
            document.getElementById('comment_form').reset();
            alert('评论提交成功');
        }
    })
    .catch(err => alert('提交失败，请重试'));
});

function getComments() {
    fetch('/api/get_comments')
    .then(res => res.json())
    .then(data => {
        const commentContainer = document.querySelector('.comments');
        // 清空原有静态评论
        commentContainer.innerHTML = '';
        // 渲染所有评论
        data.data.forEach(comment => {
            const commentDiv = document.createElement('div');
            commentDiv.className = 'comment';
            commentDiv.innerHTML = `
                <h3>${comment.name}</h3>
                <h5>${comment.email}</h5>
                <p>${comment.content}</p>
                <hr>
            `;
            commentContainer.appendChild(commentDiv);
        });
    });
}
</script>

注意事项 #

• 示例代码中用内存存储评论，重启Flask服务后评论会丢失，生产环境请替换为数据库存储
• 实际上线需要增加XSS防护，对用户提交的评论内容做转义，避免恶意脚本注入
• 可以增加更多表单校验规则，比如邮箱格式校验、评论内容长度限制等
• 原HTML代码中textarea的name属性错误设置为了email，已经在上述示例中修正，请注意同步修改

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