首页 > 解决方案 > 如何使用 Flask 添加新的 html 项目

问题描述

我正在制作一个烧瓶应用程序,为教堂创建“服务顺序”。这基本上只允许您输入所有员工都可以实时看到的项目列表。有没有办法附加一个html项目?为了澄清,这是我的python:

from flask import Flask, jsonify, request, url_for, redirect, session, render_template, g
import sqlite3

app = Flask(__name__)

app.config['SECRET_KEY'] = 'Thisisasecret!'

def connect_db():
    connect = sqlite3.connect('Path to my DataBase')
    connect.row_factory = sqlite3.Row
    return connect

def get_db():
    if not hasattr(g, 'sqlite3'):
        g.sqlite_db = connect_db()
    return g.sqlite_db

@app.teardown_appcontext
def close_db(error):
    if hasattr(g, 'sqlite_db'):
        g.sqlite_db.close()

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

@app.route('/add', methods=['POST'])
def add():
    if request.method == 'GET':
        return render_template('index.html')
    else:
        serviceitem = request.form['serviceitem']

        db = get_db()
        db.execute('insert into oos (serviceitem) values (?)', [serviceitem])
        db.commit()

    return render_template('index.html', serviceitem=serviceitem)

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

index.html的如下:

<!DOCTYPE html>
<html>
    <head>
        <title>SFBC Order of Services</title>
        <!-- <link rel="stylesheet" href="style.css"> -->
        <link rel="stylesheet"
                href="https://fonts.googleapis.com/css?family=Raleway">
        <style>
            body {
                font-family: Raleway;
            }

            div {
                margin-left: 500px;
            }

            span {
                margin-left: 520px;
            }

            h1, h2, h3, h4 {
                text-align: center;
            }
        </style>
    </head>

    <body>

        {% block content %}
        <h1>Santa Fe Baptist Church Order of Services</h1>
        <h3>Please select an item or create a new one below.</h3>
        <br><br><br>

        <div>Add a new Service item: 
            <form action="/add" method="POST">
                <input type="text" name="serviceitem">
                <input type="submit">
            </form>
        </div><br>

        <h1>You appended {{ serviceitem }} to the Database.</h1>

        {% endblock %}

    </body>
</html>

所以我想要做的是在添加新项目后添加一个新的列表项,并且一旦有一个值就可能删除一个占位符。我知道我可以用 javascript 做到这一点,所以如果有任何方法可以触发一些 javascript,那也很棒!谢谢你的帮助!

编辑:

我尝试了@ the_gañañufla的答案,但效果不佳。当我将一个数字附加到数据库时,它会返回:

图片消失是不是很烦人? 即使我不认识你,我也喜欢你的烦恼:)

如果我编辑它以包含serviceitem而不是item,那么它只是放入“字母”或我放入的任何内容,迭代它有字母的次数。(字母中有 7 个字母,因此显示了 7 个字母)。

抱歉,如果我的坏词选择令人费解且难以理解:)

标签: pythonpython-3.xflask

解决方案


在 route('/') 中,您需要添加一个 query.all(),以获取您的 db 的所有信息,并将此数据发送到渲染模板中。

 @app.route('/')
 def index():
     db = get_db()
     serviceitem = db.query.all()
     return render_template('index.html', serviceitem=serviceitem)

在其他情况下,无需在 /add 操作中发送带有渲染的信息

 @app.route('/add', methods=['POST'])
    def add():
        if request.method == 'GET':
            return render_template('index.html')
        else:
            serviceitem = request.form['serviceitem']

            db = get_db()
            db.execute('insert into oos (serviceitem) values (?)'[serviceitem])
            db.commit()

        return render_template('index.html')  

推荐阅读