[Docker/Node+React] 用React-beautiful-dnd实现的可拖拽的TODO APP

背景

之前学习docker的时候跟着getting-started的教程做了一下。这个教程做完你会得到一个可以本地运行的TODO APP。可能是因为我喜欢极简的风格，这个TODO APP对我来说非常好用。后来我自己工作或者做一些事情就也一直在用这个APP。

然而有一个美中不足的是，这个APP里的todo-item不可以拖拽。我特别希望有这个feature。比如我工作的时候会有好多个事情，都会写在这里。事情有优先级，我喜欢把重要的，急的事情放到前面。教程里的app没有办法做到这一点。所以我就想把拖拽的功能加到这个app里。

代码

这篇文章主要是想把这个做好的app分享出来，就不讲一些实现的细节了。后面有机会的话我再写一篇关于实现细节的吧。源代码先放在这里了。拖拽功能是用React-beautiful-dnd实现的。说简单也简单，新手（我）做起来也还是会遇到不少问题的。

• 源代码：tppig/todo-app-dnd

• 做好的docker image: dockerhub

运行app

需要先安装/运行docker。这里就不赘述怎么安装docker了。注意如果在windows上运行docker的话，一定要选Linux container。因为我用的docker image是基于linux的。在windows上运行Linux container我之前倒是踩过一些坑。可以参考我之前的这篇文章。

1. 在本地创建一个docker-compose.yml文件，复制这些内容：

version: "v1.0"
services:
  mysql:
    image: mysql:8.0
    volumes:
      - data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: todos

  todo-app-dnd-server:
    image: oos1111/todo-app-dnd-server:1.0
    ports:
      - 3001:3001
    environment:
      MYSQL_HOST: mysql
      MYSQL_USER: root
      MYSQL_PASSWORD: secret
      MYSQL_DB: todos
  
  todo-app-dnd-client:
    image: oos1111/todo-app-dnd-client:1.0
    ports:
      - 3000:3000
  


volumes:
  data:

2. 然后命令行进入到这个文件所在的位置，运行"docker compose up -d":

3. 这样就可以了。稍微等待一会儿，等image下载完成这个app就启动起来了。浏览器访问localhost:3000就可以使用了。

结语

希望这个app能对大家有用。使用遇到什么问题欢迎在github提issue或者在这里留言~