Flask-url加载静态文件

实现从index通过链接进入到登录页面

#############Python#########################

# encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)


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


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


if __name__ == '__main__':
    app.run(debug=True)
####################index.html#####################
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="{{ url_for("static",filename='index.css') }}">  {#加载css#}
    <script src="{{ url_for("static",filename='js/index.js')}}"></script>   {#加载js#}
</head>
<body>
{#    <a href="/login/">登录</a>#}
    <a href="{{ url_for('login') }}">登录</a>   {#####主要使用了url_for#}

    <img src="{{ url_for('static',filename='images/niu.jpg') }}">   {#####加载图片#}
</body>
</html>

####################login.html######################
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这是登录界面</h1>
</body>
</html>
======================index.css=====================
a{
    background:red;
}
=====================index.js=======================
alert("祝大家新年快乐！")
=====================结构图==========================

 

 







            

            
posted @ 
 
王亚锋 
阅读(1570) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    
（评论功能已被禁用）

    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 基于Microsoft.Extensions.AI核心库实现RAG应用
    

· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
    

· 开发者必知的日志记录最佳实践
    

· SQL Server 2025 AI相关能力初探
    

· Linux系列：如何用 C#调用 C方法造成内存泄露
    



    

    阅读排行：
    

 ·          终于写完轮子一部分：tcp代理 了，记录一下
        

 ·          震惊！C++程序真的从main开始吗？99%的程序员都答错了
        

 ·          别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
        

 ·          单元测试从入门到精通
        

 ·          【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
        



    
    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示