从零到一 django + vue 构建前后端分离项目

(本文在win10环境下进行)

django 和 vue 的优点

• django的python血统,开发起来基本上是站在巨人的肩膀上,用起来顺手,加上drf这个restful API 框架,SaltStack、Ansible可做配置管理,celery做任务队列,还有它的orm…

• vue 数据双向绑定,组件化开发,国人开发维护,看文档学起来方便,学习曲线平滑

  (哈哈,笔者前端很弱,只能选个简单的来入门)

django 和 vue 怎么结合起来

选择了Vue.js的前端渲染，自然放弃了Django的后端模板引擎渲染。

保留了Django的 Controller (URLconf) 来实现前端路由的父级路由，可以达到不同页面使用不同的前端框架， 页面内部使用各自独有的前端路由的效果.

保留了Django的 Model ，Django的ORM好用，而且可以配合Django Admin。

1 环境搭建

(1) node.js 环境的搭建

• node.js安装

  可以从Node.js官网下载对应平台的安装程序,网速慢的话,去网盘下载下载地址

  在windows上安装务必选择全部组件, 记得勾选add to path

  安装完成后 ,打开cmd, 输入 node -v,如果安装正常,应该能看到v7.6.0 这样的输出

• npm 安装

  npm是node.js的包管理工具, 在用node.js开发时,要用到别人写的包,可以直接用npm来进行下载

  npm实际上在安装node.js过程中顺带已经装好了,在终端输入npm -v,应该可以看到4.1.2 这样的输出

• nrm安装

  nrm的作用 实际上提供了最常用的npm包镜像地址(类似于python包的豆瓣源,清华源),能够快速切换下载安装包的服务器地址.

  1.运行npm i nrm -g 全局安装nrm包

  2.使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；

  3.使用nrm use npm或nrm use taobao切换不同的镜像源地址；

  (我是直接使用了淘宝的镜像源地址,毕竟我在杭州,哈哈)

• cnpm 安装

  cnpm 也是从国内的服务器来下载包,实际上装了nrm,可以不用再装cnpm.

  运行npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装cnpm

• vue-cli 安装

  vue-cli是快速创建一个vue项目的脚手架,介绍请自行谷歌

  运行npm install -g vue-cli 全局安装vue-cli

(2)python 环境的搭建

• python 安装

  可以从python官网 下载对应平台的安装程序,也可以网盘下载

  在windows上安装, 记得勾选add to path

• python虚拟环境工具安装

  1.运行pip install virtualenv 安装virtualenv

  2.cd到想安装的目录,运行virtualenv -p python3.6 myenv3.6(笔者一般是创建一个envs文件夹,专门放虚拟环境的文件包)

  3.运行pip install virtualenvwrapper-win 安装virtualenvwrapper

  4.设置环境变量:进入系统属性设置系统变量&#