从零开始搭建 flask 博客(1)实验

🧱 一、项目结构

最终项目目录如下:

复制代码
flask_blog/
├── app/
│   ├── __init__.py
│   ├── routes.py
│   └── templates/
│       ├── base.html
│       └── index.html
└── myblog.py

⚙️ 二、环境配置

1. 创建虚拟环境

复制代码
# 创建并激活虚拟环境
python -m venv venv
source venv/bin/activate       # macOS / Linux
venv\Scripts\activate          # Windows

2. 安装 Flask

pip install flask


🧩 三、项目代码

app/init.py

复制代码
from flask import Flask

app = Flask(__name__)

# 注意:这里导入 routes,是为了注册路由
from app import routes

app/routes.py

复制代码
from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = {'username': 'duke'}
    posts = [
        {'author': {'username': '刘'}, 'body': '这是模板模块中的循环例子~1'},
        {'author': {'username': '忠强'}, 'body': '这是模板模块中的循环例子~2'}
    ]
    return render_template('index.html', title='我的博客', user=user, posts=posts)

app/templates/base.html

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% if title %}
        <title>{{ title }} - 博客</title>
    {% else %}
        <title>欢迎来到博客!</title>
    {% endif %}
</head>
<body>
    <div>
        <h1>我的 Flask 博客</h1>
        <hr>
        {% block content %}{% endblock %}
    </div>
</body>
</html>

app/templates/index.html

复制代码
{% extends "base.html" %}
{% block content %}
    <h2>你好呀, {{ user.username }}!</h2>
    {% for post in posts %}
        <div>
            <p><b>{{ post.author.username }}</b> 说: {{ post.body }}</p>
        </div>
    {% endfor %}
{% endblock %}

myblog.py

复制代码
from app import app

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

🚀 四、运行项目

1️⃣ 在项目根目录下设置环境变量

复制代码
export FLASK_APP=myblog.py       # macOS / Linux
set FLASK_APP=myblog.py          # Windows

2️⃣ 启动 Flask 服务器

flask run

3️⃣ 打开浏览器访问:

http://127.0.0.1:5000/

相关推荐
我想吃烤肉肉1 分钟前
logger比print优秀之处
python
钱多多_qdd1 分钟前
springboot注解(二)
java·spring boot·后端
神奇小汤圆2 分钟前
MyBatis批量插入从5分钟优化到3秒,我做了这3件事
后端
上去我就QWER4 分钟前
什么是反向代理?
后端·nginx
Cosmoshhhyyy6 分钟前
《Effective Java》解读第32条:谨慎并用泛型和可变参数
java·python
Cherry的跨界思维13 分钟前
【AI测试全栈:Vue核心】19、Vue3+ECharts实战:构建AI测试可视化仪表盘全攻略
前端·人工智能·python·echarts·vue3·ai全栈·ai测试全栈
Charlo15 分钟前
手把手配置 Ralph -- 火爆 X 的全自动 AI 编程工具
前端·后端·github
海棠AI实验室29 分钟前
第十七章 调试与排错:读懂 Traceback 的方法论
python·pandas·调试
CRUD酱32 分钟前
后端使用POI解析.xlsx文件(附源码)
java·后端
2501_9418787437 分钟前
在奥克兰云原生实践中构建动态配置中心以支撑系统稳定演进的工程经验总结
开发语言·python