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个
[javascript] view plain copy
<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样式文件共两个
[javascript] view plain copy
<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函数。
[javascript] view plain copy
<img src="{{ url_for('static', filename='pic/flask.png') }}">
4.简单的例子
【HTML文件】
[javascript] view plain copy
<!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 autowidth:80%">
<h2>Flask</h2>
<img src="{{ url_for('static', filename='pic/flask.png') }}">
</div>
<div style="margin:0px autowidth:80%">
<h2>EasyUI</h2>
<img src="{{ url_for('static', filename='pic/easyui.png') }}">
</div>
</body>
</html>
【运行结果】
图1 简单页面
5.总结
在Flask中使用静态文件需要使用url_for函数，并把所有的静态文件存放与static文件夹中。
看了你的问题，几个回答似乎都不完全对。 给你补充一下吧。
你的问题与flask基本上没有关系。flask是一个简单的微型编程框架，很优美，也很简单好用。不过它仅仅实现了基于HTTP协议的服务端交互部分。
一个界面设计除了服务端交互，还需要本地交互（用JS, flash实现），最重要的还是需要客户端界面（用HTML+CSS+JS实现）。文件上传需要（JQUERY+UPLOADFILE库）
从上面的回答看，你似乎刚开始着手做这些。我建议你按这个思路去做。
先学习html2.0，不是4.01，也不是5.0，因为2.0更基本。然后用frame和table做出你的界面，先实现左边的部分
然后学习css，把你左边的两个按钮搞定。用TABLE也可以，比如笨。然后用CSS将frame方式换成iframe实现
用传统的html方式实现右边的上传下载
学习jquery，用其中uploadfile功能重新实现右边的上传功能
如果你学得快，需要1个星期，学得慢就说不准了，也许3个星期完成。
主要介绍了python使用Flask框架获取用户IP地址的方法,实例分析了Python使用Flask框架remote_addr获取IP的`技巧,非常具有实用价值,需要的朋友可以参考下。 下面的代码包含了html页面和python代码，非常详细，如果你正使用Flask，也可以学习一下最基本的Flask使用方法。 python代码如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 from flask import Flask, render_template, request # Initialize the Flask application app = Flask(__name__) # Default route, print user's IP @app.route('/') def index(): ip = request.remote_addr return render_template('index.html', user_ip=ip) if __name__ == '__main__': app.run( host="0.0.0.0", port=int("80") ) html代码如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html> <html lang="en"> <head> <link href="bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p class="container"> <p class="header"> <h3 class="text-muted">How To Get The IP Address Of The User</h3> </p> <hr/> <p> You IP address is: <strong>{{user_ip}}</strong> <p class="header"> <h3 class="text-muted">Code to retrieve the IP</h3> </p> <hr/> <pre> from flask import Flask, render_template, request # Initialize the Flask application app = Flask(__name__) # Default route, print user's IP @app.route('/') def index(): ip = request.remote_addr return render_template('index.html', user_ip=ip) </pre> </p> </p> </body> </html> 希望本文所述对大家的Python程序设计有所帮助。
