您當前位置：首頁 > 互聯網 > python Flask EasyUI使用說明

python Flask EasyUI使用說明

來源：程序員人生發布時間：2014-09-27 00:49:27 閱讀次數：3064次

0.前言

本文說明如何在flask框架下使用前端組件EasyUI。在flask框架中鏈接css文件，js腳本和圖片等靜態文件的方式和其他web服務器存在差別。在flask框架中這些靜態文件一般存放與static文件夾中，并通過url_for函數指定static中相對位置和文件名。

【代碼倉庫】

代碼倉庫位于bitbucket――flask-easyui，請使用支持HTML5的瀏覽器打開鏈接。

【相關博文】

【1】python 擴展庫安裝使用第三方鏡像源

【2】python Flask 學前班

【3】python Flask JQuery使用說明

1.EasyUI相關Javascript腳本

javascript腳本文件共3個

2.EasyUI相關CSS樣式

css樣式文件共兩個

3.載入圖片文件

載入圖片同樣需要使用url_for函數。

4.簡單的例子

【HTML文件】

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask EasyUI</title>  <script src="{{url_for('static', filename='easyui/jquery.min.js')}}"></script> <script src="{{url_for('static', filename='easyui/jquery.easyui.min.js')}}"></script> <script src="{{url_for('static', filename='easyui/locale/easyui-lang-zh_CN.js')}}"></script> <link rel=stylesheet href="{{ url_for('static', filename='easyui/themes/bootstrap/easyui.css') }}"> <link rel=stylesheet href="{{ url_for('static', filename='easyui/themes/icon.css') }}"> <script type=text/javascript> var $SCRIPT_ROOT = {{request.script_root|tojson|safe}}; </script> <script> $(document).ready(function(){ // 測試JQuery是否載入成功 console.log("document ready"); }); </script> </head> <body> <div style="margin:0px auto; width:80%"> <h2>Flask</h2> <img src="{{ url_for('static', filename='pic/flask.png') }}"> </div> <div style="margin:0px auto; width:80%"> <h2>EasyUI</h2> <img src="{{ url_for('static', filename='pic/easyui.png') }}"> </div> </body> </html>

【運行結果】