【Day3】前端React +Antd 的环境(Docker化)建立 (上)

1.前端的建立过程(上):

我是在本机电脑运行起来本地版本 Container 的静态前端 Server,资料是存放在跟 Container 同步的资料夹,当 Container 初始化之後会先把此资料夹的档案复制到 Container 之内,再开始其他的安装工作。

一开始我是简单的在本地建立一个 React + Server 之後,在成功建立之後再迁移到
开发的 Docker 上;并在开发到一定阶段之後再迁移到有着 Nginx 上的容器,并开始
跟後端连接 Api 。

1.1 思路以及参考

主要的流程其实是参考: Ant.Design下 使用 Create-react-app 进行开发,所以相关
的东西我就不重复了,这边跟原本 React app 的流程不一样的地方就只是多加了
个 yarn add antd。

俗话说的好,牛顿之所以那麽厉害是因为他站在埃因斯坦的肩膀上面,所以在这边我也大致上参考了下面这几个 Github 专案,大致的专案如下:

前几个做的文件引导都挺完整的,建议可能在本机上面玩玩看,第二个由於一些
原因我大概只有参考其api和架构的部分,第三个算是目前我专案後台前端的主要模板。

第四个稍微复杂一点,不过也更有趣一些,最後两个专案则是在参考如何把目标专案建立在Docker之上。

目前思路:

参考前後端分离部分: Docker-django-react-postgres-nginx

整体架构参考: Docker-django-nginx-uwsgi-postgres-tutorial

後端管理系统前端页面参考: antd-admin
react-antd-admin-template

Api-串接参考:  
Antd-admin : https://doc.antd-admin.zuiidea.com/#/API-configuration
Antd : https://v1.pro.ant.design/docs/server-cn
Django- django+react短时间搭建一套增删查改项目思路(一)
django+react短时间搭建一套增删查改项目思路(二)

之後会介绍较详细的搭建过程。不过身为新手的我会先介绍
如何先上手...哈哈


<<:  Day5 - 找出适合自己的案子

>>:  33岁转职者的前端笔记-DAY 5 登入画面切版实作

UNIX、BSD 与 Linux 的爱恨情仇

本文目标 熟悉 UNIX 作业系统的发展 认识自由软件运动与 GNU 计画 了解 C 语言是被设计来...

目标、策略与风险

目的(Purpose) “目的”是完成或创建某件事或存在某事的原因。(谷歌字典) 使命与愿景 一个...

从零开始的8-bit迷宫探险【Level 21】进击的主角!暴风雨来呐,你坐啊!

远方有个一闪一闪的东西,吸引了山姆的目光。 「这颗水晶...特别的大颗!」山姆跑了过去。 碰触到魔...

Log Agent - Fluent Bit Input元件 与 Tail浅谈

Fluent bit回顾 Log Agent - Fluent Bit 简介 Log Agent -...

伸缩自如的Flask [day12] Sql Database

好的,这里来使用Sql的DataBase,我相信你已经知道或调查过了NoSql跟Sql两种Datab...