在 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

相关推荐
2601_962293243 小时前
Python自动化统计团队工作量并生成可视化仪表盘的脚本方案【指导】
python·数据分析·自动化·可视化·仪表盘
摇滚侠4 小时前
《SpringBoot 3:入门与应用实战》第 12 章 JDBC 与事务 使用 JdbcTemplate 阅读笔记 32
spring boot·笔记·后端
2601_962293795 小时前
OCRmyPDF批处理脚本:使用Python自动化复杂OCR任务
python·自动化·批处理脚本·ocrmypdf·ocr任务
步行cgn5 小时前
@Configuration 详解:Spring 配置类的核心注解
java·后端·spring
Java后端的Ai之路6 小时前
20、Python - 备忘录模式
开发语言·人工智能·python·外观模式·备忘录模式
2601_962077717 小时前
基于Python与NLP的新闻事件信息抽取实战:从NER到时空标准化
python·nlp·transformers·spacy·新闻事件抽取
桦说编程7 小时前
【AtomicAgent系列1】变异测试——过去做不起,现在 agent 做得起
后端·ai编程·vibecoding
JavaPub-rodert7 小时前
LangChain 从入门到 Agent 实战:用 Python 搭建一个真正能调用工具和知识库的 AI 助手
人工智能·python·langchain
郝学胜-神的一滴7 小时前
Qt 高级编程 045:坐标体系深度实战
开发语言·c++·windows·python·qt·程序人生
考虑考虑8 小时前
nginx打印请求日志
运维·后端·nginx