本文将介绍笔者的一个项目，主要是利用tornado实现表格文件的预览，能够浏览的表格文件支持CSV以及Excel文件。预览的界面如下：

文件浏览界面

  下面我们将看到这个功能是如何通过tornado来实现的。

  该项目的代码结构如下图所示：

项目的代码结构

  其中主要分为四个部分：

  • files
  • static
  • templates
  • py代码

其中，files文件夹为上传的表格文件的存放路径，static为前端的静态文件，后续将不用给出介绍，读者可以从该项目的github中下载（下载地址详见后面），templates文件夹主要存放HTML文件，而py文件用于后端控制。

  首先让我们看三个HTML文件，先是upload.html，其代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文件上传</title>
  6.     <link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
  7.     <link rel="stylesheet" href="{{static_url('CSS/amazeui.min.css')}}">
  8.     <script src="{{static_url('JS/amazeui.min.js')}}"></script>
  9.     <script>
  10.     $(function() {
  11.         $('#doc-form-file').on('change', function() {
  12.         var fileNames = '';
  13.         $.each(this.files, function() {
  14.             fileNames += '<span class="am-badge">' + this.name + '</span> ';
  15.         });
  16.         $('#file-list').html(fileNames);
  17.         });
  18.     });
  19.     </script>
  20. </head>
  21. <body>
  23.     <div align="center">
  24.         <br><br>
  25.         <h1>表格文件上传</h1>
  26.     <form action='file' enctype="multipart/form-data" method='post'>
  27.         <div class="am-form-group am-form-file">
  28.             <button type="button" class="am-btn am-btn-primary am-btn-sm">选择要上传的文件</button>
  29.             <input id="doc-form-file" type="file" name="file" multiple>
  30.         </div>
  31.         <div id="file-list"></div>
  32.         <p>
  33.             <button type="submit" class="am-btn am-btn-default">提交</button>
  34.         </p>
  35.     </form>
  36.         <p><a href="/file_review"><button class="am-btn am-btn-danger">查看全部文件</button></a></p>
  38.     </div>
  40. </body>
  41. </html>

这个是文件上传的网页，界面如下：

文件上传页面

选择上传文件，完成上传后，则会显示如下界面：

文件上传成功

接着是fileReview.html，其代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文件浏览</title>
  6.     <link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
  7.     <link rel="stylesheet" href="{{static_url('CSS/bootstrap.min.css')}}">
  8.     <link rel="stylesheet" href="{{static_url('CSS/amazeui.min.css')}}">
  9. </head>
  10. <body>
  12.     <div align="center">
  13.         <br><br>
  14.     <h1>文件浏览</h1>
  15.     <ul class="list-group" style="width:800px;text-align:left">
  16.         {% for file in files %}
  17.             {% if file.endswith('.csv') or file.endswith('.xls') or file.endswith('.xlsx') %}
  18.             <li class="list-group-item"> <a href={{"/data?file="+file}}>{{ file }}</a></li>
  19.             {% end %}
  20.         {% end %}
  21.     </ul>
  22.     <a href="/file"><button class="btn btn-success" id="review">文件上传界面</button></a>
  23.     </div>
  25. </body>
  26. </html>

该页面主要用于显示上传的表格文件，界面如下：

查看全部文件

最后是dataReview.html，代码如下：

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>数据预览</title>
  7.     <link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
  8.     <link rel="stylesheet" href="{{static_url('CSS/table.css')}}">
  9.     <link rel="stylesheet" href="{{static_url('CSS/bootstrap.min.css')}}">
  10. </head>
  12. <body>
  14.     <br><br>
  15.     <div align="center">
  16.     <div style="width:800px">
  18.     <table class="table table-striped table-bordered table-condensed table-responsive">
  19.         <thead id="index">
  20.             <tr>
  21.                 {% for title in data[0] %}
  22.                 <th>{{ title }}</th>
  23.                 {% end %}
  24.             </tr>
  25.         </thead>
  26.         <tbody id="body">
  27.             {% for line in data[1:] %}
  28.             <tr>
  29.                 {% for cell in line %}
  30.                 <td>{{ cell }}</td>
  31.                 {% end %}
  32.             </tr>
  33.             {% end %}
  34.         </tbody>
  35.     </table>
  36.     </div>
  37.         <a href="/file"><button class="btn btn-warning" id="review">文件上传界面</button></a>
  38.     </div>
  40. </body>
  41. </html>

该界面主要用于显示表格文件中的数据，比如刚才上传成功的Excel文件，其中的数据如下：

表格数据预览

  仅有HTML页面是不够的，我们还需要Python代码来控制网页的运行，这就是server.py，其中的代码如下：

  1. # -*- coding: utf-8 -*-
  3. import xlrd
  4. import os.path
  5. import tornado.httpserver
  6. import tornado.ioloop
  7. import tornado.options
  8. import tornado.web
  9. from tornado.options import define, options
  11. #定义端口为12306
  12. define("port", default=12306, help="run on the given port", type=int)
  14. class UploadFileHandler(tornado.web.RequestHandler):
  15.     # get函数
  16.     def get(self):
  17.         self.render('upload.html')
  19.     # post函数
  20.     def post(self):
  21.         # 文件的存放路径
  22.         upload_path = os.path.join(os.path.dirname(__file__), 'files')
  23.         # 提取表单中‘name’为‘file’的文件元数据
  24.         file_metas = self.request.files['file']
  25.         for meta in file_metas:
  26.             filename = meta['filename']
  27.             filepath = os.path.join(upload_path, filename)
  28.             # 有些文件需要已二进制的形式存储，实际中可以更改
  29.             with open(filepath, 'wb') as up:
  30.                 up.write(meta['body'])
  31.             self.write("<br><br>")
  32.             self.write('<p>上传%s成功!</p>' % filename)
  33.             self.write('<p><a href="/file_review"><button>查看全部文件</button></a></p>')
  35. class FileReviewHandler(tornado.web.RequestHandler):
  36.     def get(self):
  37.         # 文件的存放路径
  38.         upload_path = os.path.join(os.path.dirname(__file__), 'files')
  39.         files = os.listdir(upload_path)
  40.         for file in files:
  41.             if os.path.isdir(file):
  42.                 files.remove(file)
  44.         self.render('fileReview.html', files=files)
  46. class DataReviewHandler(tornado.web.RequestHandler):
  48.     def get(self):
  49.         filename = self.get_argument('file')
  50.         print(filename)
  51.         # 文件的存放路径
  52.         upload_path = os.path.join(os.path.dirname(__file__), 'files')
  53.         file_path = os.path.join(upload_path, filename)
  55.         if filename.endswith('.csv'):
  56.             with open(file_path, "r") as f:
  57.                 data = f.readlines()
  58.             data = [line.strip().split(',') for line in data]
  60.         elif filename.endswith('.xls') or filename.endswith('.xlsx'):
  61.             tables = xlrd.open_workbook(file_path)
  62.             table = tables.sheets()[0] # 第一张表格
  63.             nrows = table.nrows
  65.             # 循环行列表数据
  66.             data = []
  67.             for i in range(nrows):
  68.                 data.append(table.row_values(i))
  70.         else:
  71.             data = []
  73.         self.render('dataReview.html', data=data)
  75. # 主函数
  76. def main():
  78.     # 开启tornado服务
  79.     tornado.options.parse_command_line()
  80.     # 定义app
  81.     app = tornado.web.Application(
  82.             handlers=[(r'/file', UploadFileHandler),
  83.                       (r'/file_review', FileReviewHandler),
  84.                       (r'/data', DataReviewHandler)
  85.                       ],    # 网页路径控制
  86.             template_path=os.path.join(os.path.dirname(__file__), "templates"), # 模板路径
  87.             static_path=os.path.join(os.path.dirname(__file__), "static"),  # 配置静态文件路径
  88.           )
  89.     http_server = tornado.httpserver.HTTPServer(app)
  90.     http_server.listen(options.port)
  91.     tornado.ioloop.IOLoop.instance().start()
  93. main()

点击运行server.py文件，在浏览中输入“localhost:12306/file”就能看到刚才的文件上传的页面了。
  到此，我们就讲完了这个项目的结构，我们省去了static文件的讲述，因为这并不影响程序的运行，只是页面的样式会比较丑陋，如果您想获得较好的浏览效果，可以从该项目的github地址中下载static文件夹，不必再自己重头写起。

  笔者提供了以下三种方式供读者使用该项目：

  • 直接使用
  • github使用
  • docker使用

  读者按照上面的讲解，自己写一个项目，拷贝static文件夹，然后点击运行server.py，在浏览中输入“localhost:12306/file”就能使用该程序来浏览上传的表格了。

  从该项目的github地址：https://github.com/percent4/csv_file_review 中下载该项目，命令如下：

  1. git init
  2. git clone https://github.com/percent4/csv_file_review

然后安装必要的第三方模块：xlrd, tornado, 点击运行server.py，在浏览中输入“localhost:12306/file”就能使用该程序来浏览上传的表格了。

  首先拉取docker镜像：

  1. docker pull jclian91/dockertest:csv_file_review.2019.02.21.2312

然后运行该镜像：

  1. 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即可启动服务，

  1. [root@fbb2c3fb6ce1 src]# ls
  2. __init__.py  files  server.py  static  templates
  3. [root@fbb2c3fb6ce1 src]# python server.py

在浏览中输入“localhost:12306/file”就能使用该程序来浏览上传的表格了。

  关于本项目的介绍就到这儿了，感谢大家阅读~
  如您对本项目的源代码感兴趣，可参考网址：https://github.com/percent4/csv_file_review

注意：本人现已开通微信公众号： Python爬虫与算法（微信号为：easy_web_scrape）， 欢迎大家关注哦~~

版权声明：本文为jclian91原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jclian91/p/10417037.html