有了上面2份资料就可以做flask的form表单,下面示例是实现一个添加的功能
1. 创建forms.py
from flask_wtf import FlaskForm from wtforms import StringField,TextAreaField,SubmitField,SelectField from wtforms.validators import DataRequired class NewsForm(FlaskForm): title = StringField(label='新闻标题',validators=[DataRequired("请输入标题")],description="请输入标题",render_kw={"required":"required"}) content = TextAreaField(label='新闻内容',validators=[DataRequired("请输入内容")],description="请输入内容",render_kw={"required":"required","class":"form-control"}) types = SelectField(label='新闻类型',choices=[('首页','首页'),('动漫周边','动漫周边'),('军事要闻','军事要闻'),('每日上海','每日上海'),('图片','图片')]) image = StringField(label='新闻图片',description="请输入图片地址",render_kw={"required":"required","class":"form-control"}) submit = SubmitField('提交')
2. 在业务处理模块 wynews.py写上对应的路由
app.config['SECRET_KEY'] = 'a random string' # 通过csrf from forms import NewsForm @app.route('/admin/add/',methods=("GET","POST")) def add(): form = NewsForm() if form.validate_on_submit(): # 如果form表单以submit进行提交,且用户填写的字段通过validators验证器,那么条件为真(submit提交方式就是“POST”) new_obj = News( # 使用flask-sqlalchemy定义的一个表结构 title = form.title.data, content = form.content.data, types = form.types.data, create_at = datetime.now() ) db.session.add(new_obj) db.session.commit() # 文字提示 flash return redirect(url_for('admin',page=2)) # 跳转到admin页 return render_template('admin/add.html',form=form)
前端html的add.html
{% block content %} <form class="form-horizontal" role="form" method="post"> <div class="form-group"> <label for="title" class="col-sm-2 control-label">{{ form.title.label.text }}</label> <div class="col-sm-10"> {{ form.title }} </div> </div> 此处省略 结构类似 <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> {{ form.csrf_token }} {{ form.submit }} </div> </div> </form> {% endblock %}
效果图
ps:
{{ form.title.label}} 前端显示:<label for="title">新闻标题</label>