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

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

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

1、開發環境准備

win7 x64

python 3.4

Django 1.10.8

node.js 4.4.3

2、python相關包安裝

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

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

mkvirtualenv venv # 創建venv虛擬環境

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

impyla的安裝參照我的另一篇博文 https://www.cnblogs.com/dotafeiying/p/6956265.html。

數據分析相關包pandas、numpy、scipy、matplotlib、sklearn的安裝參照我的博文 https://www.cnblogs.com/dotafeiying/p/9674806.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。

3、創建工程

創建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。