django集成vue，实现前后端分离开发

目前，前后端分离的开发方式越发常见，已成为主要开发方式，那么django作为一个python快速开发中小型web端最常见的框架，django虽然也有自己前端模板，但是毕竟不是很好，而且写在一起，也不符合开发方式。下面记录一下，如果将django与vue结合，实现前后端分离。

环境： python3.6

django2.0

npm 5.6.0

在django的开发中，就可以直接建立一个api的app，用来专门写接口，可以使用django的rest-framework，这样作为一个后端，前端就用vue。要在django中集成vue的步骤如下：

1. 首先，前提条件：

你需要有一个django项目：

可以自己新建，也可以是已有的。这里就不讲怎么创建django项目了。包括django的安装什么的，这里不详细说明

你需要安装有vue。并且安装vue-cli。

安装:

① 首先安装node.js，官网地址：https://nodejs.org/zh-cn/download/

下载安装包，直接安装

② 使用npm淘宝镜像，避免npm下载速度过慢的问题

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

③ 使用cnpm 下载vue-cli

cnpm install -g vue-cli

2. 在django项目中创建vue项目

首先，进去django项目的项目目录中，执行：

vue-init webpack frontend    ## frontend为前端项目的名称，可自定义。创建的项目会跟django中的app一样的目录登记。类似一个前端app一样。

在创建时，会弹出很多选择项，根据自己需求自定义修改。也可以全部回车，使用默认的。这里我就直接全部回车。

3。编写vue前端项目，直接编写就是，调试则可以执行。也可先不编写，跳过这一步

cd frontend         ## 进入到上一部创建的frontend项目中
cnpm install        ## 安装需要的依赖模块
cnpm run dev        ## 运行调式的服务，会启动一个web服务，访问localhost:8080 即可调式

4. vue项目写完后，打包vue项目，然后修改django配置，将vue集成到django中。

cnpm run build        ## 打包vue项目，会将所有东西打包成一个dist文件夹

修改django的settings文件：

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


STATICFILES_DIRS = [             ## 添加静态文件路径
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

修改django的主目录的urls文件：

from django.contrib import admin
from django.views.generic.base import TemplateView
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name="index.html")),    ## 这里将url的根路径指向vue中的index页面
]

5. OK，到此，启动django服务，访问localhost:8000 则可以出现vue的首页。

python manage.py runserver

好的。到此，就成功的将vue集成到django中了。以后自行继续不断晚上前端，也可以由专业前端人员来完成，最后合到项目内。

django集成vue，实现前后端分离开发

猜你喜欢