Django+Vue部署

時間 2019-12-07

標籤 django+vue django vue 部署欄目 Python 简体版

原文原文鏈接

M(Django) + C(Django) + MVVM (Vue.js) = M + MVVM + C = MMVVMChtml

1、環境準備

Django3.5前端

Mysqlvue

Npm（node.js默認安裝npm）node

2、創建項目

1.建立Django項目

django-admin startproject ulb_manager
cd ulb_manager
python manage.py startapp backend

項目結構如上python

2.建立Vue.js做爲項目前端

vue-init webpack frontend

在cmd命令提示符裏輸入上面命令（ulb_manager項目文件夾中）webpack

cd frontend
npm install
npm run build

進入項目前端文件夾中，安裝npm（建議不要npm所有安裝，包很大，速度慢）web

若是npm install 過程當中出現卡頓，長時間安裝不上的狀況，建議npm使用cnpm命令代替sql

cnpm不影響原有npm命令，只不過安裝過程當中能夠走npm包在國內的鏡像，速度快不少。npm

npm install -g cnpm –registry=https://registry.npm.taobao.org

-g是說全局安裝，這樣可在任何目錄下進行安裝django

3、修改部分鏈接

1.修改路由

from django.conf.urls import url,include
from django.contrib import admin
from django.views.generic import TemplateView
import backend.urls
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
    url(r'^api/', include('backend.urls', namespace='api'))
]

找到項目根 urls.py (即ulb_manager/urls.py)，引入django的一些庫，訪問/時返回index.html

2.修改模板設置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        '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',
            ],
        },
    },
]

settings.py (ulb_manager/settings.py)，修改templates如上

3.設置靜態文件

# Add for Vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

settings.py (ulb_manager/settings.py)，增長設置靜態文件路徑

此時訪問首頁能夠看見VUE配置成功的顯示

4、配置開發環境

一、VUE環境調試

npm run dev

二、解決跨域問題

pip install django-cors-headers

Django層注入header，安裝

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

配置，注意中間件加載順序