如何从0构建一个flask项目,直接上实操!!!

项目结构

首先,创建一个项目目录,结构如下:

复制代码

flask_app/

├── app.py # Flask 应用代码

├── static/ # 存放静态文件(如CSS、JS、图片等)

│ └── style.css # 示例CSS文件

└── templates/ # 存放HTML模板

└── index.html # HTML模板文件

1. 创建 app.py

flask_app 目录下创建 app.py 文件,内容如下:

复制代码
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/submit', methods=['POST'])
def submit():
    name = request.form.get('name')
    return render_template('index.html', name=name)

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

2. 创建 HTML 模板 index.html

templates 目录下创建 index.html 文件,内容如下:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask应用</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <form action="/submit" method="post">
        <label for="name">请输入你的名字:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">提交</button>
    </form>

    {% if name %}
        <h2>你好啊, {{ name }}!</h2>
    {% endif %}
</body>
</html>

3. 创建 CSS 文件 style.css

static 目录下创建 style.css 文件,内容如下:

复制代码
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

form {
    margin: 20px 0;
}

input[type="text"] {
    padding: 10px;
    margin-right: 10px;
}

button {
    padding: 10px 15px;
}

4. 运行应用

在命令行中,导航到 flask_app 目录并运行以下命令:

python app.py

5. 访问应用

打开浏览器,输入以下地址访问你的 Flask 应用:http://127.0.0.1:3000/

总结

这里展示了一个简单的 Flask 应用,用户可以在表单中输入名字并提交,提交后页面会显示用户的名字。通过这个实例 ,相信你已经对flask有了一点点理解了,继续扩展的知识线吧!

相关推荐
高山上有一只小老虎10 分钟前
SpringBoot项目单元测试
spring boot·后端·单元测试
tod11326 分钟前
Redis 数据类型与 C++ 客户端实践指南(redis-plus-plus)
前端·c++·redis·bootstrap·html
Sylvia33.26 分钟前
火星数据:棒球数据API
java·前端·人工智能
weixin199701080161 小时前
1688商品详情页前端性能优化实战
前端·性能优化
❀͜͡傀儡师1 小时前
Spring Boot Pf4j模块化能力设计思考
运维·spring boot·后端·pf4j
DEMO派1 小时前
前端常用XSS攻击演示与防御方案解析
前端·xss
APIshop1 小时前
阿里巴巴中国站按图搜索1688商品(拍立淘)API 返回值说明
java·python·图搜索算法
哈库纳玛塔塔1 小时前
dbVisitor 利用 queryForPairs 让键值查询一步到位
java·数据库·python
sa100271 小时前
京东评论接口调用、签名生成与异常处理
开发语言·数据库·python
问今域中1 小时前
Vue的computed用法解析
前端·javascript·vue.js