vue+flask前后端分离开发深度学习网页应用

0.需求

需要将深度学习算法Demo做成可以用来展示的网页应用

1.技术栈

前端：

• 框架：Vue
• UI库：Bootstrap

后端：

• 开发语言：Python
• REST API： flask

2.前端

2.1环境搭建

因为选择使用Vue来作为开发的框架，我们需要安装Node.js

# 官方安装教程：https://github.com/nodesource/distributions


# 或者从安装仓库安装
sudo apt update
sudo apt install nodejs
# 安装npm管理工具
sudo apt install npm 
# 升级node版本为长服务版（lts）
sudo npm install -g n
sudo n lts 
sudo n #将显示本机的可用版本列表，通过上下键来选择对应的版本
#可直接指定版本
sudo n 10.xx.x
#查看node版本
sudo n -v
# 升级npm
sudo npm i -g npm

检查Node.js和NPM安装情况

# 出现相应版本号即为安装成功
node -v
npm --version

切换NPM源为淘宝源

npm config set registry https://registry.npm.taobao.org

# 检测源是否已经配置成功
# 返回https://registry.npm.taobao.org，说明源切换到淘宝成功
npm config get registry

安装Vue脚手架

npm install --global vue-cli
# 指定版本
npm install --global vue-cli@2.9.3

# 安装完成验证
vue -V

进入项目文件夹，初始化项目

# 运行脚手架初始化项目
vue init webpack

# 下面会遇到一些选择
# Generate project in current directory? (Y/n)                 ---选y
# Generate project in current directory? (Y/n)                 ---选y
# Project name (my-first-project)                              ---输入自己的项目名称
# Author (name)                                                ---输入自己的名字
# Vue build (Use arrow keys)                                   ---选择第一个推荐的
# Install vue-router? (Y/n)                                    ---选y
# Use ESLint to lint your code? (Y/n)                          ---代码风格检查，必须选y
# Pick an ESLint preset (Use arrow keys)                       ---选择第一个标准模板
# Set up unit tests (Y/n)                                      ---选y
# Pick a test runner (Use arrow keys)                          ---选择默认的Jest
# Setup e2e tests with Nightwatch? (Y/n)                       ---端到端测试，选n
# Should we run `npm install` for you after the project has been created?   ---选Yes，use NPM

# 等项目初始化结束后，运行项目
npm run dev

2.2前端开发

开发使用的IDE推荐使用Webstorm，安装Webstorm最好使用JetBrains Toolbox来安装，这是官方的管理工具，安装后直接点击安装Webstorm

相关格式化配置可以看这里

引入JQuery，Bootstrap，Popper参见这里

下面进行原型设计，组件开发。

2.3遇上的问题

1. 上传图片时使用了bootstrap-fileinput插件，引入中文包和主题包，遇上了以下错误 Cannot read property ‘fn’ of undefined，原因是在中文包和主题包内最后使用jQuery时使用的是window.jQuery，而我们在引入jQuery时并未定义，所以解决方案时在build文件夹下的webpack.base.conf.js文件中作出如下修改

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common'),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',          # 加入这一行
      Popper: ['popper.js', 'default']
    })
  ]

2. 在图片预览时，尝试了两个插件，一个是vue2-viewer，一个是v-viewer，使用时,vue2-viewer在查看大图时出现了一点问题，所以最后选择了v-viewer，使用方法见官方

3后端

3.1虚拟环境搭建

我们的后端代码（包括深度学习代码）需要在虚拟环境中运行，用Anaconda创建一个python版本为3.6的虚拟环境

conda create -n your-project-name python=3.6
conda activate your-project-name # 激活环境

同样IDE选择为JetBrains家族的Pycharm，同样是用上面提到的ToolBox来安装比较方便。

3.2RESRful API

后端开发语言我们选择了Python，框架选择轻量级的flask框架进行开发
构建RESTful API，这里用到了flask的拓展flask_restful，flask_restful的官方教程在这里，根据教程可以写出较为简单的后台API，我的后端如下，提供了四个API供前端调用。

3.3遇上的问题

1. 处理跨域问题
   在app.py中加入如下代码

from flask_cors import CORS

CORS(app, supports_credentials=True) # 用于处理跨域问题

2. 因为后端代码需要运行我们的深度学习项目的代码，在API中调用命令行，这里使用了python较新的subprocess模块来代替老的os.system和os.spawn*
   官方文档点击这里
3. bootstrap-fileinput的后端接受图片代码如下

from flask_restful import Resource, reqparse
from werkzeug.datastructures import FileStorage

class Upload(Resource):
    def post(self):
        parser = reqparse.RequestParser()
        parser.add_argument('uploadImg', type=FileStorage, location='files')
        args = parser.parse_args()
        uploadImg = args['uploadImg']
        # uploadImg = args.get('uploadImg') 好像两种写法都可以
        uploadImg.save('../license_plate_wpod/samples/uploadImg/uploadImg.jpg')

4. 返回本地图片到前端

from flask_restful import Resource
from flask import Response


class CarImg(Resource):
    def get(self):
        imgPath = '../license_plate_wpod/samples/outputImg/uploadImg_car.jpg'
        with open(imgPath, 'rb') as f:
            carImg = f.read()
        resp = Response(carImg, mimetype='image/jpeg')
        return resp

6. 运行后端服务器时，如果你运行结束又在未关闭IDE的情况下再次运行，会遇上5000端口被占用的情况，这个时候可以选择

• 关闭IDE，然后重新启动，再次运行
• 杀死端口为5000的进程，然后再次运行

# 查询5000端口被什么进程占用
lsof -i:5000
# 记住进程的PID，结束这些进程
kill -9 [PID]

4前后端交互

在Vue中我们使用vue-axios来代替ajax，安装使用见vue-axios安装，axios具体使用

PS：
项目还有些很多需要完善的地方，博客仅仅作个简单的备忘录，写的会比较粗糙，若有人需要源码可以告诉我。