[Python+Flask] 前端同学开发后端接入层应用

最近在工作中做一个小型的查询系统，由于比较简单，前后端全是我一个人做。在这里从前端同学的视角讲解并记录前后端同时开发的过程，希望能为广大对前后端都有兴趣的同学提供思路~

一.相关技术

1.前端

前端主要使用了 Vue+ElementUI+axios（http数据请求）

IDE我推荐VSCode (ง •_•)ง

VSCode：VSCode下载地址

2.后端

后端接入层使用 Python（3.7版本）+ Flask（Python的一种Web应用框架）

在这里IDE我用的PyCharm

PyCharm：PyCharm下载地址

使用 gunicorn 作为Flask的Web Server

使用 supervisor 进行进程管理（可以快速的用命令行的形式对我们的Flask应用启动，关闭，重启，查看状态）

二.需求分析和开发思路

1.需求分析

本系统主要是给运维同事做数据分析使用，主要功能就是复合条件查询，然后以列表形式展示数据

2.开发思路

1）根据我们的需求，用Vue+ElementUI开发前端SPA（单页应用），从前端对Flask应用发起http数据请求

2）由于数据来源是组内后端同事提供的Druid（大家可以理解为数据库即可），根据请求规则，用 Python 对Druid进行数据请求即可获取数据

总结一下：使用时在前端输入查询条件，点击查询发起http请求，请求的接口是我们在Flask应用中写好的，获取查询条件后，再根据查询条件用Python对Druid发起数据请求，待Druid返回查询结果后，经过我们的一些逻辑处理（比如异常处理或者返回格式的处理），最终返回给前端，供前端进行数据展示，其概念如下图所示。

三.撸起袖子开始Coding

1.前端工程的搭建

1）需要的准备工作：

nodejs的安装：nodejs下载地址

2）准备工作完成后，我们用npm下载截止到2019年1月30日最新的vue-cli3，便于我们获取最新的vue脚手架工程

npm install -g @vue/cli

vue-cli3下载完成后，使用命令行获取最新vue脚手架工程

vue create my-project

3）至此，我们就有了官方的脚手架工程，我们可以在其中根据项目需求进行更改

2.Flask应用的搭建

1）python的安装：python下载地址

并且配置好环境变量

2）使用python自带的包管理工具pip，安装virtualenv

pip install virtualenv

这里安装virtualenv虚拟环境是用来针对依赖不同版本，不同包的多个Flask应用做开发

3）使用PyCharm创建Flask应用工程，如下图所示。

注：如果不用PyCharm创建Flask工程的话，还要单独用pip命令安装Flask

3.用Flask应用实现前端接入层api

首先上代码

from flask import Flask, render_template
from flask import request
#在引入requests和json前，要用pip install requests,json进行安装
import requests,json
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
	
@app.route('/here/js_get', methods=['GET'])
def js_get():
     #python请求Druid的url
     url = "http://x.x.x.x:x/druid/v2/?pretty"
     headers = {'content-type':'application/json','Accept-Charset':'UTF8'}
	 #python请求Druid的参数
	 #request.values就是前端传过来的几个关键参数
	 #以request.values['timeStamp']为例，如果这个字段是字符串，直接获取即可
	 #如果是字典或者数组，切记要用json.loads(request.values['timeStamp'])将其格式转换后再进行python代码中的逻辑处理
	 param={
	  requestId:request.values['requestId'],
	  fileKey:request.values['fileKey'],
	  timeStamp:request.values['timeStamp']
	 }
	 #这里python向Druid发起请求
	 r = requests.post(url, data=json.dumps(param), headers=headers)
	 #r.text就是python请求后拿到的数据，用json.dumps()将其转换成字符串后返回
	 result = json.dumps(r.text)
	 return result
if __name__ == '__main__':
     app.run("0.0.0.0")
复制代码

我把自己项目中的代码进行了精简，拿掉了逻辑处理，格式处理等影响直观理解的部分。 我们看上面的代码，首先我们要理解以下这部分，这部分代码指定了我们的Flask应用，会让前端用户在打开链接后，从index.html进入我们的前端应用

@app.route('/')
def index():
    return render_template('index.html')
复制代码

接着我们看下面的代码，这部分指的是，在我们的Flask应用中，有一个api叫做/here/js_get，请求方法是GET方法，由于前端工程打包后是放在Flask应用相应位置中，所以域名会自动补齐，比如我访问前端界面的域名是www.test.com，那么完整的请求链接就是 www.test.com/here/js_get，在前端进行请求时，域名不需要自己添加（前端请求代码我在后面会写）

@app.route('/here/js_get', methods=['GET'])
def js_get():
复制代码

最后，让我们看一下下面这部分代码，这部分代码中app.run(0.0.0.0)指的是我们的Flask应用不限制访问ip地址

if __name__ == '__main__':
     app.run("0.0.0.0")
复制代码

大家看到这里可能有些疑惑，Flask应用是怎么和前端工程结合在一起的，@app.route('/')这句代码又是怎么控制用户访问index.html的，别着急，我们一步一步来讲

4.前端如何调用Flask应用的api接口

首先让我们用npm来安装axios npm install axios --save-dev 在Vue工程中，如下代码所示，使用axios发起http请求，调用Flask应用的api接口，最终数据会通过res.data返回，如果请求异常，会进入err部分

<script>
import axios from 'axios'
export default {
 name:'Example',
 data(){
  return{
    requestId:'',
    fileKey:'',
    timeStamp:''
  }
 }
 methods:{
   startSearching(){
    axios.get('/here/js_get',{
      params:{
	    requestId:this.requestId,
	    fileKey:this.fileKey,
	    timeStamp:this.timeStamp
      }
    }).then((res)=>{
     //res.data就是http请求返回的数据，我们获取后可用作数据展示
    },(err)=>{
     //请求失败时进入这部分；比如500，404等情况
   })
   }
 }
}
</script>
复制代码

这样，简单的前端调用Flask应用api部分的代码就写完了，如果在开发阶段需要前后端联调，可以用webpack的proxy进行跨域处理，防止localhost和api域名不一致导致的跨域问题。

下面让我们来讲一下在前端工程和Flask应用都开发完成后，如何进行发布工作

5.前端打包，后端部署相关工作

1）首先vue-cli3的脚手架工程是集成了Webpack4的，默认情况下执行命令行 npm run build 即可进行打包工作，我打包后的dist目录如下图所示。

2）登录用来部署后端的服务器（我的项目是在 linux 服务器下），确保安装Python正确的版本，正确配置环境变量，以及Python代码中所需依赖的各个包（requests，json，Flask等）， 针对同一服务器下，多个Flask应用依赖包环境的不同，还是推荐使用virtualenv创建各自依赖的虚拟环境

3）相关环境配置好后，上传我们的Python工程代码，如果我们的工程中根目录下没有 static 文件夹和 templates 文件夹，请创建。还记得我上面前端用webpack打包后的代码吗？将其中的index.html放入templates文件夹中，其他所有文件放入static文件夹中（这里要比较熟悉linux的相关文件操作才比较方便）

4）前端打包代码放入相应位置后，运行我们的Python代码，由于本项目只是用Python进行接入层api的开发，所以我的代码都在一个python文件内。比如我的文件叫做app.py，那么我通过python app.py执行这个文件。此时整个Flask应用就运行了起来，用户可以通过浏览器访问所配置的相关域名访问前端界面（这一步要用nginx做相关配置工作）

还记得我们Flask应用中下面的这部分代码吗？

@app.route('/')
def index():
    return render_template('index.html')
复制代码

这里路由的'/'恰恰就是指我们直接打开域名就访问了Flask应用中的index.html，假设我们的域名是www.test.com，这里的路由我们改写为app.route('/first')，那么我们访问index.html的域名就要变成www.test.com/first，没有www.test.com看起来直观，对吧？所以这里的路由配置为app.route('/')的作用就在于让访问者通过域名可以直接访问index.html

6.gunicorn和supervisor

我们之前所说的，是我们执行python代码后，让用户可以通过浏览器访问，这种情况下，当我们断开和服务器的连接后，python服务就会终止。即使我们断开和服务器的连接不会导致python服务终止，假如我们在同一台服务器下，有多个Flask应用，在没有 工具 的帮助下，我们无法很好的控制哪些Flask应用启动，哪些终止，哪些重启。此时，做python后端开发的同事向我推荐了gunicorn + supervisor，前者是作为Web Server，后者用于对Flask应用做进程管理

1）gunicorn

linux环境下执行命令行安装gunicorn

pip install gunicorn

2）supervisor

linux环境下安装supervisor

pip install supervisor

然后执行如下命令，生成supervisor初始配置文件

echo_supervisord_conf > /usr/etc/supervisord.conf

后面的/usr/etc/supervisord.conf是生成配置文件的路径

生成配置文件后，我们用vim进入配置文件内，在最后加入

[include]
files = /root/flask_demo/supervisord.conf
复制代码

以上代码表示，配置文件中的配置信息，还包含了files路径下的相关配置信息，相当于二者取并集才是最终的配置信息，但此时我在相关路径下还没有创建配置文件，flask_demo是我的Flask工程目录，进入其中，创建supervisord.conf，并用vim进行编辑，我的配置文件内容如下

[program:app]
command=/usr/bin/gunicorn -w 4 -b 0.0.0.0:5000 app:app
process_name=%(program_name)s
numprocs=1
directory=/root/flask_demo/
autostart=true
autorestart=unexpected
stdout_logfile=/root/flask_demo/log/stdout.log
stderr_logfile=/root/flask_demo/log/stderr.log
复制代码

其中command那一行是gunicorn的命令，-w指的是worker，-w后面的数字是worker数量，-b指地址，后面跟着地址信息，app:app，其中前者指的是python文件名称，我的是app.py，后者指的是Flask应用名称

配置信息编辑完成后，执行

supervisord -c /root/usr/etc/supervisord.conf

看到这里大家可能会诧异，不是supervisor吗，怎么变成supervisord了？其实supervisor是由supervisord和supervisorctl两部分命令行组成的。上面的命令行中，我们用全局的supervisord.conf配置文件执行了supervisord命令（我们全局的supervisord.conf配置文件包含了我们项目中自定义的配置文件，此时执行全局的就相当于执行了我们项目内部的配置文件） 之后执行命令

supervisorctl

此时若出现我们Flask应用的状态，则代表我们成功，如下图所示

在supervisorctl命令下，我们可以通过status命令，查看我们所有的Flask应用的当前状态，通过start + 应用名，stop + 应用名 控制某个具体的Flask应用启动还是停止。

Flask应用启动状态下，我们可以通过linux命令，验证当前Flask应用进程情况

ps aux|grep app:app

查看到如下图所示：

四.总结

以上就是本次我要和大家分享的内容，希望这篇分享能够帮助到大家(ฅ´ω`ฅ)