Django+DRF+VUE前后端分离在实际项目中的应用,免费分享,它不香吗?

Django+DRF+VUE前后端分离在实际项目中的应用,免费分享,它不香吗?_第1张图片

一.创建前后端项目

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项目已经成功运行了

Django+DRF+VUE前后端分离在实际项目中的应用,免费分享,它不香吗?_第2张图片

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+DRF+VUE前后端分离在实际项目中的应用,免费分享,它不香吗?_第3张图片

至此,我们django后端项目和vue前端项目已经创建好了,下一节我们说下通过DRF把django项目作为后端api服务,并实战写一个查询用例的restful接口

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

你可能感兴趣的:(测试开发,django,vue.js,python)