Python easyui
来源：互联网 发布：unity3d lua 编辑：程序博客网 时间：2024/06/03 21:05
本文说明如何在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>
<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') }}">
<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>
<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>
阅读全文
0 0
- Python easyui
- python easyUI
- python Flask EasyUI使用说明
- Python递归实现 easyui
- Python easyui的Layout
- Python递归实现Easyui combotree树
- easyUI
- EasyUI
- Easyui
- EasyUI
- easyUI
- EasyUI
- easyUI
- easyUI
- easyui
- easyui
- Easyui
- EasyUI
- 1122: 小明的调查作业
- tomcat项目部署去掉项目名
- ftl基础语法
- MAVEN 私服推送本地jar包
- c++和python string 的find()方法的返回值不同
- Python easyui
- QQ oauth原理
- 声明式编程和命令式编程
- 深度学习中关于epoch的几个词汇的理解
- 输入数字，定义运算规则:（0为加 1为减 2为乘 3为除")，输出结果
- Leetcode 718. Maximum Length of Repeated Subarray
- Java中的进制转换
- 考试时的一些策略
- CSS实现中间自适应的三栏布局，共4种方法
