PyScript and Flask: How to submit form and validate on Flask side | PyScript tutorial

Опубликовано: 14 Сентябрь 2024
на канале: Red Eyed Coder Club
2k
46

This is a very simple project built with PyScript and Flask.
Flask on the backend side, and Pyscript as the frontend.

The main idea of the video is to show how to submit form with PyScript to Flask, how to send AJAX POST-requests with PyScript, and how to validate submitted data with Flask-WTF and FlaskForm class, and of course, save data in a database using Flask-SQLAlchemy.

When I'm clicking on the green button Pyscript sends a POST request to my Flask application, and Flask validate a user's input, and creates a City object, then it sends the object back to PyScript.

Besides that this video is about how to configure Flask instance with Application factory, how to configure CSRF protection for Flask application, how to create a custom validator for FlaskForm class.

Follow me
Telegram:
Twitter:
Facebook:

=== Links ===
Python Poetry tutorial: How to use Python Poetry -


Timecodes:

Flask side

00:00 - Demo, description of the project
01:21 - Description of the starting point
02:43 - Initial Flask app configuration using Flask Application factory
05:31 - Creating a database, a Flask model using SQLAlchemy. Beginning.
05:40 - Flask database configuration
07:34 - Creating a Flask model
10:08 - Creating the database with Flask-SQLAlchemy
12:03 - Creating a form (FlaskForm) to validate a user's input
13:01 - Flask custom validator
15:06 - Flask CSRF protection
16:15 - Flask handler of a POST request (using form for validation)
18:28 - Using of dataclass decorator to serialize City objects

PyScript side

19:40 - Beginning of the Pyscript, frontend part
21:56 - A form submitting description
22:33 - PyScript on click handler, and an event listener
26:44 - make_request() function definition to make AJAX POST-requests to Flask


*** Other PyScript Tutorials ***
PyScript and Django: submit form -
PyScript and Django: Basic Frontend and DOM manipulations -
PyScript and Flask: Basic Frontend and DOM manipulations -


PyScript and Flask: How to submit form and validate on Flask side | PyScript tutorial