(本文在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處宣告：

   <style rel="stylesheet/scss" lang="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專案上線的部落格 地址

本文為個人學習記錄.