flask html新增,flask-将CSS类添加到wtform中的字段

我正在使用wtforms(和flask)生成动态表单。 我想向正在生成的字段中添加一些自定义的CSS类,但是到目前为止,我一直无法这样做。 使用在这里找到的答案,我试图使用自定义窗口小部件来添加此功能。 它的实现方式与该问题的答案几乎完全相同:

class ClassedWidgetMixin(object):

"""Adds the field's name as a class.

(when subclassed with any WTForms Field type).

"""

def __init__(self, *args, **kwargs):

print 'got to classed widget'

super(ClassedWidgetMixin, self).__init__(*args, **kwargs)

def __call__(self, field, **kwargs):

print 'got to call'

c = kwargs.pop('class', '') or kwargs.pop('class_', '')

# kwargs['class'] = u'%s %s' % (field.name, c)

kwargs['class'] = u'%s %s' % ('testclass', c)

return super(ClassedWidgetMixin, self).__call__(field, **kwargs)

class ClassedTextField(TextField, ClassedWidgetMixin):

print 'got to classed text field'

在View中,我这样做是为了创建字段(ClassedTextField是从表单导入的,而f是基本表单的实例):

f.test_field = forms.ClassedTextField('Test Name')

表单的其余部分均已正确创建,但此jinja:

{{f.test_field}}

产生以下输出(无类):

任何提示都很好,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 创建数据库和数据表 首先,我们需要创建一个MySQL数据库,并在其创建一个名为“comments”的数据表,它应该包含以下列:id(主键,自增长),username,email,comment和date_created。 CREATE DATABASE flask_comments; USE flask_comments; CREATE TABLE comments ( id INT(11) NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL, email VARCHAR(50) NOT NULL, comment TEXT NOT NULL, date_created DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ); 2. 安装Flask和相关扩展 我们需要安装Flask框架及其相关扩展,包括flask-wtf、flask-mysql和flask-moment。可以使用pip安装: pip install Flask pip install Flask-WTF pip install Flask-MySQL pip install Flask-Moment 3. 创建Flask应用程序 我们需要创建一个Flask应用程序,并将其配置为连接到MySQL数据库。我们还需要配置Flask-WTF和Flask-Moment扩展。 from flask import Flask, render_template, request, redirect, url_for from flask_wtf import FlaskForm from wtforms import StringField, TextAreaField, SubmitField from wtforms.validators import DataRequired, Email from flask_moment import Moment from flaskext.mysql import MySQL app = Flask(__name__) app.config['SECRET_KEY'] = 'secretkey' app.config['MYSQL_DATABASE_USER'] = 'root' app.config['MYSQL_DATABASE_PASSWORD'] = 'password' app.config['MYSQL_DATABASE_DB'] = 'flask_comments' app.config['MYSQL_DATABASE_HOST'] = 'localhost' mysql = MySQL(app) moment = Moment(app) 4. 创建一个评论表单 我们需要创建一个评论表单,它应该包含用户名、电子邮件和评论字段。我们还需要添加一些验证器。 class CommentForm(FlaskForm): username = StringField('Name', validators=[DataRequired()]) email = StringField('Email', validators=[DataRequired(), Email()]) comment = TextAreaField('Comment', validators=[DataRequired()]) submit = SubmitField('Post Comment') 5. 创建路由和视图函数 我们需要创建一个路由和视图函数,它将渲染表单,并在提交时将评论保存到数据库。 @app.route('/', methods=['GET', 'POST']) def index(): form = CommentForm() if form.validate_on_submit(): username = form.username.data email = form.email.data comment = form.comment.data cur = mysql.get_db().cursor() cur.execute("INSERT INTO comments (username, email, comment) VALUES (%s, %s, %s)", (username, email, comment)) mysql.get_db().commit() return redirect(url_for('index')) comments = [] cur = mysql.get_db().cursor() cur.execute("SELECT * FROM comments ORDER BY date_created DESC") rows = cur.fetchall() for row in rows: comment = { 'id': row[0], 'username': row[1], 'email': row[2], 'comment': row[3], 'date_created': row[4] } comments.append(comment) return render_template('index.html', form=form, comments=comments) 6. 创建HTML模板 我们需要创建一个HTML模板,它将渲染表单和评论。 <!DOCTYPE html> <html> <head> <title>Flask Comments</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> </head> <body> <div class="container"> <h1>Flask Comments</h1> <form method="POST" action="{{ url_for('index') }}"> {{ form.csrf_token }} {{ form.username.label }} {{ form.username }}<br><br> {{ form.email.label }} {{ form.email }}<br><br> {{ form.comment.label }} {{ form.comment }}<br><br> {{ form.submit }} </form> <hr> {% for comment in comments %} <div class="comment"> <h3>{{ comment.username }}</h3> <p>{{ comment.comment }}</p> <p class="date">{{ moment(comment.date_created).format('YYYY-MM-DD HH:mm:ss') }}</p> </div> {% endfor %} </div> </body> </html> 7. 运行应用程序 最后,我们可以运行应用程序,它将在本地主机的5000端口上启动。 if __name__ == '__main__': app.run(debug=True)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值