WEB项目移植到FLASK框架以及FLASK快速入门

项目地址： Baxkiller/Data_Collection_Online (github.com)

起因

某天笔者在快乐地遨游于知识的海洋中时，一位朋友问我能否帮他写个网站，只需要做到能够收发数据即可。我一想，这个简单啊，于是花了一些时间把网站写好了，本地开启了PHP服务器也可以正常挂载到服务器上使用和访问，心想这下可以下班啦！

这时朋友又发来一个请求，问我能否帮他挂载到服务器上。天真的我此时心想无非是安装一个apache服务器，然后安装好nginx配置完，监听端口就好了。等他把服务器地址和用户名密码发给我，我远程登陆后发现他的用户并不在管理员组中，没办法安装新的软件，即便原服务器中已经安装好了apache和nginx服务器，我也无法对其设置做出更改。一时间陷入了困境。

不过所谓“解铃还须系铃人”，我向他说明问题后，他提出可以通过flask框架完成不需要root权限即可监听端口并运行网站。

好吧，那就试试看把WEB项目移植到FLASK框架吧。

适用对象

• 对Python有一定了解，会使用Python的基本语法。

• 有网站搭建的经验，熟悉HTML,CSS,JS，知道前端和后端分别是什么以及如何运行工作。

  不知道的同学可以看我的这篇博客 还没写，等写好了我就换掉链接 大致了解一下~

正文

如果准备好了，那我们就直接开始了！想要看直接一点的可以直接看最后的总结部分

免责声明：关于FLASK的运行原理我本身也不是特别清楚，这里只讲一讲我在实际使用（照葫芦画瓢）过程中的一些自我认识，如果有对这方面有比较深了解的同学可以把相关内容或者帖子的链接发在评论区，不要喷我 : (

FLASK本身实际上与PHP等后端语言的运行使用比较相似，不同之处在于FLASK是本身基于Python语言的一个框架，依托了Python环境自带的创建服务器功能。所以使用FLASK可以完成网站后端的快速开发和上线，相对需要配置的环境也比较简单，不需要配置复杂的nginx和apache等环境。

Python在端口9000快速创建服务器：

python -m http.server 9000

关于FLASK框架对于移植本身带来的优势有以下几点：

1. 提供页面渲染，可以完整地将原本准备好的静态页面渲染出来，只需要一个很简单的函数即可
2. 提供后端请求接口，只需要短短两三行代码即可完成最基本的后端处理函数的创建，并且可以创建非常简单的接口。这依托于其本身提供的语法。

文件结构

本项目文件结构如下：

其中init.py代表运行该网站系统时的主文件，由于flask的特殊文件系统，他在搜索网站显示的根目录时，将会默认从与init.py并列的目录下寻找，当然了，这个搜索地址是可以通过指定参数更改的，这里后面再讲，心里先有一个概念就好。

与整个系统相关的其他文件也是从与init.py并列的目录下寻找的，因此如果想要请求某个资源，比如说js/timer.js，必须在html中标明位置是 ！

-
│  init.py
│
└─static
    ├─css
    │      login.css
    │      toShow.css
    │
    ├─data
    │      data.json
    │
    ├─js
    │      dataLoad.js
    │      dataSave.js
    │      dataShow.js
    │      timer.js
    │
    ├─templates
    │      index.html
    │      labelPage.html
    │      saveData.php
    │
    └─userData
            login.json
            setting.json
            timeStamps.json
            toLabelInfo.json
            userLabelInfo.json

语法/接口

• 整体框架用法：

  最好先安装好对应的包：flask，json等。

  from flask import Flask, jsonify, render_template, request # 引入包
  
  app = Flask(__name__, template_folder = './static/templates')  # 实例化app对象
  
  # 相应的很多函数(语法后面也有说明)
  @app.route('/xxx', methods = ['POST'])
  def xxx():
      pass
  
  if __name__ == '__main__':
          app.run(host = '0.0.0.0',  # 任何ip都可以访问
              port = 7777,  # 端口
              debug = True, # debug模式
              use_reloader = False # 一些参数，具体可以自行查找
              )
  

• 基本函数/渲染用函数模板如下所示：

  @app.route('/') # this is the path of global
  def function():
      # do something
      # you can read data from front or just render a page
      
      # you can return the data after being operated
      # or return the page you just render
      return something
  

  第一行中括号里的内容代表相对于整个项目的位置，无论是数据请求或是通过url进行请求，对应的数据/请求都会发送到与你给定的url下的函数function()中。例如访问127.0.0.1，那么对应请求会发送到route('/')下的函数中，函数返回啥，对应页面就显示啥。

页面渲染

书接上一行，既然函数返回啥，对应页面就显示啥，那能不能直接返回我想要渲染的页面啊？比如我使用文件操作直接读入.html文件然后返回？

答案当然是不可以！ 一个框架有一个框架的规则，如果想要渲染一个页面，使用函数render_templates('index.html')即可。

特别需要注意：既然说了是render templates，那就把你要渲染的页面放在/templates文件夹下。具体的这个文件夹的位置，可以在最初实例化app对象时声明，如下（对应上面的文件结构）：

app = Flask(__name__, template_folder = './static/templates')  # 实例化app对象

数据收发/前后台通信

这个数据收发也非常滴简单呐。

这里介绍我自己常用的收发方式，即前端通过jQuery的ajax方式发出数据请求，然后后端在函数中接受到数据请求后对数据做完处理再return回去。

举个栗子：

requestData.js（虽然上面文件结构中没有，但你可以认为这个文件存在于./static/js目录下。）

// 根据用户登录得到的数据，请求获取数据
function dataLoad():
	$.ajax({
        url: "/requestData", // 对应后台的函数格式中@app.route('/requestData')
        type: "POST",
        dataType: "json",
        data: {
            uid: uid,
            mode: mode,
        },
        success: //如果数据请求成功，做的事情
            function (data) {
                if(data.index === -1) //检查数据的内容判断后台的结果，做出响应动作
                {
                    alert("当前无数据可标注!请联系任务发布者或稍后再试...")
                    reDirected()
                }
                else if(data.index === -2)
                {
                    alert(data.msg)
                    reDirected()
                }
                update(data.d,data.index)
            }
    })

而对应的前台函数是啥呢：

init.py中的一个函数：

@app.route('/requestData', methods = ['POST']) # 要与上面的对应方式相同
def requestData():
    uid = request.form.get('uid')
    mode = eval(request.form.get('mode'))  # 两个数据参数
    res=do_something(uid, mode)
    return json.dumps(res) # 将结果以json形式返回，但是传输需要先转化为字符串

这样，两者之间就可以非常方便的完成通讯啦！

为了方便大家理解，我这里再给出一个图：

总结

最后的总结部分如下：

想要完成从HTML到FLASK的移植，按照以下步骤：

1. 将原项目的文件结构设置为上面提到的文件结构的设置。

   即对于大部分形如 ↓ 的项目，在css这种文件夹的并列位置创建templates文件夹，并将所有静态模板文件复制进去。

   

   在这些文件夹的上层目录部分，新建一个文件夹名为static，新建一个py文件，随便命名（例如init.py）

   将上面提到的css,templates在内的所有文件剪切粘贴到static文件夹中

2. 修改所有引用js,css的链接，更改为/static/js/...以及/static/css/...，data同理。

3. 修改前端发送数据请求的位置的目标地址为/name的形式。

4. 编辑init.py文件，按照前面提到的语法/接口部分，编写函数。

   例如对于接受前端的数据请求的处理函数(3中的/name)对应函数为:

   @app.route('/name',method=['post','get']) # this is the path of global
   def name():
       data=request.form.get('input_name/json_name') # 发送时对应的数据名称
       res=data.operat() # 操作数据
       return json.dumps(res) # 传回数据
   

5. 运行init.py即可啦~

结语

受限于知识面和时间问题，自己有很多东西并没有特别深究。

如果您对本文有任何好的建议或意见，或者任何问题，欢迎通过以下方式联系我：

• email [email protected]
• 评论区留言或私信
• github对应仓库提交issue

以上。