文件目录结构
./
├── 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
