从零到一 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.设置环境变量:进入系统属性设置系统变量，添加WORKON_HOME环境变量到你指定的文件夹,这里新建的文件夹。(我的话就是把这个envs文件夹添加到环境变量)

5.运行workon ,应该能看到 Pass a name to activate one of the following virtualenvs:myenv3.6 这样的输出.
更换pip国内源

直接在user目录中创建一个pip目录，如：C:\Users\xx\pip，新建文件pip.ini，内容如下
```
[global]
trusted-host =  pypi.mirrors.ustc.edu.cn
index-url = https://pypi.mirrors.ustc.edu.cn/simple
```
完整的虚拟环境安装流程可以看文档地址

2 项目流程

新建一个项目文件夹,把前后端的项目都放到该文件夹下(不放一起也无所谓,笔者习惯放一起)

(1)vue项目

新建项目

运行vue init webpack fronted 生成fronted项目名的vue项目文件,默认回车即可(eslink是es6检测es6语法格式的,test是测试的 ,这两个如果不用的话,可以选no),默认会安装 vue-router

项目中各个文件的含义该博客简单介绍了vue-cli(博客是1年前的,不过入个门还是可以的)

安装依赖

cd fronted 进入vue项目目录,运行npm install 安装依赖,会在项目目录下生成node_module文件

note : 我在安装过程中,下载chorm的插件时报错了(墙是真滴烦)

报错信息:

> chromedriver@2.33.2 install D:\study\vue\vue-devtools\node_modules\chromedriver
> node install.js
Downloading https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
ChromeDriver installation failed Error with http(s) request: Error: read ECONNRESET
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.33.2 install: `node install.js`

解决方法:

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

安装完,就可以开始vue项目的开发了.

vue开发看这篇就够了哈哈,这个博客标题够唬人的,不过我这个做后端的看完这篇文章,也觉得收获满满.

一些常用指令

npm run dev  # 在开发配置下运行vue项目
npm run start # 同上
npm run build  # 将vue项目 通过webpack打包 生成原生js,css文件,以及index.html 在会生成在dist文件

npm的使用命令大全这个博客可以看下,平时查个指令也是很方便的

在vue中使用scss

使用vue-cli搭建项目有内置的webpack方案，但是没有使用scss。vue提供了初始化的webpack模板，其中使用了vue-loader。vue-loader默认只支持sass,要是想要使用scss，必须安装node-sass和sass-loader，并修改相关webpack配置。具体操作如下:

(1)安装node-sass 和 sass-loadr
```
npm install node-sass --save-dev
npm install sass-loader --save-dev
```
note :记得要在vue项目目录下运行该指令, 这样才会在该项目中安装

(2)修改相关webpack配置 打开webpack.base.config.js, 在module里的rules中加上：
```
  {test: /\.scss$/,loaders: ["style", "css", "sass"]},
```
(3)如果要在vue文件中的style使用scss,则在 style处声明：
```
<style rel="stylesheet/scss" lang="scss"></style>
```

(2)django项目

新建django项目

解决跨域问题

开发调试时,实际上是开两个server,一个是8000端口的django server,一个是8080端口的node server

有两种解决方法,一种是在Vue.js层上做转发(proxy Table).另一种是在django层注入header.这里介绍第二种方法:

(1)安装

pip install django-cors-headers

(2)配置

#settings.py# 中间件那里添加  注意 中间件的加载顺序别弄错
MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware',**'corsheaders.middleware.CorsMiddleware',**'django.middleware.common.CommonMiddleware','django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 增加一行
CORS_ORIGIN_ALLOW_ALL = True

到这里就可以开始做django项目的开发,以及和vue项目之间的联调了.

(3)项目完成后整合

webpack 打包 vue项目

vue项目目录下 ,运行npm run build 生成webpack打包后的dist文件夹,文件夹下有static 文件夹和一个index.html

配置django 模板搜索路径和静态文件搜索路径

在django项目中新建一个fronted文件夹,并把dist文件复制到里面

#settings.py
#模板搜索路径配置
TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates',# 'DIRS': [os.path.join(BASE_DIR, 'templates')],**'DIRS': ['frontend/dist'],**'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]# 配置静态文件搜索路径
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/dist/static"),
]# 把跨域开启
CORS_ORIGIN_ALLOW_ALL = False

3 项目上线

经过整合,django项目已经基本上完成了,也可以使用runserver 运行起来了.但是生产环境不可能用runserver ,

这里我有写过一篇django项目上线的博客地址

本文为个人学习记录.