一.建立前後端專案

1.建立後端本地專案

首頁我們來建立一個虛擬環境，因為後邊的專案和案例可能比較多，這樣能夠使我們的包和環境不受影響

mengdeMacBook-Pro:Desktop meng$ mkdir myproject
mengdeMacBook-Pro:Desktop meng$ cd myproject/
mengdeMacBook-Pro:myproject meng$ virtualenv test-env

通過pip安裝django

mengdeMacBook-Pro:test-env meng$ cd bin
mengdeMacBook-Pro:bin meng$ source activate
(test-env) mengdeMacBook-Pro:bin meng$ pip install django

 

通過django-admin建立專案

(test-env) mengdeMacBook-Pro:myproject meng$ django-admin startproject case_service

網頁出現小火箭，代表django專案已經成功運行了

2.建立前端本地專案

通過npm安裝vue-cli

npm i -g vue-cli

在myproject目錄下通過vue-init建立前端專案

(test-env) mengdeMacBook-Pro:myproject meng$ vue-init webpack case_front

? Project name case_front
? Project description 前後端分離專案-前端vue專案
? Author 測試小孟
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

 

然後我們進入case_front目錄下，執行如下命令，啟動前端專案

cd case_front
npm run dev

進入http://localhost:8080檢視，出現如下倒三角，代表啟動成功

至此，我們django後端專案和vue前端專案已經建立好了，下一節我們說下通過DRF把django專案作為後端api服務，並實戰寫一個查詢用例的restful介面

歡迎關注微信公眾號【測試開發萌貨】，獲取更多測試乾貨~