博客管理系统

实战需求

项目目录结果

flask_blog/
│
├── app.py                     # 主程序入口
├── static/                    # 静态文件
│   └── css/
│       └── style.css          # 自定义 CSS 文件
└── templates/                 # 模板文件
    ├── base.html              # 公共模板
    ├── index.html             # 首页模板
    ├── blogs.html             # 博客列表模板
    └── blog_detail.html       # 博客详情模板

实现代码

1. 主程序入口：app.py

from flask import Flask, abort, render_template, jsonify
from flask_cors import CORS
from flask_bootstrap import Bootstrap
from flask import Blueprint

# 博客信息数据
BLOGS = [
    {"id": 1, "title": "flask环境安装与配置", "content": "Flask 是一个轻量级的 Web 开发框架。它是依赖 Jinja2 和 Werkzeug WSGI 服务的一个微型框架。"},
    {"id": 2, "title": "接口路由技术", "content": "路由是将 URL 地址与应用程序中的函数相映射的过程。当用户在浏览器中输入特定的 URL 地址时，Flask 会调用与该地址相匹配的函数并返回相应的结果。"},
    {"id": 3, "title": "处理响应信息", "content": "响应信息可以响应很多类型的信息类型。常见的比如文本类型，还有非常通用的 JSON 数据。"},
]

app = Flask(__name__)
# 启用跨域支持
CORS(app)
# 启用 Bootstrap 插件
Bootstrap(app)

# 定义蓝图
blog_blueprint = Blueprint(
    "blogs", __name__,
    template_folder="templates",
    static_folder="static"
)


# 首页路由
@app.route("/")
def index():
    # 返沪首页 html
    return render_template("index.html")


# 博客列表路由
@blog_blueprint.route("/")
def blog_list():
    # 返回博客列表页面 html 与博客数据
    return render_template("blogs.html", blogs=BLOGS)


# 博客详情路由
@blog_blueprint.route("/<int:id>")
def blog_detail(id):
    blog = None
    # 循环博客列表
    for b in BLOGS:
        # 如果路由中的 id 是某个博客对象的 id
        if id == b["id"]:
            # 查询到需要的博客
            blog = b
    # 如果路由中的 id 对应没有找到对应的博客
    if blog is None:
        # 返回错误提示信息
        return jsonify({
            "errcode": -1,
            "errmsg": "Blog not found",
        }), 404
    return render_template("blog_detail.html", blog=blog)


if __name__ == "__main__":
    # 注册蓝图
    app.register_blueprint(blog_blueprint, url_prefix="/blogs")
    # 启动应用
    app.run(host="0.0.0.0", port=5010, debug=True)

2. 自定义 CSS 文件：static/css/style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
header {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
}
nav a {
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
}
main {
    padding: 20px;
}

3. 公共模板：templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header>
        <h1>博客管理系统</h1>
        <nav>
            <a href="{{ url_for('index') }}">首页</a>
            <a href="{{ url_for('blogs.blog_list') }}">博客</a>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>

4. 首页模板：templates/index.html

{% extends "base.html" %}

{% block content %}
<h2>欢迎来到博客管理系统</h2>
<p>访问博客请从<a href="{{ url_for('blogs.blog_list') }}">这里</a>开始。</p>
{% endblock %}

5. 博客列表模板：templates/blogs.html

{% extends "base.html" %}

{% block content %}
<h2>博客列表</h2>
<ul>
    {% for blog in blogs %}
    <li><a href="{{ url_for('blogs.blog_detail', id=blog.id) }}">{{ blog.title }}</a></li>
    {% endfor %}
</ul>
{% endblock %}

6. 博客详情模板：templates/blog_detail.html

{% extends "base.html" %}

{% block content %}
<h2>{{ blog.title }}</h2>
<p>{{ blog.content }}</p>
<a href="{{ url_for('blogs.blog_list') }}">返回博客列表</a>
{% endblock %}

总结

蓝图
模版技术
静态文件