扩展一下项目,添加一个 “关于我们”页面 和一个简单的 表单提交页面(比如留言功能)。
一、更新项目结构:
myapp/
├── app.py
├── templates/
│ ├── index.html
│ ├── about.html
│ └── contact.html
├── static/
│ └── style.css
二、更新或新增文件内容如下:
1. app.py
— 添加路由
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/about')
def about():
return render_template('about.html')
@app.route('/contact', methods=['GET', 'POST'])
def contact():
if request.method == 'POST':
name = request.form.get('name')
message = request.form.get('message')
return f"<h2>感谢你的留言,{name}!</h2><p>内容:{message}</p>"
return render_template('contact.html')
if __name__ == '__main__':
app.run(debug=True)
2. templates/index.html
— 首页加上链接导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask 示例首页</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>欢迎来到 Flask 网站!</h1>
<nav>
<a href="/">首页</a> |
<a href="/about">关于我们</a> |
<a href="/contact">联系</a>
</nav>
<p>这是主页内容。</p>
</body>
</html>
3. templates/about.html
— 关于我们页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于我们</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>关于我们</h1>
<nav>
<a href="/">首页</a> |
<a href="/about">关于我们</a> |
<a href="/contact">联系</a>
</nav>
<p>我们是一个用 Flask 构建的网站示例。</p>
</body>
</html>
4. templates/contact.html
— 联系我们 / 表单页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联系</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>联系表单</h1>
<nav>
<a href="/">首页</a> |
<a href="/about">关于我们</a> |
<a href="/contact">联系</a>
</nav>
<form method="POST">
<label for="name">你的名字:</label><br>
<input type="text" name="name" required><br><br>
<label for="message">留言内容:</label><br>
<textarea name="message" rows="5" cols="40" required></textarea><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
现在你访问:
/
是首页/about
是“关于我们”/contact
是留言表单(提交后显示留言内容)