html(css、js、html、web)文件引用路徑寫法【flask】

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.html
3.1路由在藍圖ad中

不需要考慮藍圖內配置的前綴

#H5 A.html下:
<a href="{
   
   {url_for('ad.page')}}"></a>
#後臺:
ad.route(/page)
def page():
	return template_render('C.html') #指向templates中的B.html

4、內嵌的js代碼中對templates模板的引用

路徑:實際的路由
以js文件中配置templates/404.html爲例,

//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

//index.js
layui.config({
   
   
	base : "/static/js/"
})

多次調試教訓:

會配路徑,更要會調試

如果在調試中開啓了session,那麼重啓,瀏覽器的cookie仍然存留,
新的路徑不被採用,直接從緩存中取,建議每次調試Ctrl + F5,清除緩存,
可以看到服務器處理了一個頁面的全部請求。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章