Django+Vue部署

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

1、环境准备

Django3.5

Mysql

Npm（node.js默认安装npm）

2、创建项目

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是说全局安装，这样可在任何目录下进行安装

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

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

5、生产环境部署

本章节还未测试，请看参考文档：

http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece763105392230e54f7216695d0147dc3933fc239045c4460e9bc2421130fd7c56b6776f50f03b4e4732f77552ff5d08ed21781ac92596bcf7023706dc11f42c418dfdc4151d621e005baf34ab2edb0&p=9b70dc0e86cc41ac5bb0d62d021481&newp=9070c64ad4d011a058ee97287f6494231610db2151d0d301298ffe0cc4241a1a1a3aecbf21291705d3c0786200ab4d5de0fa3572340634f1f689df08d2ecce7e3c&user=baidu&fm=sc&query=python+vue+ulb%5Fmanager&qid=8ae9a2a900037d0f&p1=10

 

其余参考文档：

https://cloud.tencent.com/community/article/774449