使用Django和Vue来开发看板应用程序
这是一个为了PyConJP 2018演讲而创建的DjangoDeKanban教程文章。
我们的目标是最终能够构建出以下这样的应用程序。
如果你想要给出完整形式，请从以下存储库中选择。
请注意事项
在本教程中，我们将涉及Django、Vue、PostgreSQL、Redis等技术。虽然不涉及这些技术的基础知识、安装和环境配置，但我们为教程准备了Docker模板，即使没有这些知识也可以开始学习。因此，只要您的环境能够执行docker-compose命令，就可以开始学习了。
关于DockerCompose的环境构建，有很多文章可以参考，请另行搜索。另外，文档也应该很清晰易懂。
准备环境
事前确认
在本教程中，我们将在使用Docker的环境下构建应用程序。请确保以下命令能够顺利执行。
$ docker-compose --version
只要这条命令返回的结果符合以下情况就可以了，其中1.22.0部分即使不同也没问题。
$ docker-compose --version
docker-compose version 1.22.0, build f46880f
如果这个命令出现错误，请先准备好docker-compose环境，然后再继续进行。
获取模板
首先，获取以下的zip文件。
请在任意目录中解压缩，然后执行以下命令。
$ cd /path/to/zip/dir/django-vue-template-master
$ ls -l
$ ls -l
-rw-r--r--@ 1 denzow staff 483 9 17 10:52 requirements.txt
-rwxr-xr-x@ 1 denzow staff 543 9 17 10:52 manage.py
-rw-r--r--@ 1 denzow staff 1144 9 17 10:52 docker-compose.yml
drwxr-xr-x@ 5 denzow staff 160 9 17 10:52 docker
drwxr-xr-x@ 10 denzow staff 320 9 17 10:52 application
-rw-r--r--@ 1 denzow staff 101 9 17 10:52 README.md
-rw-r--r--@ 1 denzow staff 104 9 17 10:52 Dockerfile_vuejs
-rw-r--r--@ 1 denzow staff 213 9 17 10:52 Dockerfile_service
如果文件已经放置好了，那就完成了。接下来，我们将把当前目录表示为BASE_DIR。
确认操作
在确认处于BASE_DIR目录下之后，请执行以下命令。
$ docker-compose up -d
$ docker-compose up -d
WARNING: The DJANGO_ENV variable is not set. Defaulting to a blank string.
Creating network "django-vue-template-master_default" with the default driver
Creating django-vue-template-master_db_1 ... done
Creating django-vue-template-master_vuejs_1 ... done
Creating django-vue-template-master_redis_1 ... done
Creating django-vue-template-master_service_1 ... done
Creating django-vue-template-master_service_nginx_1 ... done
初次启动时会出现各种信息，但只要最终出现5个“完成”字样，就没有问题。接下来将记录正在运行的容器的说明。
containerroleservicedjangoが起動するコンテナservice_nginxリバースプロキシのためのnginxが起動するコンテナdbdjangoが使用するDB(PostgreSQL)が起動するコンテナredisKVSのRedisが起動するコンテナvuejs*.vueファイルをコンパイルするvuecliが起動するコンテナ
您可以使用docker-compose ps命令来确认正在运行的容器。
$ docker-compose ps
WARNING: The DJANGO_ENV variable is not set. Defaulting to a blank string.
Name Command State Ports
-----------------------------------------------------------------------------------------------------------------------------
django-vue-template-master_db_1 docker-entrypoint.sh postgres Up 5432/tcp
django-vue-template-master_redis_1 docker-entrypoint.sh redis ... Up 0.0.0.0:6379->6379/tcp
django-vue-template-master_service_1 /app/docker/service/start- ... Up 0.0.0.0:3000->3000/tcp
django-vue-template-master_service_nginx_1 /start-nginx.sh Up 443/tcp, 80/tcp, 0.0.0.0:8000->8000/tcp
django-vue-template-master_vuejs_1 /app/docker/vuejs/start-wa ... Up
只要所有的状态都正常就可以了。
让我们在浏览器中尝试通过 http://localhost:3000 访问当前状态。
如果屏幕上显示的是这样的画面，那就表示准备工作已经完成了，尽管它是全白的。
目录的说明
第一章最后，我们将对每个目录进行简要说明。
.
├── Dockerfile_service # serviceコンテナの設定
├── Dockerfile_vuejs # vuejsコンテナの設定
├── README.md
├── application # Djangoアプリケーションのコード
│ ├── __init__.py
│ ├── modules # Djangoのロジックコードの配置先
│ ├── settings # Djangoの設定
│ ├── static # css/js等の静的ファイル
│ ├── templates # DjangoのHTMLテンプレートの配置先
│ ├── views # request/resposenをさばくViewレイヤーの配置先
│ ├── vuejs # vuejsのコンパイル前のコードの配置先
│ └── wsgi.py # djangoのエントリーポイント
├── docker # docker関連のファイル
├── docker-compose.yml # 各コンテナの連携の設定
├── manage.py # djangoの管理コマンドのエントリーポイント
└── requirements.txt # 必要なPythonのライブラリを列挙したもの
虽然无需特别理解，但这只是作为参考。
