15分钟学 Python 第34天：小项目-个人博客网站

Day 34: 小项目-个人博客网站

1. 引言

随着互联网的普及，个人博客已成为分享知识、体验和见解的一个重要平台。在这一节中，我们将使用Python的Flask框架构建一个简单的个人博客网站。我们将通过实际的项目来学习如何搭建Web应用、处理用户输入以及管理数据。

2. 项目概述

我们的个人博客网站将具备以下基本功能：

用户能够查看所有博文
用户能够查看某一博文的详细内容
用户能够发布新的博文
用户能够删除自己的博文
后端使用Flask框架，数据库使用SQLite

2.1 技术栈

技术	描述
Python	编程语言
Flask	微框架，用于构建Web应用
SQLite	轻量级关系型数据库
HTML/CSS	前端页面结构和样式

3. 环境准备

3.1 安装必要的库

首先，确保您已经安装了Python和pip。然后在命令行中运行以下命令来安装Flask：

bash 复制代码

pip install Flask Flask-SQLAlchemy

3.2 创建项目结构

创建项目结构，如下所示：

personal_blog/
├── app.py
├── templates/
│   ├── base.html
│   ├── index.html
│   └── post.html
└── static/
    └── style.css

4. 基础代码示例

4.1 app.py

在app.py中，我们将配置Flask应用，并建立简单的路由。

python 复制代码

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

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
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)

with app.app_context():
    db.create_all()

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

@app.route('/post/<int:post_id>')
def post(post_id):
    post = Post.query.get_or_404(post_id)
    return render_template('post.html', post=post)

@app.route('/new', methods=['GET', 'POST'])
def new_post():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        new_post = Post(title=title, content=content)
        db.session.add(new_post)
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('new_post.html')

@app.route('/delete/<int:post_id>')
def delete_post(post_id):
    post = Post.query.get_or_404(post_id)
    db.session.delete(post)
    db.session.commit()
    return redirect(url_for('index'))

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

4.2 模板文件

4.2.1 base.html

这是基础模板，所有页面都将基于此模板。

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>个人博客</h1>
            <nav>
                <a href="{{ url_for('index') }}">首页</a>
                <a href="{{ url_for('new_post') }}">发表新博文</a>
            </nav>
        </header>
        <main>
            {% block content %}{% endblock %}
        </main>
    </div>
</body>
</html>

4.2.2 index.html

这是博客首页，显示所有博文的列表。

html 复制代码

{% extends 'base.html' %}

{% block content %}
    <h2>博文列表</h2>
    <ul>
        {% for post in posts %}
            <li>
                <a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a>
                <a href="{{ url_for('delete_post', post_id=post.id) }}">删除</a>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

4.2.3 post.html

这是单个博文的详细页面。

html 复制代码

{% extends 'base.html' %}

{% block content %}
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
    <a href="{{ url_for('index') }}">返回首页</a>
{% endblock %}

4.2.4 new_post.html

这是发表新博文的页面。

html 复制代码

{% extends 'base.html' %}

{% block content %}
    <h2>发表新博文</h2>
    <form method="POST">
        <input type="text" name="title" placeholder="标题" required>
        <textarea name="content" placeholder="内容" required></textarea>
        <button type="submit">提交</button>
    </form>
{% endblock %}

4.3 样式文件

style.css

为博客添加基本样式。

css 复制代码

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

header {
    margin-bottom: 20px;
}

nav a {
    margin-right: 15px;
}

5. 代码运行流程图

以下是应用的运行流程图，展示了用户如何与系统进行交互。

plaintext 复制代码

开始
 ├── 用户访问首页 /
 │   ├── 查询所有博文
 │   └── 显示博文列表
 ├── 用户点击某博文
 │   ├── 根据ID查询博文
 │   └── 显示博文详细信息
 ├── 用户点击发表新博文
 │   ├── 显示发表新博文表单
 │   ├── 用户提交表单
 │   ├── 存储新博文到数据库
 │   └── 重定向到首页
 └── 用户点击删除博文
     ├── 根据ID查询博文
     ├── 删除博文
     └── 重定向到首页
结束

6. 运行项目

要运行个人博客网站，您只需在终端中执行以下命令：

bash 复制代码

python app.py

然后在浏览器中访问 http://127.0.0.1:5000/，您将看到博客首页。

6.1 数据库初始化

第一次运行时，app.py会自动创建一个SQLite数据库blog.db，您可以在项目目录下找到此文件。通过执行上述代码，您可以开始在该数据库中添加博文。

7. 项目功能扩展

在掌握了基本功能后，您可以考虑以下扩展功能：

用户身份验证：允许用户注册和登录，以便他们可以管理自己的博文。
评论功能：允许用户在博文下评论，增加互动性。
标签系统：为博文添加标签，便于分类和搜索。
富文本编辑器 ：使用富文本编辑器提升博文发布体验，如 TinyMCE或CKEditor。
分页：在首页实现博文的分页，提高用户浏览体验。

8. 小结

通过构建个人博客网站，您已经掌握了Flask的基本使用和Web开发的核心要素。项目不仅涉及后端逻辑的实现，还包括前端展示和数据管理。希望这个实践项目能激励您继续学习和探索更多Web开发的知识。

9. 练习题

修改项目，添加用户身份验证，使得只有注册用户才能发布和删除博文。
实现博文的编辑功能，在博文详细页面中添加"编辑"按钮。
使用Flask-WTF增加表单验证，确保用户输入合法。
实现搜索功能，允许用户根据标题搜索博文。

怎么样今天的内容还满意吗？再次感谢观众老爷的观看。
最后，祝您早日实现财务自由，还请给个赞，谢谢！

15分钟学 Python 第34天 ：小项目-个人博客网站

Day 34: 小项目-个人博客网站

1. 引言

2. 项目概述

2.1 技术栈

3. 环境准备

3.1 安装必要的库

3.2 创建项目结构

4. 基础代码示例

4.1 app.py

4.2 模板文件

4.2.1 base.html

4.2.2 index.html

4.2.3 post.html

4.2.4 new_post.html

4.3 样式文件

style.css

5. 代码运行流程图

6. 运行项目

6.1 数据库初始化

7. 项目功能扩展

8. 小结

9. 练习题

15分钟学 Python 第34天：小项目-个人博客网站