kopia lustrzana https://github.com/animator/learn-python
437 wiersze
12 KiB
Markdown
437 wiersze
12 KiB
Markdown
|
# Introduction to Flask: A Python Web Framework
|
|||
|
|
|
|||
|
|
## Table of Contents
|
|||
|
|
1. Introduction
|
|||
|
|
2. Prerequisites
|
|||
|
|
3. Setting Up Your Environment
|
|||
|
|
4. Creating Your First Flask Application
|
|||
|
|
- Project Structure
|
|||
|
|
- Hello World Application
|
|||
|
|
5. Routing
|
|||
|
|
6. Templates and Static Files
|
|||
|
|
- Jinja2 Templating Engine
|
|||
|
|
- Serving Static Files
|
|||
|
|
7. Working with Forms
|
|||
|
|
- Handling Form Data
|
|||
|
|
8. Database Integration
|
|||
|
|
- Setting Up SQLAlchemy
|
|||
|
|
- Performing CRUD Operations
|
|||
|
|
9. Error Handling
|
|||
|
|
10. Testing Your Application
|
|||
|
|
11. Deploying Your Flask Application
|
|||
|
|
- Using Gunicorn
|
|||
|
|
- Deploying to Render
|
|||
|
|
12. Conclusion
|
|||
|
|
13. Further Reading and Resources
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. Introduction
|
|||
|
|
Flask is a lightweight WSGI web application framework in Python. It is designed with simplicity and flexibility in mind, allowing developers to create web applications with minimal setup. Flask was created by Armin Ronacher as part of the Pocoo project and has gained popularity for its ease of use and extensive documentation.
|
|||
|
|
|
|||
|
|
## 2. Prerequisites
|
|||
|
|
Before starting with Flask, ensure you have the following:
|
|||
|
|
- Basic knowledge of Python.
|
|||
|
|
- Understanding of web development concepts (HTML, CSS, JavaScript).
|
|||
|
|
- Python installed on your machine (version 3.6 or higher).
|
|||
|
|
- pip (Python package installer) installed.
|
|||
|
|
|
|||
|
|
## 3. Setting Up Your Environment
|
|||
|
|
1. **Install Python**: Download and install Python from python.org.
|
|||
|
|
2. **Create a Virtual Environment**:
|
|||
|
|
```
|
|||
|
|
python -m venv venv
|
|||
|
|
```
|
|||
|
|
3. **Activate the Virtual Environment**:
|
|||
|
|
- On Windows:
|
|||
|
|
```
|
|||
|
|
venv\Scripts\activate
|
|||
|
|
```
|
|||
|
|
- On macOS/Linux:
|
|||
|
|
```
|
|||
|
|
source venv/bin/activate
|
|||
|
|
```
|
|||
|
|
4. **Install Flask**:
|
|||
|
|
```
|
|||
|
|
pip install Flask
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 4. Creating Your First Flask Application
|
|||
|
|
### Project Structure
|
|||
|
|
A typical Flask project structure might look like this:
|
|||
|
|
```
|
|||
|
|
my_flask_app/
|
|||
|
|
app/
|
|||
|
|
__init__.py
|
|||
|
|
routes.py
|
|||
|
|
templates/
|
|||
|
|
static/
|
|||
|
|
venv/
|
|||
|
|
run.py
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Hello World Application
|
|||
|
|
1. **Create a Directory for Your Project**:
|
|||
|
|
```
|
|||
|
|
mkdir my_flask_app
|
|||
|
|
cd my_flask_app
|
|||
|
|
```
|
|||
|
|
2. **Initialize the Application**:
|
|||
|
|
- Create `app/__init__.py`:
|
|||
|
|
```python
|
|||
|
|
from flask import Flask
|
|||
|
|
|
|||
|
|
def create_app():
|
|||
|
|
app = Flask(__name__)
|
|||
|
|
|
|||
|
|
with app.app_context():
|
|||
|
|
from . import routes
|
|||
|
|
return app
|
|||
|
|
```
|
|||
|
|
- Create `run.py`:
|
|||
|
|
```python
|
|||
|
|
from app import create_app
|
|||
|
|
|
|||
|
|
app = create_app()
|
|||
|
|
|
|||
|
|
if __name__ == "__main__":
|
|||
|
|
app.run(debug=True)
|
|||
|
|
```
|
|||
|
|
- Create `app/routes.py`:
|
|||
|
|
```python
|
|||
|
|
from flask import current_app as app
|
|||
|
|
|
|||
|
|
@app.route('/')
|
|||
|
|
def hello_world():
|
|||
|
|
return 'Hello, World!'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. **Run the Application**:
|
|||
|
|
```
|
|||
|
|
python run.py
|
|||
|
|
```
|
|||
|
|
Navigate to `http://127.0.0.1:5000` in your browser to see "Hello, World!".
|
|||
|
|
|
|||
|
|
## 5. Routing
|
|||
|
|
In Flask, routes are defined using the `@app.route` decorator. Here's an example of different routes:
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
from flask import Flask
|
|||
|
|
|
|||
|
|
app = Flask(__name__)
|
|||
|
|
|
|||
|
|
@app.route('/')
|
|||
|
|
def home():
|
|||
|
|
return 'Home Page'
|
|||
|
|
|
|||
|
|
@app.route('/about')
|
|||
|
|
def about():
|
|||
|
|
return 'About Page'
|
|||
|
|
|
|||
|
|
@app.route('/user/<username>')
|
|||
|
|
def show_user_profile(username):
|
|||
|
|
return f'User: {username}'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Explanation**:
|
|||
|
|
- The `@app.route('/')` decorator binds the URL `'/'` to the `home` function, which returns 'Home Page'.
|
|||
|
|
- The `@app.route('/about')` decorator binds the URL `/about` to the `about` function.
|
|||
|
|
- The `@app.route('/user/<username>')` decorator binds the URL `/user/<username>` to the `show_user_profile` function, capturing the part of the URL as the `username` variable.
|
|||
|
|
|
|||
|
|
## 6. Templates and Static Files
|
|||
|
|
### Jinja2 Templating Engine
|
|||
|
|
Jinja2 is Flask's templating engine. Templates are HTML files that can include dynamic content.
|
|||
|
|
|
|||
|
|
- **Create a Template**:
|
|||
|
|
- `app/templates/index.html`:
|
|||
|
|
```html
|
|||
|
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>{{ title }}</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>{{ heading }}</h1>
|
|||
|
|
<p>{{ content }}</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Render the Template**:
|
|||
|
|
```python
|
|||
|
|
from flask import Flask, render_template
|
|||
|
|
|
|||
|
|
app = Flask(__name__)
|
|||
|
|
|
|||
|
|
@app.route('/')
|
|||
|
|
def home():
|
|||
|
|
return render_template('index.html', title='Home', heading='Welcome to Flask', content='This is a Flask application.')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Serving Static Files
|
|||
|
|
Static files like CSS, JavaScript, and images are placed in the `static` directory.
|
|||
|
|
|
|||
|
|
- **Create Static Files**:
|
|||
|
|
- `app/static/style.css`:
|
|||
|
|
```css
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Include Static Files in Templates**:
|
|||
|
|
```html
|
|||
|
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>{{ title }}</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>{{ heading }}</h1>
|
|||
|
|
<p>{{ content }}</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 7. Working with Forms
|
|||
|
|
### Handling Form Data
|
|||
|
|
Forms are used to collect user input. Flask provides utilities to handle form submissions.
|
|||
|
|
|
|||
|
|
- **Create a Form**:
|
|||
|
|
- `app/templates/form.html`:
|
|||
|
|
```html
|
|||
|
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>Form</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<form method="POST" action="/submit">
|
|||
|
|
<label for="name">Name:</label>
|
|||
|
|
<input type="text" id="name" name="name">
|
|||
|
|
<input type="submit" value="Submit">
|
|||
|
|
</form>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Handle Form Submission**:
|
|||
|
|
```python
|
|||
|
|
from flask import Flask, request, render_template
|
|||
|
|
|
|||
|
|
app = Flask(__name__)
|
|||
|
|
|
|||
|
|
@app.route('/form')
|
|||
|
|
def form():
|
|||
|
|
return render_template('form.html')
|
|||
|
|
|
|||
|
|
@app.route('/submit', methods=['POST'])
|
|||
|
|
def submit():
|
|||
|
|
name = request.form['name']
|
|||
|
|
return f'Hello, {name}!'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Explanation**:
|
|||
|
|
- The `@app.route('/form')` route renders the form.
|
|||
|
|
- The `@app.route('/submit', methods=['POST'])` route handles the form submission and displays the input name.
|
|||
|
|
|
|||
|
|
## 8. Database Integration
|
|||
|
|
### Setting Up SQLAlchemy
|
|||
|
|
SQLAlchemy is an ORM that allows you to interact with databases using Python objects.
|
|||
|
|
|
|||
|
|
- **Install SQLAlchemy**:
|
|||
|
|
```
|
|||
|
|
pip install flask_sqlalchemy
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Configure SQLAlchemy**:
|
|||
|
|
- `app/__init__.py`:
|
|||
|
|
```python
|
|||
|
|
from flask import Flask
|
|||
|
|
from flask_sqlalchemy import SQLAlchemy
|
|||
|
|
|
|||
|
|
db = SQLAlchemy()
|
|||
|
|
|
|||
|
|
def create_app():
|
|||
|
|
app = Flask(__name__)
|
|||
|
|
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
|
|||
|
|
db.init_app(app)
|
|||
|
|
return app
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Performing CRUD Operations
|
|||
|
|
Define models and perform CRUD operations.
|
|||
|
|
|
|||
|
|
- **Define a Model**:
|
|||
|
|
- `app/models.py`:
|
|||
|
|
```python
|
|||
|
|
from app import db
|
|||
|
|
|
|||
|
|
class User(db.Model):
|
|||
|
|
id = db.Column(db.Integer, primary key=True)
|
|||
|
|
username = db.Column(db.String(80), unique=True, nullable=False)
|
|||
|
|
|
|||
|
|
def __repr__(self):
|
|||
|
|
return f'<User {self.username}>'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Create the Database**:
|
|||
|
|
```python
|
|||
|
|
from app import create_app, db
|
|||
|
|
from app.models import User
|
|||
|
|
|
|||
|
|
app = create_app()
|
|||
|
|
with app.app_context():
|
|||
|
|
db.create_all()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Perform CRUD Operations**:
|
|||
|
|
```python
|
|||
|
|
from app import db
|
|||
|
|
from app.models import User
|
|||
|
|
|
|||
|
|
# Create
|
|||
|
|
new_user = User(username='new_user')
|
|||
|
|
db.session.add(new_user)
|
|||
|
|
db.session.commit()
|
|||
|
|
|
|||
|
|
# Read
|
|||
|
|
user = User.query.first()
|
|||
|
|
|
|||
|
|
# Update
|
|||
|
|
user.username = 'updated_user'
|
|||
|
|
db.session.commit()
|
|||
|
|
|
|||
|
|
# Delete
|
|||
|
|
db.session.delete(user)
|
|||
|
|
db.session.commit()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 9. Error Handling
|
|||
|
|
Error handling in Flask can be managed by defining error handlers for different HTTP status codes.
|
|||
|
|
|
|||
|
|
- **Define an Error Handler**:
|
|||
|
|
```python
|
|||
|
|
from flask import Flask, render_template
|
|||
|
|
|
|||
|
|
app = Flask(__name__)
|
|||
|
|
|
|||
|
|
@app.errorhandler(404)
|
|||
|
|
def page_not_found(e):
|
|||
|
|
return render_template('404.html'), 404
|
|||
|
|
|
|||
|
|
@app.errorhandler(500)
|
|||
|
|
def internal_server_error(e):
|
|||
|
|
return render_template('500.html'), 500
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Create Error Pages**:
|
|||
|
|
`app/templates/404.html`:
|
|||
|
|
|
|||
|
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>Page Not Found</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>404 - Page Not Found</h1>
|
|||
|
|
<p>The page you are looking for does not exist.</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
- **app/templates/500.html:**
|
|||
|
|
|
|||
|
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>Internal Server Error</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>500 - Internal Server Error</h1>
|
|||
|
|
<p>Something went wrong on our end. Please try again later.</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 10. Testing Your Application
|
|||
|
|
Flask applications can be tested using Python's built-in `unittest` framework.
|
|||
|
|
|
|||
|
|
- **Write a Test Case**:
|
|||
|
|
- `tests/test_app.py`:
|
|||
|
|
```python
|
|||
|
|
import unittest
|
|||
|
|
from app import create_app
|
|||
|
|
|
|||
|
|
class BasicTestCase(unittest.TestCase):
|
|||
|
|
def setUp(self):
|
|||
|
|
self.app = create_app()
|
|||
|
|
self.app.config['TESTING'] = True
|
|||
|
|
self.client = self.app.test_client()
|
|||
|
|
|
|||
|
|
def test_home(self):
|
|||
|
|
response = self.client.get('/')
|
|||
|
|
self.assertEqual(response.status_code, 200)
|
|||
|
|
self.assertIn(b'Hello, World!', response.data)
|
|||
|
|
|
|||
|
|
if __name__ == '__main__':
|
|||
|
|
unittest.main()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Run the Tests**:
|
|||
|
|
```
|
|||
|
|
python -m unittest discover -s tests
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 11. Deploying Your Flask Application
|
|||
|
|
### Using Gunicorn
|
|||
|
|
Gunicorn is a Python WSGI HTTP Server for UNIX. It’s a pre-fork worker model, meaning that it forks multiple worker processes to handle requests.
|
|||
|
|
|
|||
|
|
- **Install Gunicorn**:
|
|||
|
|
```
|
|||
|
|
pip install gunicorn
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Run Your Application with Gunicorn**:
|
|||
|
|
```
|
|||
|
|
gunicorn -w 4 run:app
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Deploying to Render
|
|||
|
|
Render is a cloud platform for deploying web applications.
|
|||
|
|
|
|||
|
|
- **Create a `requirements.txt` File**:
|
|||
|
|
```
|
|||
|
|
Flask
|
|||
|
|
gunicorn
|
|||
|
|
flask_sqlalchemy
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Create a `render.yaml` File**:
|
|||
|
|
```yaml
|
|||
|
|
services:
|
|||
|
|
- type: web
|
|||
|
|
name: my-flask-app
|
|||
|
|
env: python
|
|||
|
|
plan: free
|
|||
|
|
buildCommand: pip install -r requirements.txt
|
|||
|
|
startCommand: gunicorn -w 4 run:app
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Deploy Your Application**:
|
|||
|
|
1. Push your code to a Git repository.
|
|||
|
|
2. Sign in to Render and create a new Web Service.
|
|||
|
|
3. Connect your repository and select the branch to deploy.
|
|||
|
|
4. Render will automatically use the `render.yaml` file to configure and deploy your application.
|
|||
|
|
|
|||
|
|
## 12. Conclusion
|
|||
|
|
Flask is a powerful and flexible framework for building web applications in Python. It offers simplicity and ease of use, making it a great choice for both beginners and experienced developers. This guide covered the basics of setting up a Flask application, routing, templating, working with forms, integrating databases, error handling, testing, and deployment.
|
|||
|
|
|
|||
|
|
## 13. Further Reading and Resources
|
|||
|
|
- Flask Documentation: https://flask.palletsprojects.com/en/latest/
|
|||
|
|
- Jinja2 Documentation: https://jinja.palletsprojects.com/en/latest/
|
|||
|
|
- SQLAlchemy Documentation: https://docs.sqlalchemy.org/en/latest/
|
|||
|
|
- Render Documentation: https://render.com/docs
|