django和vue整合

Django和vue整合

Django和vue搭配实现前后端分离，区别于传统的web开发，提高了效率，让后端人员更专注于后端开发，让前端人员更专注于前端开发。

整合步骤如下：

一、创建django项目

1.django-admin startproject test_django

这里我们创建了名为test的项目

2.python manage.py startapp test_app

这里我们创建了名为test_app的app

二、在django项目中创建vue项目，进行打包

1.vue init webpack vue_app

这里我们创建了名为vue_app的脚手架

2.npm run build

这里对vue项目打包，会生成一个dist文件，其目录下有static，以及html文件。

三、修改django配置文件

1.修改TEMPLATES

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'DIRS':['vue_app/dist'],  # 该目录是vue项目的名称
        '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',
            ],
        },
    },
]

说明：这里将dirs替换为vue中的存放html的目录，可以用存放到template中

2.修改静态文件STATICFILES_DIRS

# 静态文件
STATICFILES_DIRS = [

    # 替换反斜杠
    os.path.join(BASE_DIR, 'vue_app/dist/static').replace('\\', '/')
]

说明：将静态文件目录替换成vue下的静态文件

3.修改urls

这里使用TemplateView模板类视图，参数为模板html字符串template_name

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',TemplateView.as_view(template_name='index.html'))
]

四、测试

最后启动django项目

python manage.py runserver

成功的话会出现下面