項目介紹
本文將介紹筆者的一個項目,主要是利用tornado實現表格文件的預覽,能夠瀏覽的表格文件支持CSV以及Excel文件。預覽的界面如下:
下面我們將看到這個功能是如何通過tornado來實現的。
代碼
該項目的代碼結構如下圖所示:
其中主要分爲四個部分:
- files
- static
- templates
- py代碼
其中,files文件夾爲上傳的表格文件的存放路徑,static爲前端的靜態文件,後續將不用給出介紹,讀者可以從該項目的github中下載(下載地址詳見後面),templates文件夾主要存放HTML文件,而py文件用於後端控制。
首先讓我們看三個HTML文件,先是upload.html,其代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上傳</title>
<link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
<link rel="stylesheet" href="{{static_url('CSS/amazeui.min.css')}}">
<script src="{{static_url('JS/amazeui.min.js')}}"></script>
<script>
$(function() {
$('#doc-form-file').on('change', function() {
var fileNames = '';
$.each(this.files, function() {
fileNames += '<span class="am-badge">' + this.name + '</span> ';
});
$('#file-list').html(fileNames);
});
});
</script>
</head>
<body>
<div align="center">
<br><br>
<h1>表格文件上傳</h1>
<form action='file' enctype="multipart/form-data" method='post'>
<div class="am-form-group am-form-file">
<button type="button" class="am-btn am-btn-primary am-btn-sm">選擇要上傳的文件</button>
<input id="doc-form-file" type="file" name="file" multiple>
</div>
<div id="file-list"></div>
<p>
<button type="submit" class="am-btn am-btn-default">提交</button>
</p>
</form>
<p><a href="/file_review"><button class="am-btn am-btn-danger">查看全部文件</button></a></p>
</div>
</body>
</html>
這個是文件上傳的網頁,界面如下:
選擇上傳文件,完成上傳後,則會顯示如下界面:
接着是fileReview.html,其代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件瀏覽</title>
<link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
<link rel="stylesheet" href="{{static_url('CSS/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{static_url('CSS/amazeui.min.css')}}">
</head>
<body>
<div align="center">
<br><br>
<h1>文件瀏覽</h1>
<ul class="list-group" style="width:800px;text-align:left">
{% for file in files %}
{% if file.endswith('.csv') or file.endswith('.xls') or file.endswith('.xlsx') %}
<li class="list-group-item"> <a href={{"/data?file="+file}}>{{ file }}</a></li>
{% end %}
{% end %}
</ul>
<a href="/file"><button class="btn btn-success" id="review">文件上傳界面</button></a>
</div>
</body>
</html>
該頁面主要用於顯示上傳的表格文件,界面如下:
最後是dataReview.html,代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數據預覽</title>
<link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
<link rel="stylesheet" href="{{static_url('CSS/table.css')}}">
<link rel="stylesheet" href="{{static_url('CSS/bootstrap.min.css')}}">
</head>
<body>
<br><br>
<div align="center">
<div style="width:800px">
<table class="table table-striped table-bordered table-condensed table-responsive">
<thead id="index">
<tr>
{% for title in data[0] %}
<th>{{ title }}</th>
{% end %}
</tr>
</thead>
<tbody id="body">
{% for line in data[1:] %}
<tr>
{% for cell in line %}
<td>{{ cell }}</td>
{% end %}
</tr>
{% end %}
</tbody>
</table>
</div>
<a href="/file"><button class="btn btn-warning" id="review">文件上傳界面</button></a>
</div>
</body>
</html>
該界面主要用於顯示錶格文件中的數據,比如剛纔上傳成功的Excel文件,其中的數據如下:
僅有HTML頁面是不夠的,我們還需要Python代碼來控制網頁的運行,這就是server.py,其中的代碼如下:
# -*- coding: utf-8 -*-
import xlrd
import os.path
import tornado.httpserver
import tornado.ioloop
import tornado.options
import tornado.web
from tornado.options import define, options
#定義端口爲12306
define("port", default=12306, help="run on the given port", type=int)
class UploadFileHandler(tornado.web.RequestHandler):
# get函數
def get(self):
self.render('upload.html')
# post函數
def post(self):
# 文件的存放路徑
upload_path = os.path.join(os.path.dirname(__file__), 'files')
# 提取表單中‘name’爲‘file’的文件元數據
file_metas = self.request.files['file']
for meta in file_metas:
filename = meta['filename']
filepath = os.path.join(upload_path, filename)
# 有些文件需要已二進制的形式存儲,實際中可以更改
with open(filepath, 'wb') as up:
up.write(meta['body'])
self.write("<br><br>")
self.write('<p>上傳%s成功!</p>' % filename)
self.write('<p><a href="/file_review"><button>查看全部文件</button></a></p>')
class FileReviewHandler(tornado.web.RequestHandler):
def get(self):
# 文件的存放路徑
upload_path = os.path.join(os.path.dirname(__file__), 'files')
files = os.listdir(upload_path)
for file in files:
if os.path.isdir(file):
files.remove(file)
self.render('fileReview.html', files=files)
class DataReviewHandler(tornado.web.RequestHandler):
def get(self):
filename = self.get_argument('file')
print(filename)
# 文件的存放路徑
upload_path = os.path.join(os.path.dirname(__file__), 'files')
file_path = os.path.join(upload_path, filename)
if filename.endswith('.csv'):
with open(file_path, "r") as f:
data = f.readlines()
data = [line.strip().split(',') for line in data]
elif filename.endswith('.xls') or filename.endswith('.xlsx'):
tables = xlrd.open_workbook(file_path)
table = tables.sheets()[0] # 第一張表格
nrows = table.nrows
# 循環行列表數據
data = []
for i in range(nrows):
data.append(table.row_values(i))
else:
data = []
self.render('dataReview.html', data=data)
# 主函數
def main():
# 開啓tornado服務
tornado.options.parse_command_line()
# 定義app
app = tornado.web.Application(
handlers=[(r'/file', UploadFileHandler),
(r'/file_review', FileReviewHandler),
(r'/data', DataReviewHandler)
], # 網頁路徑控制
template_path=os.path.join(os.path.dirname(__file__), "templates"), # 模板路徑
static_path=os.path.join(os.path.dirname(__file__), "static"), # 配置靜態文件路徑
)
http_server = tornado.httpserver.HTTPServer(app)
http_server.listen(options.port)
tornado.ioloop.IOLoop.instance().start()
main()
點擊運行server.py文件,在瀏覽中輸入“localhost:12306/file”就能看到剛纔的文件上傳的頁面了。
到此,我們就講完了這個項目的結構,我們省去了static文件的講述,因爲這並不影響程序的運行,只是頁面的樣式會比較醜陋,如果您想獲得較好的瀏覽效果,可以從該項目的github地址中下載static文件夾,不必再自己重頭寫起。
使用
筆者提供了以下三種方式供讀者使用該項目:
- 直接使用
- github使用
- docker使用
直接使用
讀者按照上面的講解,自己寫一個項目,拷貝static文件夾,然後點擊運行server.py,在瀏覽中輸入“localhost:12306/file”就能使用該程序來瀏覽上傳的表格了。
github使用
從該項目的github地址:https://github.com/percent4/c...,命令如下:
git init
git clone https://github.com/percent4/csv_file_review
然後安裝必要的第三方模塊:xlrd, tornado, 點擊運行server.py,在瀏覽中輸入“localhost:12306/file”就能使用該程序來瀏覽上傳的表格了。
docker使用
首先拉取docker鏡像:
docker pull jclian91/dockertest:csv_file_review.2019.02.21.2312
然後運行該鏡像:
docker run -p 12306:12306 -v $PWD/db:/root/csv_file_review/src/files -it c97f252cd6e8 bash
注意, -it後面爲剛纔拉取的docker鏡像的ID,需要將ID替換爲你剛拉取的鏡像ID,運行端口爲本機的12306,上傳的表格數據存放在$PWD/db路徑下。進入虛擬機後,運行server.py即可啓動服務,
[root@fbb2c3fb6ce1 src]# ls
__init__.py files server.py static templates
[root@fbb2c3fb6ce1 src]# python server.py
在瀏覽中輸入“localhost:12306/file”就能使用該程序來瀏覽上傳的表格了。
總結
關於本項目的介紹就到這兒了,感謝大家閱讀~
如您對本項目的源代碼感興趣,可參考網址:https://github.com/percent4/c...
注意:本人現已開通微信公衆號: Python爬蟲與算法(微信號爲:easy_web_scrape), 歡迎大家關注哦~~