檔案目錄結構
./
├── 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:[email protected]: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> 顯示效果
![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)