html（css、js、html、web）文件引用路径写法【flask】
html（css、js、html、web）文件引用路径写法【flask】
来杯Sherry
发布于 2023-05-25 14:08:49
发布于 2023-05-25 14:08:49
Flask学习过程中，小编认为路径很重要，
- 前端怎么拿取服务器资源，（如：static路径）
-后台怎么部署前端，（如：templates路径）
-前端如何给后端发送请求，（如：ajax请求路径）
-后端又如何回复请求（如：回复路由，往往回复一个json对象）
- …
1、引入本地静态css，js文件：
比如文件路径：static/css/pintuer.css，路径如下：
<link rel="stylesheet" href="{{ url_for('static',filename ='css/pintuer.css') }}">2、引用网上css、js文件 如cdn加速资源
常规路径
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/lightbox/2.6/css/lightbox.css">3、templates模板互相跳转
3.1路由在app中
模板中只认可静态文件路径，还有路由，下面将通过路由的方法指向另一个模板
#H5 A.html下：
<a href="{{url_for('page')}}"></a>
#后台：
app.route('/page')
def page():
return template_render('B.html') #指向templates中的B.html3.2路由在蓝图ad中
不需要考虑蓝图内配置的前缀
#H5 A.html下：
<a href="{{url_for('ad.page')}}"></a>
#等效写法（补充，前者相对路径，后者绝对路径）：
<a href="page"></a>
<a href="/admin/page"></a>
#后台：
ad.route(/page)
def page():
return template_render('C.html') #指向templates中的C.html4、内嵌的js代码中对templates模板的引用
路径：实际的路由 以js文件中配置templates/404.html为例，
//js
{
"title" : "css",
"icon" : "",
"href" : "/found404",
"spread" : false
},
//路由
@ad.route('/found404')
def found404():
return render_template("404.html")5、js文件中对templates模板的引用
参照4
6、js文件中对其他内嵌js文件的引用
以layui内置为例，在index.js 引入 bodyTab.js bodyTab.js 项目路径：/static/js/bodyTab.js
//index.js
layui.config({
base : "/static/js/"
})多次调试教训：
会配路径，更要会调试
- 如果在调试中开启了session，那么重启，浏览器的cookie仍然存留（新的路径不被采用，大概率是直接从缓存中取），建议每次调试Ctrl + F5，或者F12开发者下在Network下右键Clear browser cache，可以看到服务器处理了一个页面的全部请求。
- 如果数据库涉及文件存放路径，更换电脑后原本正常的项目显示static文件路径构建失败的情况，记得先检查下数据库存储的路径是否有问题。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-05-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云数据库 Redis
腾讯云数据库 Redis（TencentDB for Redis）是腾讯云打造的兼容 Redis 协议的缓存和存储服务。丰富的数据结构能帮助您完成不同类型的业务场景开发。支持主从热备，提供自动容灾切换、数据备份、故障迁移、实例监控、在线扩容、数据回档等全套的数据库服务。