我试图使用WebSocket和Django Channels Vue.js制作类似Trello的看板


我在练习Channels和Vue.js之后尝试实现看板。我自己发布了相同的内容，但我认为关于Channels本身的信息很少，因此我会将其发布在Qiita上进行共享。

712604e4f8a8a88317919c6ae4850b59.gif

https://github.com/denzow/channel-kanban

有一篇关于看板的UI的文章，但是几乎没有包括服务器端在内的信息，并且可能与WebSocket同步，这可能有点不寻常。

注意

由于仅实现了类似于看板一样移动的部分，因此它不包括最初需要的登录和用户管理。同样，卡内容的编辑未实现。请四处走走玩。

如果暂时尝试

克隆

存储库后，只需docker-compose up即可。之后，您可以通过从浏览器访问http://localhost:8000/kanban/1来尝试看板。您可以通过在最后更改ID来创建新的看板。

关于使用的版本

主要组件版本为：

  • Python 3.6.4
  • 的Django 2.0.3
  • DjangoChannels 2.0.2
  • Vue.js 2.5.16
  • vuedraggable 2.16.0
  • vuex 3.0.1

关于配置

如下所示，此存储库启动多个容器。

https://github.com/denzow/channel-kanban/blob/master/docker-compose.yml

docker-compose up将导致以下状态。

1
2
3
4
5
6
7
8
(dws36) denzownoMacBook-Pro:channel-kanban denzow$ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS                                     NAMES
c7111712546b        channelkanban_service_nginx   "/start-nginx.sh"        4 hours ago         Up 3 hours          80/tcp, 443/tcp, 0.0.0.0:8000->8000/tcp   channelkanban_service_nginx_1
3b5b755a2de9        channelkanban_service         "/app/docker/service…"   4 hours ago         Up 3 hours          0.0.0.0:3000->3000/tcp                    channelkanban_service_1
be6c661f28c0        channelkanban_websocket       "/app/docker/websock…"   4 hours ago         Up 3 hours          0.0.0.0:4000->3000/tcp                    channelkanban_websocket_1
3273576ecf46        postgres                      "docker-entrypoint.s…"   4 hours ago         Up 3 hours          5432/tcp                                  channelkanban_db_1
79d6e3ff2bad        channelkanban_task_runner     "sh /app/work/docker…"   21 hours ago        Up 3 hours                                                    channelkanban_task_runner_1
5ebecf797326        channelkanban_redis           "docker-entrypoint.s…"   31 hours ago        Up 3 hours          0.0.0.0:6379->6379/tcp                    channelkanban_redis_1

<表格>

图片名称

用法


<身体>

channelkanban_service_nginx

用于反向代理服务的前端WEB服务器

channelkanban_service

Django服务器(HTTP)

channelkanban_websocket

Django服务器(WebSocket)

postgres

用于Django bankend DB的PostgreSQL服务器

channelkanban_redis

用于Django渠道的Redis服务器

channelkanban_task_runner

编译Vue.js等的Webpack服务器


6容器已经启动，非常棒。尤其是Django将最多增加2个容器。对于生产用途，您只需要一个使用daphne的容器，并且runserver可以在开发中实现热重装，但是每个容器都有以下问题。

  • 芫

    • 无热装
    • 可以同时支持HTTP / WS
  • 运行服务器(启用通道)

    • 热装
    • 可以同时支持HTTP / WS
    • staticfile的传递很奇怪(不是吗？)

情况是

。因此，HTTP和静态文件是由channelkanban_service传递的，而只有WebSocket是由channelkanban_websocket传递的。通过在路径中包含/ws/，可以使用nginx反向代理WebSocket访问。

关于Vue.js

中的组件

代码在以下部分中。

https://github.com/denzow/channel-kanban/tree/master/application/src/vuejs

components.png

整个

被分为看板部分(App.vue)，与列表相对应的PipeLine.vue和属于该列表的卡被分隔为Card.vue。结构上App.vue-