Django+DRF+VUE前后端分离在实际项目中的应用-第一部分

一.创建前后端项目

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接口

欢迎关注微信公众号【测试开发萌货】，获取更多测试干货~