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

上一篇简单讲了一下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进入。

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

历史文件