從零開始搭建django先後端分離項目 系列二（項目搭建）

在開始項目以前，假設你已瞭解如下知識：webpack配置、vue.js、django。這裏不會教你webpack的基本配置、熱更新是什麼，也不會告訴你如何開始一個django項目，有需求的請百度，相關的文章已經不少了。

 下面開始一步一步構建完整的項目：

一、開發環境準備

win7 x64

python 3.4

Django 1.10.8

node.js 4.4.3

二、python相關包安裝

建議建立python虛擬環境進行安裝。

pip install virtualenv
pip install virtualenvwrapper
pip install virtualenvwrapper-win　　# Windows使用該命令

mkvirtualenv venv # 建立venv虛擬環境

推薦python相關的模塊（包括Django）都使用python自帶的pip安裝器安裝。

impyla的安裝參照個人另外一篇博文 http://www.javashuo.com/article/p-ngyluwns-w.html。

數據分析相關包pandas、numpy、scipy、matplotlib、sklearn的安裝參照個人博文 http://www.javashuo.com/article/p-yvslrebr-q.html

注意：

celery建議選擇celery3.x版本進行安裝，結合django-celery模塊。由於celery4.x版本的django-celery-beat在djang-admin後臺添加task後系統不會對修改後的任務即時生效，而是須要重啓celery-beat服務才能生效。我這個項目選擇的celery 3.1.18+django-celery 3.2.2+redis 2.10.6。

三、建立工程

建立django後端項目

django-admin startproject myproject
python manage.py startapp app

 

python manage.py runserver 0.0.0.0:8000

修改settings.py文件

TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', # 'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'DIRS': [os.path.join(BASE_DIR, 'dist'),os.path.join(BASE_DIR, 'myproject/templates')], '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', ], }, }, ]

os.path.join(BASE_DIR, 'dist')文件夾存放前端npm run build編譯後的單頁面文件

建立vue.js前端項目

利用vue-cli腳手架工具建立前端vue.js項目

 

dist文件夾爲編譯後的前端代碼，編譯成功後直接拷貝到django項目的os.path.join(BASE_DIR, 'dist')位置替換便可。

注意：

若是django後端和vue.js前端項目不在同一個域內，那麼咱們請求的數據至關因而調用的第三方接口，那麼會存在一個問題：跨域限制。

爲解決跨域問題，咱們能夠在webpack設置代理解決跨域問題，固然解決跨域問題的方法不少，不懂的請自行百度。

在config/index.js文件的dev: {   proxyTable: { }}寫入要跨域代理的連接地址：

proxyTable: { '/app/**': { target: 'http://localhost:8000', secure: false, changeOrigin: true } }

這裏本項目django與前端在同一臺開發服務器上，django啓動服務端口爲8000，因此上面target的配置爲 http://localhost:8000。