python Flask EasyUI使用说明

最新推荐文章于 2025-05-12 13:33:39 发布

IT孔乙己

最新推荐文章于 2025-05-12 13:33:39 发布

阅读量482

点赞数

文章标签： python easyui flask

原文链接：https://docs.qq.com/pdf/DR1doYmNBYUZ3RVNX

版权

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个

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

【运行结果】