Django+Vue部署原

晓歌

发布于 2018-08-15 12:38:59

9910

发布于 2018-08-15 12:38:59

文章被收录于专栏：破晓之歌

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

一、环境准备

Django3.5

Mysql

Npm（node.js默认安装npm）

二、建立项目

1.创建Django项目

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

项目结构如上

2.创建Vue.js作为项目前端

vue-init webpack frontend

在cmd命令提示符里输入上面命令（ulb_manager项目文件夹中）

cd frontend
npm install
npm run build

进入项目前端文件夹中，安装npm（建议不要npm全部安装，包很大，速度慢）

如果npm install 过程中出现卡顿，长时间安装不上的情况，建议npm使用cnpm命令代替

cnpm不影响原有npm命令，只不过安装过程中可以走npm包在国内的镜像，速度快很多。

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

-g是说全局安装，这样可在任何目录下进行安装

三、修改部分连接

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配置成功的显示

四、配置开发环境

1、VUE环境调试

npm run dev

2、解决跨域问题

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

配置，注意中间件加载顺序