4-9 使用wtforms定义表单

最新推荐文章于 2020-09-26 14:21:14 发布

huanglianggu

最新推荐文章于 2020-09-26 14:21:14 发布

阅读量403

点赞数

分类专栏： flask

本文链接：https://blog.csdn.net/huanglianggu/article/details/81264160

版权

flask 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一步：

/Users/huanglianggu/Desktop/artcms_project/forms.py

# coding:utf8
from flask_wtf import FlaskForm
# 报错，执行下面命令
# pip install -i http://pypi.douban.com/simple --trusted-host pypi.douban.com flask_wtf
from wtforms import StringField, PasswordField, SubmitField, SelectField, FileField, TextAreaField

"""
登录表单：
1.账号
2.密码
3.登录按钮
"""


class LoginForm(FlaskForm):
    name = StringField(
        label=u"账号",
        validators=[],
        description=u"账号",
        render_kw={
            "class": "form-control",
            "placeholder": u"请输入账号"
        }
    )
    pwd = PasswordField(
        label=u"密码",
        validators=[],
        description=u"密码",
        render_kw={
            "class": "form-control",
            "placeholder": u"请输入密码"
        }
    )
    submit = SubmitField(
        u"登录",
        render_kw={
            "class": "btn btn-primary"
        }
    )


"""
注册表单：
1.账号
2.密码
3.确认密码
4.验证码
5.注册按钮
"""


class RegisterForm(FlaskForm):
    name = StringField(
        label=u"账号",
        validators=[],
        description=u"账号",
        render_kw={
            "class": "form-control",
            "placeholder": u"请输入账号"
        }
    )
    pwd = PasswordField(
        label=u"密码",
        validators=[],
        description=u"密码",
        render_kw={
            "class": "form-control",
            "placeholder": u"请输入密码"
        }
    )
    repwd = PasswordField(
        label=u"确认密码",
        validators=[],
        description=u"确认密码",
        render_kw={
            "class": "form-control",
            "placeholder": u"请输入确认密码"
        }
    )
    code = StringField(
        label=u"验证码",
        validators=[],
        description=u"验证码",
        render_kw={
            "class": "form-control",
            "placeholder": u"请输入验证码"
        }
    )
    submit = SubmitField(
        u"注册",
        render_kw={
            "class": "btn btn-success"
        }
    )


"""
发布文章表单：
1.标题
2.分类
3.封面
4.内容
5.发布文章按钮
"""


class ArtForm(FlaskForm):
    title = StringField(
        label=u"标题",
        description=u"标题",
        validators=[],
        render_kw={
            "class": "form-control",
            "placeholder": u"请输入标题"
        }
    )
    cate = SelectField(
        label=u"分类",
        description=u"分类",
        validators=[],
        choices=[(1, u"科技"), (2, u"搞笑"), (3, u"军事")],
        default=3,
        coerce=int,
        render_kw={
            "class": "form-control"
        }
    )
    logo = FileField(
        label=u"封面",
        description=u"封面",
        validators=[],
        render_kw={
            "class": "form-control-file",
        }
    )
    content = TextAreaField(
        label=u"内容",
        description=u"内容",
        validators=[],
        render_kw={
            "style": "height:300px;",
            "id": "content"
        }
    )
    submit = SubmitField(
        u"发布文章",
        render_kw={
            "class": "btn btn-primary"
        }

    )

第二步：实例化，传值

/Users/huanglianggu/Desktop/artcms_project/views.py

# coding:utf8
from flask import Flask, render_template, redirect
from forms import LoginForm, RegisterForm, ArtForm

app = Flask(__name__)
app.config["SECRET_KEY"] = "12345678"


# 登录
@app.route("/login/", methods=["GET", "POST"])
def login():
    form = LoginForm()
    # 实例化 form
    return render_template("login.html", title=u"登录", form=form)


# 注册
@app.route("/register/", methods=["GET", "POST"])
def register():
    form = RegisterForm()
    return render_template("register.html", title=u"注册", form=form)


# 退出
@app.route("/logout/", methods=["GET"])
def logout():
    return redirect("/login/")


# 发布文章
@app.route("/art/add/", methods=["GET", "POST"])
def art_add():
    form = ArtForm()
    return render_template("art_add.html", title=u"发布文章", form=form)


# 编辑文章
@app.route("/art/edit/<int:id>/", methods=["GET", "POST"])
def art_edit(id):
    return render_template("art_edit.html")


# 删除文章
@app.route("/art/del/<int:id>/", methods=["GET"])
def art_del(id):
    return redirect("/art/list/")


# 文章列表
@app.route("/art/list/", methods=["GET"])
def art_list():
    return render_template("art_list.html", title=u"文章列表")


if __name__ == "__main__":
    app.run(debug=True, host="127.0.0.1", port=8080)

第三步：

/Users/huanglianggu/Desktop/artcms_project/templates/register.html

{% extends "user.html" %}

{% block content %}
<form>
    <div class="form-group">
        <label>账号</label>
        {{ form.name }}
        <!--<input type="text" class="form-control" placeholder="请输入账号！">-->
    </div>
    <div class="form-group">
        <label>密码</label>
        {{ form.pwd }}
        <!--<input type="password" class="form-control" placeholder="请输入密码！">-->
    </div>
    <div class="form-group">
        <label>确认密码</label>
        {{ form.repwd }}
        <!--<input type="password" class="form-control" placeholder="请输入确认密码！">-->
    </div>
    <div class="form-group">
        <label>验证码</label>
        {{ form.code }}
        <!--<input type="text" class="form-control" placeholder="请输入验证码！"><br>-->
        <img data-src="holder.js/180*50" style="margin-top: 6px;color: #0000cc;background-color: #EFEFEF" alt="aa">
    </div>
    <a href="/login/">已有账号！前往登录</a>
    {{ form.submit }}
    <!--<a class="btn btn-success" href="/login/">注册</a>-->

</form>
{% endblock %}

{% block js %}
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>
{% endblock %}

/Users/huanglianggu/Desktop/artcms_project/templates/login.html

{% extends "user.html" %}

{% block content %}
<form>
    <div class="form-group">
        <label>账号</label>
        {{ form.name }}
    </div>
    <div class="form-group">
        <label>密码</label>
        {{ form.pwd }}
    </div>
    <a href="/register/">没有账号？前往注册</a>
    <br>
    {{ form.submit }}
</form>
{% endblock %}

/Users/huanglianggu/Desktop/artcms_project/templates/art_add.html

{% extends "layout.html" %}

{% block css %}
<script type="text/javascript" charset="UTF-8" src="{{ url_for('static',filename='ue/ueditor.config.js') }}"></script>
<script type="text/javascript" charset="UTF-8" src="{{ url_for('static',filename='ue/ueditor.all.min.js') }}"></script>
<script type="text/javascript" charset="UTF-8" src="{{ url_for('static',filename='ue/lang/zh-cn/zh-cn.js') }}"></script>

{% endblock %}

{% block content %}
<form>
    <div class="form-group">
        <label>标题</label>
        {{ form.title }}
        <!--<input type="text" class="form-control" placeholder="请输入标题">-->
    </div>
    <div class="form-group">
        <label>分类</label>
        {{ form.cate }}
        <!--<select class="form-control">-->
            <!--<option value="1">科技</option>-->
            <!--<option value="2">搞笑</option>-->
            <!--<option value="3">军事</option>-->
        <!--</select>-->
    </div>
    <div class="form-group">
        <label>封面</label>
        {{ form.logo }}
        <!--<input type="file" class="form-control-file">-->
        <img data-src="holder.js/300*160" style="margin-top: 6px;background-color:#c3c3c3">
        <a class="btn btn-primary" style="margin-top: 6px;">上传封面</a>
    </div>
    <div class="form-group">
        <label>内容</label>
        {{ form.content }}
        <!--<textarea id="content" style="height:300px;"></textarea>-->
    </div>
    {{ form.submit }}
    <!--<button type="button" class="btn btn-primary">发布文章</button>-->
</form>
{% endblock %}
{% block js %}
    <script>
        var ue = UE.getEditor("content");


        $(document).ready(function () {
            $("#m1").addClass("active")
        });
    </script>
{% endblock %}