目前,前后端分离的开发方式越发常见,已成为主要开发方式,那么django作为一个python快速开发中小型web端最常见的框架,django虽然也有自己前端模板,但是毕竟不是很好,而且写在一起,也不符合开发方式。下面记录一下,如果将django与vue结合,实现前后端分离。
环境: python3.6
django2.0
npm 5.6.0
vue 2.9.3
在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页面 ]
python manage.py runserver
好的。到此,就成功的将vue集成到django中了。以后自行继续不断晚上前端,也可以由专业前端人员来完成,最后合到项目内。