使用Flask从0到1实现一个web blog（一）

站长

2023年06月15日 19:27 · 阅读数 16

首先我们先来了解一下Flask：

Flask是一个基于Python的轻量级Web应用框架，它简洁而灵活，易于学习和使用。Flask由Werkzeug和Jinja2两个核心库构建而成，它提供了基本的Web开发功能，同时允许开发者根据需要选择和集成其他插件和扩展。

以下是Flask的一些主要特点和优势：

简单易用：Flask的设计目标之一是保持简洁性和可读性。它提供了清晰的API和直观的语法，使开发者能够快速入门并快速构建Web应用程序。
轻量级：Flask是一个轻量级框架，没有过多的约束和依赖。它只提供了最基本的功能，不强制使用特定的工具或设计模式，使开发者能够更自由地选择和集成其他组件。
路由和视图：Flask使用装饰器来定义URL路由和处理函数，使开发者能够根据URL模式将请求路由到适当的视图函数上。
模板引擎：Flask使用Jinja2模板引擎来渲染动态内容。Jinja2提供了灵活的模板语法和强大的功能，使开发者能够轻松生成HTML、XML、JSON等响应内容。
数据库集成：Flask支持多种数据库的集成，包括SQLAlchemy、MongoDB、Redis等。开发者可以根据需要选择适合的数据库工具，并使用Flask提供的扩展来简化数据库操作。
插件和扩展：Flask拥有丰富的扩展生态系统，开发者可以轻松地集成各种功能和服务，如表单验证、用户认证、缓存管理等。Flask的灵活性使得插件和扩展可以根据项目需求进行选择和定制。
文档和社区：Flask拥有完善的官方文档和活跃的社区支持，开发者可以轻松找到问题的解决方案、学习资源和示例代码。

总体而言，Flask是一个简单、灵活且功能强大的Python Web框架，适用于构建各种规模的Web应用程序。无论是小型项目还是大型应用，Flask都能提供高效、可扩展和易维护的开发体验。

通过上述Flask简介我们可以清晰的了解Flask框架的的优势，下面我们就来一起实现一个web blog.

Step 1: 创建项目结构

创建一个新的目录用于项目，并创建以下子录：

app：该目录将包含主要的Flask应用程序代码。
app/views：该目录将包含控制类。
app/services：该目录将包含服务类。
app/dao：该目录将包含数据访问对象类。
app/models：该目录将包含模型类。
app/templates：该目录将包含HTML模板。
app/static：该目录将包含静态文件（CSS、JS、图像等）。

├── app.py
├── config.py
├── models/
│   ├── __init__.py
│   ├── user.py
│   └── ...
├── dao/
│   ├── __init__.py
│   ├── user_dao.py
│   └── ...
├── services/
│   ├── __init__.py
│   ├── user_service.py
│   └── ...
├── views/
│   ├── __init__.py
│   ├── auth_controller.py
│   ├── blog_controller.py
│   └── ...
├── templates/
│   ├── base.html
│   ├── login.html
│   ├── register.html
│   └── ...
└── static/
    ├── css/
    ├── js/
    └── ...

Step 2: 安装Flask和其他依赖项

运行以下命令安装Flask和其他依赖项：

pip install Flask

Step 3: 创建Flask应用程序

在app目录中创建一个新文件app.py，并添加以下代码：

from flask import Flask, render_template, request, redirect, url_for, session
from app.controllers.user_controller import UserController

app = Flask(__name__)
app.secret_key = 'your_secret_key'

# 注册用户控制器
user_controller = UserController(app)

if __name__ == '__main__':
    app.run(debug=True)

这段代码创建了一个新的Flask应用程序，设置了用于会话管理的密钥，注册了用户控制器，并启动了应用程序。

Step 4: 创建模类

在app/models目录中创建以下模型类：

from app import db

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    password = db.Column(db.String(50), nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username

这段代码定义了User模型类，具有三个属性：id、username和password。

Step 5: 创建数据访问对象类

在app/dao录中创建以下数据访问对象类：

from app.models import User

class UserDao:
    def __init__(self):
        pass

    def get_user_by_username(self, username):
        return User.query.filter_by(username=username).first()

    def add_user(self, user):
        db.session.add(user)
        db.session.commit()

这段代码定义了UserDao类，具有两个方法：get_user_by_username和add_user。get_user_by_username方法通过用户名检索用户，add_user方法将新用户添加到数据库中。

Step 6: 创建服务类

在app/services目录中创建以下服务类：

from app.dao.user_dao import UserDao
from app.models import User

class UserService:
    def __init__(self):
        self.user_dao = UserDao()

    def login(self, username, password):
        user = self.user_dao.get_user_by_username(username)
        if user and user.password == password:
            session['user_id'] = user.id
            return True
        else:
            return False

    def logout(self):
        session.pop('user_id', None)

    def register(self, username, password):
        user = User(username=username, password=password)
        self.user_dao.add_user(user)

这段代码定义了UserService类，具有三个方法：login、logout和register。login方法检查用户名和密码是否正确，并在正确时设置会话中的用户ID。logout方法从会话中删除用户ID。register方法创建具有给定用户名和密码的新用户。

Step 7:控制器类

在app/controllers目录中创建以下控制器类：

from flask import render_template, request, redirect, url_for, session
from app.services.user_service import UserService

class UserController:
    def __init__(self, app):
        self.app = app
        self.user_service = UserService()

        # 注册路由
        self.app.add_url_rule('/login', 'login', self.login, methods=['GET', 'POST'])
        self.app.add_url_rule('/logout', 'logout', self.logout)
        self.app.add_url_rule('/register', 'register', self.register, methods=['GET', 'POST'])

    def login(self):
        if request.method == 'POST':
            username = request.form['username']
            password = request.form['password']
            if self.user_service.login(username, password):
                return redirect(url_for('index'))
            else:
                return render_template('login.html', error='Invalid username or password')
        else:
            return render_template('login.html')

    def logout(self):
        self.user_service.logout()
        return redirect(url_for('index'))

    def register(self):
        if request.method == 'POST':
            username = request.form['username']
            password = request.form['password']
            self

这段代码定义了UserController类，具有三个方法：login、logout和register。login方法检查用户名和密码是否正确，并在正确时设置话中的用户ID。logout方法从会话中删除用户ID。register方法创建具有给定用户名和密码的新用户。

Step 7:登录templates/login.html

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="login-container">
        <div class="login-card">
          <h1>Login</h1>
          <form method="POST" action="{{ url_for('login') }}">
            <input type="text" name="username" placeholder="Username">
            <input type="password" name="password" placeholder="Password">
            <input type="submit" value="Login">
          </form>
        </div>
      </div>
</body>
</html>

static/styles.css样式文件


.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .login-card {
    width: 300px;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  .login-card h1 {
    margin-bottom: 20px;
  }
  
  .login-card input[type="text"],
  .login-card input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
  }
  
  .login-card input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .login-card input[type="submit"]:hover {
    background-color: #45a049;
  }

以上就是使用Flask框架实现的一个web blog简单登录示例，后续会继续进一步完善！