新手入门web，python，flask示例（做一个简单的网页界面）

一位人工智能爱好者

已于 2024-09-14 09:06:00 修改

阅读量365

点赞数 10

文章标签： flask python

于 2024-09-14 08:56:36 首次发布

本文链接：https://blog.csdn.net/vh62505/article/details/142245635

版权

项目结构

flask_site/
│
├── app.py
├── static/
│   ├── images/
│   │   └── sample.jpg
│   └── style.css
└── templates/
    ├── home.html
    └── about.html

1. 创建 Flask 应用程序（`app.py`)

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

2. 创建静态文件

2.1. 创建静态文件夹 static/

static/style.css（样式文件）：

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

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2 {
    margin: 0;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

static/images/sample.jpg（示例图片）：你可以使用任何图片并将其命名为。如果没有具体的图片，你可以使用 placeholder.com 创建一个占位图。sample.jpg
templates/home.html：
3. 创建 HTML 模板

3.1. 创建模板文件夹 templates/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <div class="container">
            <h1>Welcome to the Home Page!</h1>
            <nav>
                <a href="/">Home</a> | <a href="/about">About</a>
            </nav>
        </div>
    </header>
    <div class="container">
        <h2>Home Page Content</h2>
        <img src="{{ url_for('static', filename='images/sample.jpg') }}" alt="Sample Image">
        <p>This is the home page of your Flask app with an image and some styling.</p>
    </div>
</body>
</html>

templates/about.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Page</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <div class="container">
            <h1>About Us</h1>
            <nav>
                <a href="/">Home</a> | <a href="/about">About</a>
            </nav>
        </div>
    </header>
    <div class="container">
        <h2>About Page Content</h2>
        <p>This is the about page of your Flask app.</p>
    </div>
</body>
</html>