測試開發基礎，教你做一個完整功能的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上去找。訪問：，發現有兩個專案：一個是 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 建立的虛擬環境，以及最終建立的虛擬環境的路徑。

最後：

可以到我的個人V：atstudy-js，可以免費領取一份10G軟體測試工程師面試寶典文件資料。以及相對應的影片學習教程免費分享！其中包括了有基礎知識、Linux必備、Mysql資料庫、抓包工具、介面測試工具、測試進階-Python程式設計、Web自動化測試、APP自動化測試、介面自動化測試、測試高階持續整合、測試架構開發測試框架、效能測試等。

這些測試資料，對於做【軟體測試】的朋友來說應該是最全面最完整的備戰倉庫，這個倉庫也陪伴我走過了最艱難的路程，希望也能幫助到你！