Python Flask实现查询和添加数据!这个框架简直太神奇了

2020-03-30 11:02:38  阅读:-  来源:

在其他的文章里,我写了 Flask 对数据库进行增删改查的方法,也写了 Flask 将数据返回给前端的方法。


这篇文章,将两者串联起来,实现从前端到数据库的整个过程,通过前端页面查询数据库的数据,从前端向数据库添加数据。


一、创建数据库并添加数据


在项目文件夹下创建一个 search_and_add.py 文件,在里面编写创建数据表和添加数据的代码。




























































from flask import Flaskfrom flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://admin:Mysql!123@127.0.0.1:3306/MyDB_one'app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = Trueapp.config['SQLALCHEMY_ECHO'] = Truedb = SQLAlchemy(app)

class Phone(db.Model): __tablename__ = 'Phone_tb' pid = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(32)) person_id = db.Column(db.Integer, db.ForeignKey('Person_tb.mid'))
def __repr__(self): return 'Phone_name: {}'.format(self.name)

class Person(db.Model): __tablename__ = 'Person_tb' mid = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(64), unique=True) age = db.Column(db.Integer) phones = db.relationship('Phone', backref='person', lazy='dynamic')
def __repr__(self): return 'Person_name: {}'.format(self.name)

db.drop_all()db.create_all()

if __name__ == '__main__':
per_one = Person(name='You', age=18) per_two = Person(name='Me', age=81) per_three = Person(name='JackMa', age=60) per_four = Person(name='Panshiyi', age=50) per_five = Person(name='DingLei', age=40) db.session.add_all([per_one, per_two, per_three, per_four, per_five])
phone_one = Phone(name='IPhone', person_id=1) phone_two = Phone(name='Mi', person_id=3) phone_three = Phone(name='NOKIA', person_id=2) phone_four = Phone(name='HUAWEI', person_id=4) phone_five = Phone(name='OPPO', person_id=5) phone_six = Phone(name='VIVO', person_id=1) db.session.add_all([phone_one, phone_two, phone_three, phone_four, phone_five, phone_six]) db.session.commit()
app.run(debug=True)


代码中使用提前创建好的数据库用户 admin 和提前创建好的数据库 MyDB_one ,连接数据库、创建数据表并在数据表中添加数据。


运行代码后,会在数据库 MyDB_one 中(先删除再)创建两张表 Person_tb 和 Phone_tb ,并分别在两张表中添加5条和6条数据。



添加完初始数据后,将 db.drop_all() ,db.create_all() 和添加数据的代码注释掉,避免重复创建和添加。


二、前端页面准备


在模板文件目录 templates 中创建一个 serach_and_add.html 前端模板文件,然后在里面编写前端页面的代码。

私信小编01 领取Python电子书三百本

这篇文章的主要目的研究后端的接口实现,模板文件只是准备工作,所以只写了几个标签。


需要的功能是默认情况下首页展示全部数据,查询时只显示查询的数据,添加后显示添加后所有的数据。(本来打算写一个样式更好点的前端页面,查询数据和添加数据时在弹框操作。功能实现了,但是写得太臭,所以干脆不写样式了,以后再把前端写好点。)































<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Person</title></head><body><form method="post"> <label>人名:</label> <input id="person" name="person" type="text" value=""><br/> <label>手机:</label> <input id="phone" name="phone" type="text" value=""><br/><br/> <input id="search" name="search" type="submit" value="查询"> <input id="add" name="add" type="submit" value="添加"><br/></form>
<ul> {% for person in persons %} <li>{{ person.name }}</li> <ul> {% for phone in person.phones %} <li>{{ phone.name }}</li> {% else %} <li>无</li> {% endfor %} </ul> {% endfor %}</ul>
</body></html>


三、实现查询所有数据的功能


访问前端首页时,默认查询出所有 person 和对应的 phone 。









from flask import render_template

@app.route('/')def index(): persons = Person.query.all() return render_template('search_and_add.html', persons=persons)


在 search_and_add.py 中创建模型类的后面添加上面的视图函数,查询出 Person 模型类中的所有数据,返回给前端。


因为 Person 和 Phone 是有关系字段的,Person 对 Phone 是一对多的关系,所以通过 Person 中的关系字段可以获取到对应的 Phone 。


运行 search_and_add.py ,访问 http://127.0.0.1:5000/ ,显示效果如下:



四、实现查询部分数据的功能


上面的视图函数默认会查询所有的数据进行展示,现在实现输入人名来查询单条数据。












from flask import render_template, request

@app.route('/', methods=['GET', 'POST'])def index(): persons = Person.query.all() if request.method == 'POST': person_name = request.form.get('person') persons = Person.query.filter_by(name=person_name) return render_template('search_and_add.html', persons=persons)


从 Flask 中导入请求上下文 request ,后端通过请求上下文 request 获取前端传入的数据。前端要向后端传递数据,所以请求方式是 POST ,需要修改视图函数支持的请求方式,通过 route 装饰器中的 methods 来设置支持的请求方式。


将视图函数修改成上面的代码,重新运行 search_and_add.py ,访问 http://127.0.0.1:5000/ ,在人名的输入框中输入需要查询的人名,如 You ,然后点击“查询”按钮,运行结果如下:



如果查询的数据不存在,则显示内容为空。



五、实现添加数据的功能


前面是查询数据库中的数据展示在前端页面,现在实现添加数据到后端数据库,并将所有数据一起展示在前端。



















































from flask import render_template, request, redirect, flashimport random

@app.route('/', methods=['GET', 'POST'])def index(): if request.method == 'GET': persons = Person.query.all() return render_template('search_and_add.html', persons=persons) if request.method == 'POST': person_name = request.form.get('person') if not person_name: return redirect('/') submit = request.form.get('search') if submit == '查询': persons = Person.query.filter_by(name=person_name) return render_template('search_and_add.html', persons=persons) submit = request.form.get('add') if submit == '添加': phone_name = request.form.get('phone') person = Person.query.filter_by(name=person_name).first() if person: if not phone_name: return redirect('/') phone = Phone.query.filter(Phone.name == phone_name, Phone.person_id == person.mid).first() if phone: flash('数据已存在!') else: phone = Phone(name=phone_name, person_id=person.mid) add_data(phone) else: person = Person(name=person_name, age=random.randint(18, 25)) add_data(person) if not phone_name: return redirect('/') phone = Phone(name=phone_name) phone.person = person add_data(phone) return redirect('/')

def add_data(obj): try: db.session.add(obj) db.session.commit() except Exception as e: print(e) db.session.rollback() flash("添加失败")


从 Flask 中导入了 redirect 方法用于重定向,因为我们添加数据后要把数据全部展示在首页,所以重定向到首页。


导入 flash 方法用于向前端发送提示信息,为了使用 flash ,需要给 app 增加 SECRET_KEY 配置,这个秘钥是一串任意字符串。



app.config['SECRET_KEY'] = 'NFAIOSDFHASOGHAOSPIGAOWE'


并且,要在前端获取 flash 发送的提示信息,需要使用 get_flashed_messages() 方法进行接收,然后将接收到的信息进行展示,所以在模板文件中添加如下代码。





{% for message in get_flashed_messages() %} {{ message }}{% endfor %}


修改代码后,重新运行 search_and_add.py ,访问 http://127.0.0.1:5000/ ,在人名和手机的输入框中输入需要添加的人名和手机,如 Tayer,IPhone,然后点击“添加”按钮,运行结果如下:



当然,上面的代码中实现了每种情况的添加,如只添加人名不添加手机,添加的人名和手机已存在等,这些都已经包含在上面的代码中了,就不一一演示了。