python flask 建站之文件上传下载(一)

公众号: 数据乐趣

如有建议和问题,敬请留言。

上一篇简单讲了一下Flask建站的大概流程,本篇举个Flask实例进行说明。

建站简介

实例功能是实现文件的上传和下载。

开发软件采用Pycharm,python版本为3.6。

网站创建

Flask项目创建

File-New Project。在弹出窗口中选择Flask,输入项目名称(这里定位FlaskDemo)其余默认,然后点击Create即可。

Create后项目下自动生成Flask基本组成:static、templates 两个文件夹和FlaskDemo.py文件。static存放静态文件如Js、Css文件以及网站用到的其它资源如图片等;templates存放HTML文件。这两个文件夹并非不可更改,但初期建议不要去动。

FlaskDemo.py是后台主入口,改成如下内容(注释除外):

2. 创建HTML页面

右击templates-New-HTML files,输入文件名称(这里为filemange)创建。

Pycharm自动创建了一个Html的框架页面,

将文件修改如下内容:

要注意HTML注释的格式:。具体代码在后续介绍中再说明,现在知道这个样子就行。

上面的页面没有设置格式,Chrome浏览器中显示大概如下:

是不是特别丑?

3. Js和CSS文件

如创建HTML文件。点击static-New-JavaScript File创建JS文件(本处为manage.js)。

CSS文件没有专门的,点击static-New File,文件名中要输入Css后缀(本处为manage.css)。

虽然可以在HTML设置在线使用Jquery库,但考虑到网络及调试的方便建议将Jquery文件下载到static文件中。Flask Html文件调用本地Jquery 库的方法如下:

本段主要起作用的是url_for重定向函数。static即jquery文件所在的位置,filename为下载的jquery文件。此处应将filename更改为实际的文件名。由于url_for函数是python函数,所以在调用它的时候要用双大括号包含起来。这个是Jinja2语法,如果不清楚,可以看一下前一篇文章中Jinja2的链接。

manage.js的文件内容如下:

注意JS代码的注释方式。

css 文件就不写了,本人美感太差,不想做。

最后FlaskDemopy的组成文件架构如下:

4.Flask 文件接收

与manage.js的$.ajax函数中参数对应,我们应该将FlaskDemo.py变为如下:

运行FlaskDemo.py文件,在浏览器地址输入:127.0.0.1:5000,enter进入。

如果上传较大文件,可能时间较久,因此实验过程请勿上传太大的文件。

历史文件

公众号关注

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180615G0Y3BU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券