从零到一 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项目

1. 新建项目

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

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

2. 安装依赖

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

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

   报错信息:

   > [email protected] 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! [email protected] install: `node install.js`
   

   解决方法:

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

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

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

3. 一些常用指令

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

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

4. 在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处声明：

(2)django项目

1. 新建django项目

2. 解决跨域问题

   开发调试时,实际上是开两个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)项目完成后整合

1. webpack 打包 vue项目

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

2. 配置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项目上线的博客 地址

本文为个人学习记录.