应用实例：Flask扩展Flask-WTF和Flask-SQLAlchemy

文件目录结构
./
├── main.py
├── templates
│ └── index.html
└── static
└── js
└── jquery-3.3.1.min.js

一共涉及三个文件
1、jquery-3.3.1.min.js 可百度下载
2、 main.py

# -*- coding: utf-8 -*-

from flask import Flask, render_template, request, url_for, redirect, jsonify
from flask_sqlalchemy import SQLAlchemy
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)


# 配置数据库信息
class Config(object):
    SQLALCHEMY_DATABASE_URI = "mysql://root:123456@127.0.0.1:3306/demo"

    SQLALCHEMY_TRACK_MODIFICATIONS = True

    SECRET_KEY = "adsfasdf9932@@fdsafsdaf"


app.config.from_object(Config)

db = SQLAlchemy(app)


class Author(db.Model):
    """作者"""
    __tablename__ = "tbl_author"

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(32))
    books = db.relationship("Book", backref="author")


class Book(db.Model):
    """书籍"""
    __tablename__ = "tbl_book"

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64))
    author_id = db.Column(db.Integer, db.ForeignKey("tbl_author.id"))


def db_init():
    """
    初始化数据库
    mysql> create database demo default charset utf8;
    """
    db.drop_all()
    db.create_all()

    author1 = Author(name="吴承恩")
    author2 = Author(name="施耐庵")
    author3 = Author(name="罗贯中")
    author4 = Author(name="曹雪芹")
    db.session.add_all([author1, author2, author3, author4])
    db.session.commit()

    book1 = Book(name="西游记", author=author1)
    book2 = Book(name="红楼梦", author=author4)
    book3 = Book(name="三国演义", author=author3)
    book4 = Book(name="水浒传", author=author2)
    db.session.add_all([book1, book2, book3, book4])
    db.session.commit()

class AuthorBookForm(FlaskForm):
    """作者书籍表单"""
    author_name = StringField(label="作者姓名", validators=[DataRequired("作者姓名不能为空")])
    book_name = StringField(label="书籍名称", validators=[DataRequired("书籍名称不能为空")])
    submit = SubmitField(label="提交")

# 视图函数
@app.route("/", methods=["GET", "POST"])
def index():
    form = AuthorBookForm()

    # 验证表单
    if form.validate_on_submit():
        author_name = form.author_name.data
        book_name = form.book_name.data

        # 保存数据
        author = Author(name=author_name)
        db.session.add(author)
        db.session.commit()

        book = Book(name=book_name, author=author)
        db.session.add(book)
        db.session.commit()

    # 查询数据
    authors = Author.query.all()
    return render_template("index.html", authors=authors, form=form)

@app.route("/deleteBook", methods=["POST"])
def delete_book():
    """删除书本数据
    接收json格式的数据 contentType: application/json
    """
    data = request.json
    book_id = data.get("bookId")

    book = Book.query.get(book_id)
    db.session.delete(book)
    db.session.commit()

    data = {
        "code": 0,
        "message": "delete success"
    }
    return jsonify(data)

@app.route("/deleteAuthor")
def delete_author():
    """删除作者书籍"""
    author_id = request.args.get("authorId")

    author = Author.query.get(author_id)
    db.session.delete(author)
    db.session.commit()

    return redirect(url_for("index"))

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

3、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 显示表单 -->
<form action="/" method="post">
    {{ form.csrf_token }}

    {{ form.author_name.label }}
    {{ form.author_name }}
    {% for msg in form.author_name.errors %}
        {{ msg }}
    {% endfor %}

    {{ form.book_name.label }}
    {{ form.book_name }}
    {% for msg in form.book_name.errors %}
        {{ msg }}
    {% endfor %}

    {{ form.submit }}

</form>

<hr/>

<!-- 显示作者书籍 -->
<ul>
    {% for author in authors %}
        <li>
            作者：{{ author.name }} <a href="/deleteAuthor?authorId={{ author.id }}">删除</a>
            <ul>
                {% for book in author.books %}
                    <li>书籍：{{ book.name }} <a href="javascript:" onclick="deleteBook({{ book.id }})">删除</a></li>
                {% endfor %}
            </ul>
        </li>
    {% endfor %}
</ul>

<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script>
    function deleteBook(bookId) {
        var data = {
            bookId: bookId
        };

        // 向后端发送json格式数据
        $.ajax({
            url: "/deleteBook", // 请求url
            type: "post", // 请求方式
            data: JSON.stringify(data), //向后端发送的请求体数据，将js对象转为json字符串
            contentType: "application/json",//向后端发送的数据格式
            dataType: "json", // 后端返回的数据格式
            success: function (result) {
                if (result.code === 0) {
                    location.href = "/";
                }
            }
        })
    }
</script>
</body>
</html>

显示效果

image.png

应用实例：Flask扩展Flask-WTF和Flask-SQLAlchemy

推荐阅读更多精彩内容