让前端小白也能打造Python Web菜谱系统的首页，附源码！

2023-10-05 11:08:12

在滚雪球第三轮的核心学习中，Python Web知识点必不可少，这自然就涉及到前端技术栈。如果你是前端小白，不要慌，本文将以Python Web菜谱系统的首页为例，为你详细讲解如何制作出令人眼前一亮的Web页面，即使你没有任何前端技术基础也能轻松上手。

1. 菜谱系统首页的初始化

from flask import Flask, render_template

app = Flask(__name__)

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

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

解析：

首先，我们导入Flask框架和render_template函数。
创建一个Flask应用实例。
定义一个路由，当用户访问根URL('/')时，它将渲染index.html模板。
最后，运行应用。

2. 制作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">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Python Web菜谱系统</h1>
  <p>欢迎使用Python Web菜谱系统！这个系统将带你领略烹饪的乐趣，让你轻松成为厨房达人。</p>
  <a href="/recipes">查看菜谱</a>
</body>
</html>

解析：

创建一个基本的HTML结构。
添加一个CSS样式文件，我们稍后会创建。
定义一个标题和一个简短的介绍。
添加一个链接到菜谱页面的按钮。

3. 创建style.css样式文件

在static文件夹中创建一个名为style.css的文件：

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #000000;
  font-size: 24px;
}

p {
  color: #666666;
  font-size: 16px;
}

a {
  color: #0000FF;
  font-size: 16px;
}

解析：

定义了一些基本的CSS样式，包括字体、颜色和字体大小。

4. 启动应用并访问首页

在终端中运行以下命令：

python app.py

然后，在浏览器中访问http://localhost:5000/即可看到Python Web菜谱系统的首页。

附源码

以下是我实现上述步骤的完整源码：

app.py

from flask import Flask, render_template

app = Flask(__name__)

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

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Python Web菜谱系统</h1>
  <p>欢迎使用Python Web菜谱系统！这个系统将带你领略烹饪的乐趣，让你轻松成为厨房达人。</p>
  <a href="/recipes">查看菜谱</a>
</body>
</html>

style.css

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #000000;
  font-size: 24px;
}

p {
  color: #666666;
  font-size: 16px;
}

a {
  color: #0000FF;
  font-size: 16px;
}