使用 Flask 构建简易的博客系统:分步指南

liebian365 2024-11-13 13:24 20 浏览 0 评论

Flask 是一个轻量级且灵活的 Python Web 框架，是构建 Web 应用程序（包括博客）的绝佳选择。在本指南中，我们将介绍使用 Flask 创建简单博客的过程。我们将介绍设置环境、创建路由、处理用户输入和显示帖子等。让我们开始吧！

步骤 1：设置环境

首先，让我们设置一个虚拟环境并安装 Flask。

# Create a virtual environment
python -m venv venv


# Activate the virtual environment
# On Windows
venv\Scripts\activate
# On macOS/Linux
source venv/bin/activate


# Install Flask
pip install Flask

步骤 2：创建 Flask 应用程序

接下来，我们将创建一个基本的 Flask 应用程序。

# app.py


from flask import Flask, render_template, request, redirect, url_for


app = Flask(__name__)


# In-memory storage for blog posts
posts = []


@app.route('/')
def index():
    return render_template('index.html', posts=posts)


@app.route('/new', methods=['GET', 'POST'])
def new_post():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        posts.append({'title': title, 'content': content})
        return redirect(url_for('index'))
    return render_template('new_post.html')


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

步骤 3：创建模板

在与“app.py”相同的目录中创建一个名为“templates”的目录。在此目录中，创建两个 HTML 文件：“index.html”和“new_post.html”。

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
</head>
<body>
    <h1>My Blog</h1>
    <a href="{{ url_for('new_post') }}">New Post</a>
    <ul>
        {% for post in posts %}
            <li>
                <h2>{{ post.title }}</h2>
                <p>{{ post.content }}</p>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

`new_post.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Post</title>
</head>
<body>
    <h1>New Post</h1>
    <form action="{{ url_for('new_post') }}" method="POST">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title" required>
        <br>
        <label for="content">Content:</label>
        <textarea id="content" name="content" required></textarea>
        <br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

步骤 4：运行应用程序

通过在终端中执行以下命令来运行 Flask 应用程序：

python app.py

打开 Web 浏览器并导航至`http://127.0.0.1:5000/`。您应该会看到博客主页，其中包含一个用于创建新帖子的链接。单击该链接添加新帖子，然后返回主页以查看显示的帖子。

步骤 5：添加更多功能

为帖子添加时间戳

让我们为博客帖子添加时间戳，以显示每篇帖子的创建时间。

首先，导入`datetime`模块并修改`app.py`中的`new_post`路由：

from datetime import datetime


@app.route('/new', methods=['GET', 'POST'])
def new_post():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
        posts.append({'title': title, 'content': content, 'timestamp': timestamp})
        return redirect(url_for('index'))
    return render_template('new_post.html')

然后，更新`index.html`以显示时间戳：

<ul>
    {% for post in posts %}
        <li>
            <h2>{{ post.title }}</h2>
            <p>{{ post.content }}</p>
            <small>Posted on {{ post.timestamp }}</small>
        </li>
    {% endfor %}
</ul>

添加 CSS 样式

让我们添加一些基本的 CSS 样式，让我们的博客看起来更漂亮。

在与 `app.py` 相同的目录中创建一个名为 `static` 的目录。在此目录中，创建一个名为 `styles.css` 的文件并添加以下样式：

/* static/styles.css */


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}


h1 {
    text-align: center;
}


form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}


input, textarea {
    width: 300px;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


ul {
    list-style-type: none;
    padding: 0;
}


li {
    background-color: white;
    margin: 10px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


small {
    display: block;
    margin-top: 10px;
    color: #777;
}

在模板中链接 CSS 文件：

`index.html`

<head>
    ...
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>

`new_post.html`

<head>
    ...
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>

步骤 6：添加用户身份验证

让我们为博客添加一个简单的用户身份验证系统。我们将使用 Flask-Login 来管理用户会话。

首先，安装 Flask-Login：

pip install Flask-Login

接下来，更新你的 `app.py`：

from flask import Flask, render_template, request, redirect, url_for, flash
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user


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


login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'


class User(UserMixin):
    def __init__(self, id, username, password):
        self.id = id
        self.username = username
        self.password = password


# Dummy user database
users = {'admin': User(id=1, username='admin', password='password')}


@login_manager.user_loader
def load_user(user_id):
    return users.get('admin')


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        user = users.get(username)
        if user and user.password == password:
            login_user(user)
            return redirect(url_for('index'))
        else:
            flash('Invalid credentials')
    return render_template('login.html')


@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('index'))


@app.route('/')
def index():
    return render_template('index.html', posts=posts)


@app.route('/new', methods=['GET', 'POST'])
@login_required
def new_post():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
        posts.append({'title': title, 'content': content, 'timestamp': timestamp})
        return redirect(url_for('index'))
    return render_template('new_post.html')


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

为登录页面创建一个新模板 `login.html`:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Login</h1>
    <form action="{{ url_for('login') }}" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Login</button>
    </form>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
</body>
</html>

步骤 7：使用数据库

使用 SQLite 数据库替换内存列表以保存博客文章。

首先，安装 Flask-SQLAlchemy：

pip install Flask-SQLAlchemy

更新你的 `app.py`：

from flask_sqlalchemy import SQLAlchemy


app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
db = SQLAlchemy(app)


class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)
    timestamp = db.Column(db.String(20), nullable=False)


# Initialize the database
with app.app_context():
    db.create_all()


@app.route('/')
def index():
    posts = Post.query.order_by(Post.id.desc()).all()
    return render_template('index.html', posts=posts)


@app.route('/new', methods=['GET', 'POST'])
@login_required
def new_post():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
        new_post = Post(title=title, content=content, timestamp=timestamp)
        db.session.add(new_post)
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('new_post.html')

步骤 8：编辑和删除帖子

添加编辑和删除帖子的功能。

更新您的 `app.py`:

@app.route('/edit/<int:id>', methods=['GET', 'POST'])
@login_required
def edit_post(id):
    post = Post.query.get_or_404(id)
    if request.method == 'POST':
        post.title = request.form['title']
        post.content = request.form['content']
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('edit_post.html', post=post)


@app.route('/delete/<int:id>', methods=['POST'])
@login_required
def delete_post(id):
    post = Post.query.get_or_404(id)
    db.session.delete(post)
    db.session.commit()
    return redirect(url_for('index'))

创建用于编辑帖子的模板：

`edit_post.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Post</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Edit Post</h1>
    <form action="{{ url_for('edit_post', id=post.id) }}" method="POST">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title" value="{{ post.title }}" required>
        <br>
        <label for="content">Content:</label>
        <textarea id="content" name="content" required>{{ post.content }}</textarea>
        <br>
        <button type="submit">Save</button>
    </form>
</body>
</html>

更新 `index.html` 以包含编辑和删除链接：

<ul>
    {% for post in posts %}
        <li>
            <h2>{{ post.title }}</h2>
            <p>{{ post.content }}</p>
            <small>Posted on {{ post.timestamp }}</small>
            <br>
            <a href="{{ url_for('edit_post', id=post.id) }}">Edit</a>
            <form action="{{ url_for('delete_post', id=post.id) }}" method="POST" style="display:inline;">
                <button type="submit">Delete</button>
            </form>
        </li>
    {% endfor %}
</ul>

您现在已经使用 Flask 创建了一个简易的博客系统！我们已经介绍了如何设置环境、创建路由、处理用户输入、显示帖子、添加时间戳、应用基本 CSS 样式还包括了用户身份验证、使用数据库的持久存储以及编辑和删除帖子的功能。这些功能增强了博客的可用性和功能性，使其成为一个更完整、更强大的应用程序。如果你阅读过小编的其他文章，以上内容只是Flask框架的冰山一角，感兴趣的话，请结合着之前的介绍（部署、高阶用法、异步、定时任务以及安全和认证等），继续随意尝试并扩展此项目。祝您编码愉快！

sqlite replace

上一篇：SQLite插入或只更新部分字段 sqlite3可视化工具
下一篇：Python 读写SQLite数据库 python+读写sqlite数据库的方法

使用 Flask 构建简易的博客系统:分步指南

相关推荐

取消回复欢迎你发表评论:

一个小时多点，完成scrapy爬取官方网站新房的数据，50块到手

C语言char同时读取多个输入字符并打印

爬虫项目:实现京东全网爬虫京东爬虫跳过登录页

C语言总结_格式化打印函数、字符串、运算符

信息系统安全:软件系统安全

嵌入式开发C语言编程的那些编程思路与技巧

volatile很难?由浅入深怼到CPU汇编，彻底搞清楚它的底层原理

volatile详解

民间石子棋玩法，摆方，简单好学，你会吗?

Python玩转Excel，使用Python读取Excel文件如此简单!

使用 Flask 构建简易的博客系统:分步指南

相关推荐

取消回复欢迎 你 发表评论:

一个小时多点，完成scrapy爬取官方网站新房的数据，50块到手

C语言char同时读取多个输入字符并打印

爬虫项目:实现京东全网爬虫 京东爬虫跳过登录页

C语言总结_格式化打印函数、字符串、运算符

信息系统安全:软件系统安全

嵌入式开发C语言编程的那些编程思路与技巧

volatile很难?由浅入深怼到CPU汇编，彻底搞清楚它的底层原理

volatile详解

民间石子棋玩法，摆方，简单好学，你会吗?

Python玩转Excel，使用Python读取Excel文件如此简单!

取消回复欢迎你发表评论:

爬虫项目:实现京东全网爬虫京东爬虫跳过登录页