Question

我是一名新手Python和Javascript程序员，目前正致力于使用Flask和MySQL创建事件管理器应用程序。

单页网站应允许用户：

添加和查看活动。
按日期或按类别对事件排序

我似乎无法将数据插入到我的本地MySQL数据库中。每次我打开MySQL工作台进行检查时，表格都是空的。

我的问题是：

如何使用Flask将输入标签中的数据插入MySQL？
如果插入成功，检查MySQL的最佳方法是什么？
如何在应用启动时使用Flask将数据从MySQL导入HTML表格？

HTML：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <title>Events and Opportunities</title>
</head>
<body>
    <div class = 'container'>
        <h1>Events and Opportunities</h1>
        <table class="table">
            <thead>
                <tr id = 'tableHeader'>
                    <th>Date</th>
                    <th>Category</th>
                    <th>Title</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <form action = '/' method = 'post'>
                    <tr id = 'tableInput'>
                        <td><input type = 'date' name = 'inputDate' id = 'inputDate'></td>
                        <td><input type = 'text' name = 'inputCategory' id = 'inputCategory' maxlength = '20'></td>
                        <td><input type = 'text' name = 'inputTitle' id = 'inputTitle' maxlength = '100'></td>
                        <td><input type = 'text' name = 'inputDescription' id = 'inputDescription' maxlength = '500'></td>
                    </tr>
                </form>
            </tbody>
        </table>
        <button type = 'button' id = 'addButton' class="btn btn-default">Add</button>
    </div>
    <script src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
    <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous">
    </script>
    <script src = 'static/app.js'></script>
</body>
</html>

Javascript：

$('#addButton').on('click', () => {
    if ($('#inputDate').val() === '' || $('#inputCategory') === '' || $('#inputTitle') === '' || $('#inputDescription') === ''){
        alert('Please fill in the form.');
    }
    else{
        const valDate = $('<th></th>').text($('#inputDate').val());
        const valCategory = $('<th></th>').text($('#inputCategory').val());
        const valTitle = $('<th></th>').text($('#inputTitle').val());
        const valDescription = $('<th></th>').text($('#inputDescription').val());

        const newRow = $('<tr></tr>').append(valDate, valCategory, valTitle, valDescription);
        $('#tableInput').before(newRow);

        $('#inputDate').val('');
        $('#inputCategory').val('');
        $('#inputTitle').val('');
        $('#inputDescription').val('');
    }
})

Flask代码：

from flask import Flask, render_template, request
import mysql.connector

app = Flask(__name__)
cnx = mysql.connector.connect(user='root', password='yunani', host='127.0.0.1',  database='test')
cursor = cnx.cursor()

@app.route('/', methods = ['GET', 'POST'])
def index():
    return render_template('index.html')
    if request.method == 'POST':
        date = request.form['inputDate']
        category = request.form['inputCategory']
        title = request.form['inputTitle']
        description = request.form['inputDescription']
        cursor.execute('INSERT INTO data (Date, Category, Title, Description) VALUES ({}, {}, {}, {})'.format(date, category, title, description))
        cnx.commit()

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

MySQL架构：link to image

Answer 1

尝试将处理程序更改为

def index():
    if request.method == 'POST':
        date = request.form['inputDate']
        category = request.form['inputCategory']
        title = request.form['inputTitle']
        description = request.form['inputDescription']
        cursor.execute('INSERT INTO data (Date, Category, Title, Description) VALUES ({}, {}, {}, {})'.format(date, category, title, description))
        cnx.commit()
    return render_template('index.html')  # don't do this at the top

您目前正在检查呼叫类型或与数据库通信之前返回。

使用Flask和MySQL创建事件管理器

1 个答案: