手把手教你做测开：开发Web平台之环境准备_测开平台

前言

如今的测试行业，各种测试平台盛行，比如自动化的有接口自动化平台、UI自动化平台、Mock平台、造数平台，性能方面的还有压测平台、监控平台。

这些平台一方面大大解放了功能测试的双手，提高了测试效率，同时也成为测试人员升职加薪的筹码。因此，学习并掌握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
1
2
3
4
5
6
7
8
9
10
11

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

npm：6.14.4
1

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

工程搭建

前端工程的搭建

在电脑的任意一个盘下（我选的是D盘）创建一个web-development的空目录。

前端的框架我们使用现成的，直接去gitee上去找。

访问：https://gitee.com/panjiachen，发现有两个项目：一个是vue-element-admin，另一个是vue-admin-template。

第一个项目比较全面，里面非常多的组件，作者不建议直接在上面做二次开发，因此提供了第二个项目，这个是前者的极简版，我们今天使用的是第二个。

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

后端工程的搭建

同样是在web-development目录下，打开cmd，使用命令django-admin startproject 命令创建后端工程，我们的后端工程名叫backend。

运行完成后发现目录下多了一个backend目录，这个就是自动生成的后端工程。

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

依赖安装

前端依赖的安装

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

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

后端依赖的安装

后端建议使用pipenv创建虚拟环境来做环境隔离，pipenv的安装使用方法可以百度，这里直接讲怎么创建虚拟环境。

进入虚拟环境安装我们需要的依赖包，首先进入backend目录，使用pipenv install创建一个虚拟环境。

创建的过程中会提示我们使用哪个版本的Python创建的虚拟环境，以及最终创建的虚拟环境的路径。

在PyCharm Settings中将Python解释器设置为虚拟环境中的Python。

安装依赖，使用pipenv shell进入虚拟环境，你可以使用pip install依次安装上述的每个依赖包，还可以选择在backend目下新建一个requirement.txt存放所有的依赖，然后使用pip install -r requirement.txt一键安装。

配置并启动服务

前端服务配置及启动

在PyCharm中，有个Add Configuration是配置服务的入口，点击它。

在配置中点“+”，然后在服务列表中选择“npm”。

我们给前端服务起个名字叫frontend，然后package.json选择vue-admin-template目录下的package.json路径，Scripts选择dev。

保存后，尝试启动前端服务。一般情况下，启动成功的标志是下方有App running at…这行时表示启动成功，下方的http://localhost:9529/是前端访问地址,打开这个地址可以看到前端web网页。

后端服务配置及启动

同样是点 “+”，只不过这次选的服务是Django server。

后端服务起个名字叫backend，Working directory是工作目录，选择我们的后端目录backend路径。

需要注意的是需要点击Fix，配置一下后端工程的Django支持。

点击Fix后，进入Django支持的配置页面，需要勾选Enable Django Support，Django project root的目录选择后端工程目录backend的路径，Settings选择backend下的settings.py。

上述的配置保存之后，点击运行backend服务，如果看到Starting development server at http://127.0.0.1:8000/，说明服务已经生效了。

后端创建子应用

后端backend工程下可以创建多个子应用，每个子应用都有对应的功能,你的项目复杂度决定了你有多少个子应用。

假设我们要做一个图书展示的Web项目，我们这个项目先创建2个子应用，一个是user_auth，用于用户的登录认证，一个是book，用于处理我们从某瓣上爬取下来的图书信息的数据。

创建user_auth子应用

在backend目录下，执行命令python manage.py startapp userauth，执行完成后可以看到backend目录下，多了一个userauth的子应用。

这个子应用的model.py是用于编写模型类，views.py是用于编写视图类，我们可以在下面创建一个urls.py用来存放子应用的路由信息。

在settings.py的配置文件中需要将子应用userauth配置INSTALLED_APPS列表中。

创建book子应用

book子应用的创建方法同user_auth一致，同样最后也要将子应用book配置到配置文件中。

后端Rest Framework及数据库配置

Rest Framework配置

之所以使用Rest Framework，是因为它足够强大，它可以做认证鉴权、统一参数处理、异常处理、查询过滤、序列化反序列化等很多功能，如果只是单纯使用Django开发，可能代码量要多很多。

我们在上面安装依赖包的时候，实际上已经安装了Django Rest Framework，这时候只需要将Rest Framework作为一个子应用配置在settings.py中的INSTALLED_APPS即可。

数据库配置

settings.py中的数据库配置默认是sqlite，因此需要配置下MySQL。可以先创建一个MySQL的数据库，名字就叫web-development。

然后在settings.py中配置DATABASES。

 DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': BASE_DIR / 'db.sqlite3',
    # }
    'default': {
        # 指定引擎
        'ENGINE': 'django.db.backends.mysql',
        # 指定数据库名称
        'NAME': 'web-development',
        # 数据库用户名
        'USER': 'root',
        # 数据库用户密码
        'PASSWORD': '123456',
        # HOST
        'HOST': 'localhost',
        'PORT': 3306,
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

最后： 可以在公众号：伤心的辣条 ！ 自行领取一份216页软件测试工程师面试宝典文档资料【免费的】。以及相对应的视频学习教程免费分享！，其中包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。

学习不要孤军奋战，最好是能抱团取暖，相互成就一起成长，群众效应的效果是非常强大的，大家一起学习，一起打卡，会更有学习动力，也更能坚持下去。你可以加入我们的测试技术交流扣扣群：914172719（里面有各种软件测试资源和技术讨论）

喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！