django rest framework 与 Vue 整合遇到的坑
前提是已经有了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 整合遇到的坑的更多相关文章
- 基于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 ...
- Django REST framework+Vue 打造生鲜超市(一)
一.项目介绍 1.1.掌握的技术 Vue + Django Rest Framework 前后端分离技术 彻底玩转restful api 开发流程 Django Rest Framework 的功能实 ...
- Django REST framework+Vue 打造生鲜超市(三)
四.xadmin后台管理 4.1.xadmin添加富文本插件 (1)xadmin/plugins文件夹下新建文件ueditor.py 代码如下: # xadmin/plugins/ueditor.py ...
- Django REST framework+Vue 打造生鲜超市(四)
五.商品列表页 5.1.django的view实现商品列表页 (1)goods/view_base.py 在goods文件夹下面新建view_base.py,为了区分django和django res ...
- Django REST framework+Vue 打造生鲜超市(五)
六.商品类别数据展示 6.1. 商品类别数据接口 (1)商品分类有两个接口: 一种是全部分类:一级二级三级 一种是某一类的分类以及商品详细信息: 开始写商品分类的接口 (2)序列化 给分类添加三级分类 ...
- Django REST framework+Vue 打造生鲜超市(十二)
十三.首页.商品数量.缓存和限速功能开发 13.1.轮播图接口实现 首先把pycharm环境改成本地的,vue中local_host也改成本地 (1)goods/serializer class B ...
- Vue+Django REST framework打造生鲜电商项目
1-1 课程导学 2-1 Pycharm的安装和简单使用 2-2 MySQL和Navicat的安装和使用 2-3 Windows和Linux下安装Python2和Python3 2-4 虚拟环境的安装 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝
web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
随机推荐
- 协议—IIC
I2C总线支持任何IC生产过程NMOS CMOS双极性,两线――串行数据 SDA 和串行时钟SCL线在连接到总线的器件间传递信息,每个器件都有一个唯一的地址识别,无论是微控制器.LCD 驱动器.存储器 ...
- 漫谈golang之fmt格式化模块
fmt 漫谈 Go Walkthrough: fmt fmt常用的格式化字符串 %v 是个通用的占位符.它会自动将变量转换为默认格式的字符串,这在打印字符串或数字等原语时非常有用,而且不需要特定的选项 ...
- Dockerfile 时区设置
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc/timezo ...
- crontab的使用笔记
1 crond简介crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动cron ...
- Java 容器源码分析之 LinkedList
概览 同 ArrayList 一样,LinkedList 也是对 List 接口的一种具体实现.不同的是,ArrayList 是基于数组来实现的,而 LinkedList 是基于双向链表实现的.Lin ...
- [转]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 ...
- [转]laravel DB类SQL语句操作(CURD)
本文转自:https://blog.csdn.net/woshihaiyong168/article/details/52992812 版权声明:本文为勇哥原创文章,转载请注明出处哦!!! https ...
- 第一册: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 ...
- 第一册: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 ...
- c# 怎么读取web.config中的配置项
ConfigurationManager.AppSettings["templateId"]