html（css、js、html、web）文件引用路径写法【flask】

2023-05-25 14:08:49 浏览数 (1)
Flask学习过程中，小编认为路径很重要，

- 前端怎么拿取服务器资源，（如：static路径）
-后台怎么部署前端，（如：templates路径）
-前端如何给后端发送请求，（如：ajax请求路径）
-后端又如何回复请求（如：回复路由，往往回复一个json对象）
- …

1、引入本地静态css，js文件：

比如文件路径：static/css/pintuer.css，路径如下：

代码语言：javascript复制
<link rel="stylesheet" href="{{ url_for('static',filename ='css/pintuer.css') }}">

2、引用网上css、js文件 如cdn加速资源

常规路径

代码语言：javascript复制
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/lightbox/2.6/css/lightbox.css">

3、templates模板互相跳转

3.1路由在app中

模板中只认可静态文件路径，还有路由，下面将通过路由的方法指向另一个模板

代码语言：javascript复制
#H5 A.html下：
<a href="{{url_for('page')}}"></a>
#后台：
app.route('/page')
def page():
	return template_render('B.html') #指向templates中的B.html
3.2路由在蓝图ad中

不需要考虑蓝图内配置的前缀

代码语言：javascript复制
#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.html

4、内嵌的js代码中对templates模板的引用

路径：实际的路由 以js文件中配置templates/404.html为例，

代码语言：javascript复制
//js
		{
			"title" : "css",
			"icon" : "&#xe609;",
			"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

代码语言：javascript复制
//index.js
layui.config({
	base : "/static/js/"
})

多次调试教训：

会配路径，更要会调试
  • 如果在调试中开启了session，那么重启，浏览器的cookie仍然存留（新的路径不被采用，大概率是直接从缓存中取），建议每次调试Ctrl F5，或者F12开发者下在Network下右键Clear browser cache，可以看到服务器处理了一个页面的全部请求。
  • 如果数据库涉及文件存放路径，更换电脑后原本正常的项目显示static文件路径构建失败的情况，记得先检查下数据库存储的路径是否有问题。
css html flask web 路由

0 人点赞