0.前言
本文说明如何在flask框架下使用前端组件EasyUI。在flask框架中连接css文件,js脚本和图片等静态文件的方式和其余web服务器存在差异。在flask框架中这些静态文件通常存放与static文件夹中,并经过url_for函数指定static中相对位置和文件名。
【代码仓库】
代码仓库位于bitbucket—— flask-easyui,请使用支持HTML5的浏览器打开连接。
【相关博文】
【2】 python Flask 学前班
1.EasyUI相关Javascript脚本
javascript脚本文件共3个
<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>
2.EasyUI相关CSS样式
css样式文件共两个
<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') }}">
3.载入图片文件
载入图片一样须要使用url_for函数。
<img src="{{ url_for('static', filename='pic/flask.png') }}">
4.简单的例子
【HTML文件】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask EasyUI</title> <!-- 载入EasyUI --> <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>
【运行结果】
图1 简单页面
python学习资源汇总 需要的自取腾讯文档-在线PDFhttps://docs.qq.com/pdf/DR1doYmNBYUZ3RVNX
5.总结
在Flask中使用静态文件须要使用url_for函数,并把全部的静态文件存放与static文件夹中。