從零開始搭建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。

 
       

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2021 CODEPRJ.COM