前提是已经有了Django项目与前端Vue打包好的dist文件

好,开始整合!!!

当然还是先设置Django的setting.py

1设置模板路径

2 设置静态文件路径

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['appfront/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',
],
},
},
] ######静态文件路径#####
STATIC_URL = '/static/' #注意是static
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'appfront/dist/static/'),)

然后设置路由了

由于drf使用路由注册,所以不能跟往常那样匹配路由设置

router = DefaultRouter()
router.register(r'backend/video_list', VideosViewset, base_name='video_list')
router.register('backend/create_lunbo', LunboViewset, base_name='create_lunbo') urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html')),#####千万记住,别写东西,要不然只走后端,不走前端路由
re_path(r'create_lunbo/media/images/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),
]
urlpatterns += router.urls

注意是使用

urlpatterns += router.urls

来是路由生效。  前端的index.html是通过

TemplateView.as_view(template_name='index.html')

加载静态index文件,好了,这样就实现相结合了。

django rest framework 与 Vue 整合遇到的坑的更多相关文章

  1. 基于Django rest framework 和Vue实现简单的在线教育平台

      一.基于api前端显示课程详细信息 1.调整Course.vue模块 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 ...

  2. Django REST framework+Vue 打造生鲜超市(一)

    一.项目介绍 1.1.掌握的技术 Vue + Django Rest Framework 前后端分离技术 彻底玩转restful api 开发流程 Django Rest Framework 的功能实 ...

  3. Django REST framework+Vue 打造生鲜超市(三)

    四.xadmin后台管理 4.1.xadmin添加富文本插件 (1)xadmin/plugins文件夹下新建文件ueditor.py 代码如下: # xadmin/plugins/ueditor.py ...

  4. Django REST framework+Vue 打造生鲜超市(四)

    五.商品列表页 5.1.django的view实现商品列表页 (1)goods/view_base.py 在goods文件夹下面新建view_base.py,为了区分django和django res ...

  5. Django REST framework+Vue 打造生鲜超市(五)

    六.商品类别数据展示 6.1. 商品类别数据接口 (1)商品分类有两个接口: 一种是全部分类:一级二级三级 一种是某一类的分类以及商品详细信息: 开始写商品分类的接口 (2)序列化 给分类添加三级分类 ...

  6. Django REST framework+Vue 打造生鲜超市(十二)

    十三.首页.商品数量.缓存和限速功能开发  13.1.轮播图接口实现 首先把pycharm环境改成本地的,vue中local_host也改成本地 (1)goods/serializer class B ...

  7. Vue+Django REST framework打造生鲜电商项目

    1-1 课程导学 2-1 Pycharm的安装和简单使用 2-2 MySQL和Navicat的安装和使用 2-3 Windows和Linux下安装Python2和Python3 2-4 虚拟环境的安装 ...

  8. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

  9. web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍

    web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...

随机推荐

  1. 协议—IIC

    I2C总线支持任何IC生产过程NMOS CMOS双极性,两线――串行数据 SDA 和串行时钟SCL线在连接到总线的器件间传递信息,每个器件都有一个唯一的地址识别,无论是微控制器.LCD 驱动器.存储器 ...

  2. 漫谈golang之fmt格式化模块

    fmt 漫谈 Go Walkthrough: fmt fmt常用的格式化字符串 %v 是个通用的占位符.它会自动将变量转换为默认格式的字符串,这在打印字符串或数字等原语时非常有用,而且不需要特定的选项 ...

  3. Dockerfile 时区设置

    RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc/timezo ...

  4. crontab的使用笔记

    1 crond简介crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动cron ...

  5. Java 容器源码分析之 LinkedList

    概览 同 ArrayList 一样,LinkedList 也是对 List 接口的一种具体实现.不同的是,ArrayList 是基于数组来实现的,而 LinkedList 是基于双向链表实现的.Lin ...

  6. [转]How to Add Bootstrap to an Angular CLI project

    本文转自:https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ In this article we w ...

  7. [转]laravel DB类SQL语句操作(CURD)

    本文转自:https://blog.csdn.net/woshihaiyong168/article/details/52992812 版权声明:本文为勇哥原创文章,转载请注明出处哦!!! https ...

  8. 第一册:lesson ninety-three。

    原文:  our new neighbor. Nigel is our new next-door neighbor. He is a pilot. He was in the R.A.F. He w ...

  9. 第一册:lesson thirty nine.

    原文: Don't drop it! A:What are you going to do with that vase,Penny? B:I am going to put it on the ta ...

  10. c# 怎么读取web.config中的配置项

    ConfigurationManager.AppSettings["templateId"]