【Flask】测试平台开发实战-第一篇

 概述

提前预告下，在接下来的文章中，这里将会记录Flask框架开发一个测试平台，从0-1实战，可能有同学会问，为什么不是Django，以及FlaskAPI，因为Flask对于大多数人来说，作为入门是最合适适应一个完整的开发过程，勋勋渐进，不要着急，如果你从现在就开始从这篇文章跟随我一起实战，那么恭喜你，当我们开发结束，你已经对测试开发有了一定的基础了，可以自己尝试下开发一下自己的测试平台，如果中途有不明白，可以反复查看

技术框架

1. 后端：采用Flask框架+Mysql，使用 Blueprint 进行模块开发

2. 前端：采用vue框架

3. 目的在用实现前后端分离基础测试开发平台，方便入手学习

一、前端框架Vue和后端Flask框架介绍

依赖环境

根据自己的电脑系统自行配置安装环境，环境配置是一项基本功，这也是考验能力的一种，这里做过多的介绍~（环境搭建考验大家的动手能力，自己动手搭建，更加有成就感）

1. node npm 前端Vue运行编译环境

2. element-ui-admin 后台前端开箱即用模版

3. python3 服务开发语言环境

4. pip3 python的包管理工具

5. flask 接口开发包

6. git 代码工具

附官方地址:

1. node: http://nodejs.cn/download/

2. element-ui-admin: https://panjiachen.github.io/

3. python3: https://www.python.org/downloads/

4. pip3: https://pypi.org/project/pip/#files

5. flask: https://flask.palletsprojects.com/

6. git: https://git-scm.com/downloads

二、初始化前端框架部分

Vue 是一个很容易入手开发的框架，element-ui是饿了么团队基于vue封装一个UI框架，然后element-ui-admin又是一位叫PanJiaChen基于前边开发的一个开箱即用的后台模版框架，反正我们是得益于这些大牛们的无私贡献，让我们自己开发个平台没有像以前那么难了。

打开终端，检查前端依赖环境

 node --version
 npm -version

下面是我自己电脑上的nodejs环境

此时我们的环境已经没问题了，接下来我们需要再自己本地创建一个文件夹来保持和拉取代码，将我们的代码存储在这个文件夹，也就是我们常说的你的本地工作空间（workspace）根据你自己的电脑磁盘为，创建即可

比如我这里我是在D盘下创建了一个名叫vue_workapsce文件夹，将代码拉取后保存在这里

步骤

1、切换到代码保存路径-->下载代码--->2、并进入项目目录

拉取代码的过程中可能会有点慢，请耐心等待下载完成

 git clone https://github.com/PanJiaChen/vue-element-admin.git 
 cd vue-element-admin

安装依赖, 直接用国内镜像, 解决外网超时或者慢问题

 npm install --registry=https://registry.npm.taobao.org

启动服务

 npm run dev

以下是我们启动成功后会看的效果

如果没有环境和编译错误的话，就可以看到控制台输出的地址，浏览器访问即可，默认是 http://localhost:9527 会看到登录界面，然后输入任意用户名和密码就看主界面了，如图：

为什么端口是9527，别问为什么，王八规定的，直接使用就行，开发环境调试就是如此

那么很简单一个开箱即用的后台就配置初始化起来了，这里说明的是目前数据都是框架自己mock的，所以并没有实际后端服务的数据。

初始化后端服务

Python flask 一个web微框架，这里我们用来实现resful api服务，其实现在一些项目用的是tornado, 不过想了想还是用flask，其一因为我本身没有用，所以当成一个学习机会，其二说到另一个项目后端服务是要用Spring boot, 在接口路径实现（controller) 都是类似注解的方式，所以在过度学习的时候会容易些。下面依然不借助任何高级IDE，硬编码实现个最简单的接口

安装依赖包

 pip3 install -U flask

这里我们以最简单的方式，直接通过pycharm创建Flask项目，默认会生成如下代码，当然如果你想要自己手写，那么看你自己意愿（注意：通过PyCharm创建Flask项目，以及后续我们可能会说的Django项目，都是需要PyCharm专业版的IDE才可以）

from flask import 
Flaskapp =Flask(__name__)
@app.route("/api/hello")
def hello():
    return "Hello,World!"
if__name__=="__main__":
app.run(debug = True)

运行代码

 python app.py

正常运行截图，运行后如果没看到截图中的效果，那么启动后端服务师失败的

没有手误单词或者语法错误的话，就能看到正常debug模式启动了，我们可以通过浏览器直接访问 http://127.0.0.1:5000/api/hello 或者用curl命令行测试

均能看到返回 Hello, World! 至此前后端服务也初始化并启动完成。