在 Flask 项目中访问其他页面

🚀 在 Flask 项目中访问 introduce.html

目前你只能访问 http://localhost:8080/index.html,但你希望可以访问 introduce.html


✅ 1. 确保 introduce.html 存放在 templates/ 目录

Flask 默认会在 templates/ 目录下寻找 HTML 文件 。请确保 introduce.html 在 Flask 项目的 templates/ 目录下:

复制代码
your_flask_project/
│── app.py
│── templates/
│   │── index.html
│   │── introduce.html  <-- 确保这个文件存在
│── static/
│   │── css/
│   │── js/
│   │── imgs/

✅ 2. 在 app.py 里添加路由

app.py 里定义访问 introduce.html 的路由:

python 复制代码
from flask import Flask, render_template

app = Flask(__name__)

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

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

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

📌 这样你可以通过 http://localhost:8080/introduce 访问 introduce.html


✅ 3. 让 index.html 里添加 introduce.html 的链接

如果你想在首页 index.html 里添加跳转到 introduce.html 的按钮,可以在 index.html 里这样写:

html 复制代码
<a href="{{ url_for('introduce') }}" class="btn">了解更多</a>

📌 这样点击按钮就能跳转到 introduce.html


✅ 4. 运行 Flask 并测试

在终端运行:

bash 复制代码
python app.py

然后访问:

  • 首页http://localhost:8080/
  • 功能介绍页面http://localhost:8080/introduce

🎯 结论

确保 introduce.htmltemplates/ 目录下

app.py 里添加 /introduce 路由

index.html 里用 <a href="{``{ url_for('introduce') }}"> 进行跳转

成功访问 http://localhost:8080/introduce

相关推荐
喵手1 小时前
Python爬虫实战:旅游数据采集实战 - 携程&去哪儿酒店机票价格监控完整方案(附CSV导出 + SQLite持久化存储)!
爬虫·python·爬虫实战·零基础python爬虫教学·采集结果csv导出·旅游数据采集·携程/去哪儿酒店机票价格监控
2501_944934731 小时前
高职大数据技术专业,CDA和Python认证优先考哪个?
大数据·开发语言·python
helloworldandy1 小时前
使用Pandas进行数据分析:从数据清洗到可视化
jvm·数据库·python
肖永威3 小时前
macOS环境安装/卸载python实践笔记
笔记·python·macos
TechWJ3 小时前
PyPTO编程范式深度解读:让NPU开发像写Python一样简单
开发语言·python·cann·pypto
枷锁—sha3 小时前
【SRC】SQL注入WAF 绕过应对策略(二)
网络·数据库·python·sql·安全·网络安全
Coder_Boy_3 小时前
基于SpringAI的在线考试系统-考试系统开发流程案例
java·数据库·人工智能·spring boot·后端
abluckyboy3 小时前
Java 实现求 n 的 n^n 次方的最后一位数字
java·python·算法
喵手4 小时前
Python爬虫实战:构建各地统计局数据发布板块的自动化索引爬虫(附CSV导出 + SQLite持久化存储)!
爬虫·python·爬虫实战·零基础python爬虫教学·采集数据csv导出·采集各地统计局数据发布数据·统计局数据采集
掘金者阿豪4 小时前
关系数据库迁移的“暗礁”:金仓数据库如何规避数据完整性与一致性风险
后端