Django+vue搭建前後端分離項目
最近打算用Django+vue搭建一個個人主站,在此記錄一下搭建項目的整個過程。
一 開發環境:
騰訊雲Centos 7
Python 3.7
Django 2.1.7
vue.js 2.9.6
mysql 5.7
二 創建Django項目:
因為我的主站是要放在騰訊雲上來跑的,所以整個項目環境都應該是配在linux上的。
1.在指定路徑來創建Django項目:
命令:django-admin startproject website
2.然後cd 到項目根目錄下來創建一個app:
命令:python manage.py startapp mywebsite
這樣Django項目就創建成功了,當然,還有好多配置沒有配,不急,等我們把vue前端項目也創建完成後一起配
三 創建vue前端項目
下面來創建一個前端項目:
1.在使用vue時需要先安裝node.js:
命令:wget https://nodejs.org/dist/v8.5.0/node-v8.5.0-linux-x64.tar.gz
解壓:
命令:tar zxvf node-v8.5.0-linux-x64.tar.gz
配置node環境變量(將這兩行加到 /etc/profile中):
命令:vim /etc/profile
PATH=$PATH:/usr/local/node-v9.3.0
export PATH
重載使該文件生效:
命令:source /etc/profile
2. 創建vue項目:
cd到Django項目根目錄下:
命令:vue-init webpack myvue
myvue 是前端項目的項目名,必須要和Django的app同級才行:
創建項目時會有許多選項,一路回車+ “Y”即可。
3.安裝依賴包:
cd到vue前端項目myvue中:
安裝依賴包:npm install
4.打包vue項目(將所有東西打包成一個dist文件夾,以後的static和templates都在這裏邊):
在myvue中執行命令: cnpm run build
這樣前端vue項目創建完成:
四 整合Django和Vue
前後端項目都創建完成後我們來進行整合:
在Django項目根目錄下,有一個和項目同名的文件夾website,這個文件夾中有一個settings.py,是用來配置整個Django項目的。
1. 我們當初創建了一個mywebsite的app,現在我們要把他加到Django項目的app中來:
在settings.py中找到 INSTALLED_APPS 加上app名稱。
2. 更改數據庫,Django項目默認使用自帶的sqllit3數據庫,這裏我們要換成mysql,同樣也是在settings.py中操作:
因為我們用的是python3,python3提供操作mysql的庫是pymysql,但是Django默認的是mtsqldb,所以如果只在settings中更改數據庫,到時候項目會報錯.
還要改這裏:在和Django項目同名的文件夾下有一個__init__.py,在這個文件中加上這麽兩句:
import pymysql
pymysql.install_as_MySQLdb()
就OK了:
3.更改模板templates位置:
Django+vue搭建前後端分離項目