從零到一 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
-
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
安裝virtualenv2.cd到想安裝的目錄,執行
virtualenv -p python3.6 myenv3.6
(筆者一般是建立一個envs資料夾,專門放虛擬環境的檔案包)3.執行
pip install virtualenvwrapper-win
安裝virtualenvwrapper4.設定環境變數:進入系統屬性設定系統變數,新增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的外掛時報錯了(牆是真滴煩)
報錯資訊:
> [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開發看這篇就夠了 哈哈,這個部落格標題夠唬人的,不過我這個做後端的看完這篇文章,也覺得收穫滿滿.
-
一些常用指令
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專案上線的部落格 地址
本文為個人學習記錄.