Flask简单页面

信鸟

已于 2024-08-12 09:44:42 修改

阅读量683

点赞数 23

文章标签： flask python 后端

于 2024-08-09 18:44:39 首次发布

本文链接：https://blog.csdn.net/Richard_Mei/article/details/141069171

版权

本文内容是Deepseek coder v2生成的，完全可以直接运行。

from flask import Flask, render_template_string
import random
app = Flask(__name__)
# 定义一些随机美食和营养建议
foods = [
    {"name": "沙拉", "image": "static/images/salad.jpg", "tip": "多吃蔬菜和水果，获取丰富的维生素和矿物质。"},
    {"name": "烤鸡", "image": "static/images/chicken.jpg", "tip": "适量摄入蛋白质，帮助肌肉生长和修复。"},
    {"name": "三文鱼", "image": "static/images/salmon.jpg", "tip": "适量摄入健康脂肪，如橄榄油和坚果。"},
    {"name": "全麦面包", "image": "static/images/bread.jpg", "tip": "定期吃全谷物，提供持久的能量。"},
    {"name": "水果拼盘", "image": "static/images/fruit.jpg", "tip": "保持饮食多样化，确保营养均衡。"}
]

# 定义一些随机颜色
colors = [
    "#FF5733", "#33FF57", "#3357FF", "#F333FF", "#FF33A1", "#33FFF5", "#FFA533", "#33A5FF"
]

# 定义主页路由
@app.route('/')
def home():
    return render_template_string('''
        <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>主界面</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
            <style>
              body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-color: #f0f0f0;
              }
              .main-box {
                background-color: #fff;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                text-align: center;
                max-width: 500px;
              }
              .btn {
                margin: 10px;
              }
            </style>
          </head>
          <body>
            <div class="main-box">
              <h1>主界面</h1>
              <a href="/food" class="btn btn-primary">美食推荐</a>
              <a href="/color" class="btn btn-success">颜色生成器</a>
            </div>
          </body>
        </html>
    ''')

# 定义美食推荐界面路由
@app.route('/food')
def food():
    food = random.choice(foods)
    return render_template_string('''
        <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>美食推荐</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
            <style>
              body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-color: #f0f0f0;
                transition: background-color 1s;
              }
              .food-box {
                background-color: #fff;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                text-align: center;
                max-width: 500px;
              }
              .food-image {
                width: 100%;
                max-height: 300px;
                object-fit: cover;
                border-radius: 10px;
                margin-bottom: 20px;
              }
              .food-name {
                font-size: 1.5em;
                margin-bottom: 10px;
              }
              .food-tip {
                font-size: 1.2em;
                margin-bottom: 20px;
              }
              .refresh-btn {
                padding: 10px 20px;
                font-size: 1em;
                cursor: pointer;
                background-color: #007bff;
                color: #fff;
                border: none;
                border-radius: 5px;
                transition: background-color 0.3s;
              }
              .refresh-btn:hover {
                background-color: #0056b3;
              }
            </style>
          </head>
          <body>
            <div class="food-box">
              <img class="food-image" id="food-image" src="{{ food['image'] }}" alt="美食图片">
              <div class="food-name" id="food-name">{{ food['name'] }}</div>
              <div class="food-tip" id="food-tip">{{ food['tip'] }}</div>
              <button class="refresh-btn" id="refresh-btn">刷新推荐</button>
              <a href="/" class="btn btn-secondary">返回主界面</a>
            </div>
            <script>
              function getRandomFood() {
                window.location.reload();
              }
              document.getElementById('refresh-btn').addEventListener('click', getRandomFood);
            </script>
          </body>
        </html>
    ''', food=food)

# 定义颜色生成器界面路由
@app.route('/color')
def color():
    color = random.choice(colors)
    return render_template_string('''
        <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>颜色生成器</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
            <style>
              body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-color: {{ color }};
                transition: background-color 1s;
              }
              .color-box {
                background-color: #fff;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                text-align: center;
                max-width: 500px;
              }
              .color-code {
                font-size: 1.5em;
                margin-bottom: 20px;
              }
              .refresh-btn {
                padding: 10px 20px;
                font-size: 1em;
                cursor: pointer;
                background-color: #007bff;
                color: #fff;
                border: none;
                border-radius: 5px;
                transition: background-color 0.3s;
              }
              .refresh-btn:hover {
                background-color: #0056b3;
              }
            </style>
          </head>
          <body>
            <div class="color-box">
              <div class="color-code" id="color-code">{{ color }}</div>
              <button class="refresh-btn" id="refresh-btn">刷新颜色</button>
              <a href="/" class="btn btn-secondary">返回主界面</a>
            </div>
            <script>
              function getRandomColor() {
                window.location.reload();
              }
              document.getElementById('refresh-btn').addEventListener('click', getRandomColor);
            </script>
          </body>
        </html>
    ''', color=color)

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

信鸟

关注

23
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Flask简单页面

foods = [{“name”: “沙拉”, “image”: “static/images/salad.jpg”, “tip”: “多吃蔬菜和水果，获取丰富的维生素和矿物质。”},{“name”: “烤鸡”, “image”: “static/images/chicken.jpg”, “tip”: “适量摄入蛋白质，帮助肌肉生长和修复。”},
复制链接

扫一扫