测试开发基础，教你做一个完整功能的Web平台之环境准备

前言

如今的测试行业，各种测试平台盛行，比如自动化的有接口自动化平台、UI自动化平台、Mock平台、造数平台，性能方面的还有压测平台、监控平台。加我VX：atstudy-js 回复“测试”，进入 自动化测试学习交流群~~

​这些平台一方面大大解放了功能测试的双手，提高了测试效率，同时也成为测试人员升职加薪的筹码。因此，学习并掌握Web平台的开发还是很有必要的。

说到Web平台，很多人第一印象就是头疼的html、css、JavaScript、jquery，这些东西难道要一个个手动来敲吗？样式要一个个手动来调吗？做出来的东西很丑陋怎么办？

如果现在对你说，远没有你想象的那么复杂，Vue和Element UI中有很多美观方便的前端组件供我们使用，复制粘贴改改逻辑就行，你只需要做一个CV工程师，那么何不一起来试试！

授人以鱼不如授人以渔，这几篇文章不会教你做个完整功能的Web平台出来，但会将比较基础且核心的技术传递给你。

有了这个基础，你可以游刃有余的在这个地基上修建你的高楼大厦，前端组件何其多，想用哪个用哪个，而对于后端，无非就是使用Django和Rest Framework定义CURD的接口，写得多了自然会熟能生巧。

环境准备

后端采用的是Django+Rest Framework+MySQL架构，因此需要安装如下版本的软件和包：

#软件

python：3.7

mysql：5.7.19

git：2.26.1

#python包

Django：3.2.9

django-filter：21.1

djangorestframework：3.12.4

djangorestframework-simplejwt：5.0.0

django-cors-headers：3.11.0

mysqlclient：2.0.3

前端使用的是Vue+Element UI，因此先要安装npm：

npm：6.14.4

此外你还需要一个Python IDE，如PyCharm或VSCode。

三. 工程搭建

(一). 前端工程的搭建

1、在电脑的任意一个盘下(我选的是 D 盘)创建一个 web-development 的空目录。

2、前端的框架我们使用现成的，直接去gitee上去找。访问：https://gitee.com/panjiachen，发现有两个项目：一个是 vue-element-admin，另一个是 vue-admin-template，第一个项目比较全面，里面非常多的组件，作者不建议直接在上面做二次开发，因此提供了第二个项目，这个是前者的极简版，我们今天使用的是第二个。

3、进入 web-development 目录，使用 git clone 将第二个前端项目模板克隆下来。

(二). 后端工程的搭建

1、同样是在web-development目录下，打开cmd，使用命令django-admin startproject命令创建后端工程。我们的后端工程名叫backend。运行完成后发现目录下多了一个backend目录，这个就是自动生成的后端工程。

2、使用 pycharm 打开 web-development 工程，可以看到前后端工程都加载出来了。

四. 依赖安装

(一). 前端依赖的安装

1.进入前端目录vue-admin-template下，所有前端的依赖都放在该目录下的package.json文件中，我们使用npm install安装所有依赖(注意：作者不建议使用cnpm install安装，因为会出现一些奇奇怪怪的问题，如果npm install安装比较慢，可以换一个淘宝镜像)。

2、安装完成后，如果没有报错，会出现提示，added xxx packages from xxx contributors in xxx。

(二). 后端依赖的安装

1、后端建议使用 pipenv 创建虚拟环境来做环境隔离，pipenv 的安装使用方法可以百度。这里直接讲怎么创建虚拟环境，进入虚拟环境安装我们需要的依赖包。首先进入backend 目录，使用 pipenv install 创建一个虚拟环境。创建的过程中会提示我们使用哪个版本的 python 创建的虚拟环境，以及最终创建的虚拟环境的路径。

添加微信：atstudy-js  或者扫描下方二维码，备注“博客”邀请你进入Python自动化测试学习交流群~