想了好久 最终还是在这里提问了,因为我毕竟是属于后端
但是实际部署的时候,就有两种情况
看到很多教程会这样推荐,就是在 Django 上集成 VUE,也就是在 settings.py 配置 templates 目录到 vue 的 dist 目录,这样可以实现,在 Django 的服务上直接调取 vue 前端,后端 api 还是使用 Django 的。
Django 自己启服务,只提供 API,VUE 自己启动服务,只提供前端
我又在想,既然前后端分离开发,那么如果按照“上 1”的方案来的话,每次前后端开发完之后,还得做单独的集成,这个时候就需要前后端一起来搞了,或者说多了一步骤,为何不直接 Django 跑自己的服务,vue 跑自己的服务,这样前后端开发完,只要接口没问题,直接就可以分别上线了,而不需要集成这一步骤。
1
mayx 2020-03-02 16:14:19 +08:00 via Android
我觉得分开好,直接上 nginx,反代 django 就 OK 了
|
2
ThirdFlame 2020-03-02 16:16:19 +08:00
同意楼上的观点。
|
3
just1 2020-03-02 16:17:24 +08:00 via Android
1 事实上在正式部署的时候是 nginx 读取你的前端静态文件,前端跟 django 没有关系,django 只是帮忙把 dist 的文件 copy 到 static
2vue 提供的服务那个是调试环境呀 |
4
GoLand 2020-03-02 16:18:16 +08:00
当然分开。不管是出于开发还是部署,都应该分开放。分开放前后端自己管理自己的代码库,也不存在代码间的相互依赖。
|
5
saulshao 2020-03-02 16:21:54 +08:00
显然分开是对的,网上的教程是为了教你怎么入门。
入门教材肯定不能讲你开发的时候准备俩虚拟机,一个起 vue,另外一个起 Django,然后后端读完数据库,切换到前端的虚拟机上去继续编界面...... 这估计读者一看就直接关了。 |
6
litp OP @just1 第一点我还真不知道,我现在的小测试环境是,集成到了 templates 之后,应该是根据 Django 的路由,走到的 vue index,所以应该是在 apache 或者 uwsgi 上,集成到了 templates 里之后,应该不会直接走 nginx 吧。
|
7
just1 2020-03-02 16:57:54 +08:00
|
8
tonytonychopper 2020-03-02 17:07:18 +08:00
分开就完事了,楼上说的对,教程只是图个方便。
|
9
ben1024 2020-03-02 17:17:08 +08:00
看渲染模式
1.模版渲染模式直接写在一起 2.spa 渲染模式分开 更喜欢模版渲染 |
10
chuanqirenwu 2020-03-02 17:23:50 +08:00 1
最好是分开,不要把 django 的模板引擎和 Vue 的模板混到一起,不然你会发现你会陷入汪洋大海。
Django 和 Vue 结合的你可以看下这个项目: https://github.com/zmrenwu/django-blog-project 大部分页面都是 django 模板引擎渲染,评论应用使用 Vue 渲染,通过 API 与后台交互。Vue 相关部分使用 Webpack 打包,通过 django-webpack-loader 读取打包后的文件。 |
11
litp OP @ben1024 看来是大佬,我刚搜了下 spa 渲染模式,应该就是指的单页面应用吧。
1. 目前来看如果将 vue 集成到 Django 之后,也是只有一个前端入口,比如 index。所以进去之后,还是走 vue 自己的路由,只不过 index 是走的 Django 路由。所以还是个单页面应用。 2.而且集成到了 Django 之后,应该是算模版渲染,可数据都是 api 来的了,感觉模版渲染的好处也用不到。 所以是不是结论还是得分开啊,这样自己搞自己的,以后 vue 转给前端也方便😂 |
12
litp OP @chuanqirenwu 感谢,看了你的 GitHub。
请问下,为什么页面渲染不完全用 vue 呢,而是要一部分使用 Django 模版,一部分使用 vue。 完全的分开前后端不是更有利于分工合作么? |
13
chuanqirenwu 2020-03-02 17:41:07 +08:00 1
@litp 一部分 django 一部分 vue 是出于 SEO 考虑。这个我一个人维护小项目,没有分离的必要,大点项目肯定是 vue + rest api。另外 Django 模版 和 Vue 配合起来非常顺畅,想怎么用完全由自己根据需求来决定就可以了。
总之遵循一个原则就行,别学网上的同时用 django 和 vue 渲染一个模板。首先是语法冲突,其次是不好维护。 |
14
chuhemiao 2020-03-02 17:43:06 +08:00
vue 放 oss 上省心省事
|
15
litp OP @chuanqirenwu 谢谢。
|
16
moonlitlaputa 2020-03-02 18:02:07 +08:00 via Android
同意 1 楼的观点
|
17
ben1024 2020-03-02 18:13:48 +08:00 1
@litp
1.spa 的集成进入 Django 是不会使用到后端路由,只是走了静态页面到访问路由,这个在 nginx 配置路由时可以设置 2.使用 template 到好处是权限控制,渲染速度,渲染方式,数据级别隐藏,跨域交互,这些优点都是隐性的(更适合展示型界面输出) 有专业的前端,或对项目本身整体性不在意,非开丢给前端也无所谓 |
18
find456789 2020-03-03 11:59:36 +08:00
可以在一个机器上, 用 docker, 一个 nginx 容器,一个 django 容器
nginx: vue 放在 www 目录下 同时 nginx 反代 django |
19
LeeReamond 2020-03-03 12:20:48 +08:00
@litp
问 LZ 个问题,大部分答案似乎都倾向于分开写。但是我感觉现在的前后端框架开发模式已经高度解耦了,比如一楼所谓的写在一起的方式是通过 webpack 配置 dist 目录来实现“写在一起”,感觉与当初的 php 那种大锅炖的模式已经完全不同了,前后端唯一耦合的地方应该就是前端的 api 指向需要指向后端的地址了吧。。 有一个问题是,你的服务部署生产环境终归还是要通过 nginx 反向代理出去用的,Django 直接暴露显然比较蛋疼一些。如果终归是要反向代理的话,那么比如说按照楼上们回答的方式,是将 node 部署的 vue serve 比如部署在 127.0.0.1:10086,而 Django 提供的 serve 在 127.0.0.1:10087,那么你总不可能用 nginx 将 10087 反代到 10086,一个端口不是只能绑一个程序么,10086 已经被 node 吃掉了。所以 node 部署的服务如果要访问 api 必须得挂 cors。本菜鸡的疑问是我感觉这不是有种脱裤子放屁的感觉么。。。 |
20
litp OP @LeeReamond
跨域是肯定的,前端不只一个 PC,还会有 APP 和 H5 呢,后端也不一定是一台服务。 我这边也不清楚 跨域 有啥不妥😂,现在前后端分开的话,跨域很正常吧。 我现在为了后续前端考虑的话,我就直接 django + vue 分开了,分开开发,分开部署,以后前端接手也好搞。 |
21
wnanbei 2020-03-03 14:06:54 +08:00
@LeeReamond 实际上用 nginx,那所有的前后端请求都是去请求 nginx,跟你前后端部署在哪个端口已经没关系了
|
22
encro 2020-03-03 14:13:33 +08:00
1,nginx 跑 vue 静态,对应根目录;
2,WSGI/ASGI + Supervisord 部署 django rest framework ; 3,nginx 代理 api 目录到 wsgi/ASGI 服务端口; |
23
LeeReamond 2020-03-03 15:01:45 +08:00
@litp
cors 我也不懂。。不过我的感觉是既然本身是作为一个安全机制专门设计出来的,然后你还非得要把它关掉,岂不是有种不识好人心的感觉,总归会有啥问题吧(大概),虽然我目前做的项目都比较菜,开全域允许 cors 也没遇到啥问题,虽说我也没遇到什么非得开 cors 不可的情况。。。。 再者还有一个问题是正常生产环境,假如说你确定我要开 cors 了,安全不安全暂且不提,你总得手调个白名单,这个也增加维护的麻烦度吧 另外前端好上手的问题。。我感觉你照这个配置方法,用 webpack 部署前端和直接部署前端解耦度没有任何区别。。你要是真的分开写是不是叫别人接手的时候他还得配置一大堆 nginx,不是配置起来更麻烦了。。。 |
24
LeeReamond 2020-03-03 15:04:24 +08:00
@wnanbei
我跟 LZ 讨论的意思是,你在服务不是直接暴露 node 而是 nginx 反代的情况下,不能实现 nginx 反代 Django 到 node 的同源,node 必须开 cors。我的疑问是我感觉这并不能增大解耦。 |
25
litp OP @LeeReamond 哦我懂你的意思了,我这样说你可能就懂了些。
1.先看开发的解耦问题 方案 1 是 可以前后端分开开发,但是最终要做集成测试,和集成之后的功能测试。 如果是方案 2,单独做各自的功能测试即可。 2.再来看部署的问题 方案 1 是一套代码走一套服务,不管是 uwsgi 也好还是其他中间件,就走一个,就可以跑整个服务 方案 2 是两个服务起步 从我的目前的理解来讲,方案 2 在人员开发、测试分配上更友好。 |
26
todd7zhang 2020-03-04 13:56:41 +08:00 1
@LeeReamond vue 那边线上跑的时候,根本是不用跑 node 的啊, 直接 nginx 访问到 vue 的 index.html 就完事了, 之后 /api 请求,由 nginx 反代到 wsgi 的端口就行了. 这样也不存在跨域的问题
server { location /api/v1 {proxy http://127.0.0.1:8080/api/v1} location / {index vue/dist/index.html} } 忙写,可能有错. 这样怎么会有跨域问题 |