k8s部署微服务项目实战--react前端+springboot/python后端-第二节 前端react项目搭建

上一节我们简单介绍了项目框架，从这一节开始我们详细阐述前后端以及中间件的搭建、开发和部署。

首先介绍一下前端，前端使用了react，组件库使用的是公司自己的组件库，页面构建使用了react-jsonschema-form，优点是通过定义schema的json文件就可以将表的各个属性渲染到页面上，而不需要自己编写大量的类似于input/text/radiabutton之类的html语言。 

第一步：因为前端使用的是react，安装和编译打包需要node.js，因此首先请安装配置nodejs环境。

第二步：配置npm的下载源，我使用的是公司的源，您可以自行改为taobao源或者其他：

 第三步：使用react脚手架创建一个react项目，步骤简单，容易理解：

　　npm install -g create-react-app

　　create-react-app demo_fe

创建好项目后，就可以自行开发自己的项目，这里笔者配置的package.json如下，因为笔者使用的是公司自己的组件库，您可以自行进行修改为蚂蚁的组件库：

定义一个简单的router如下：

 

 

组件App即是我们需要开发的单页应用，在此基础上实现一个简单的测试用例的新建页面，最终效果如下：

 

 

 

 

 页面底部的button list即是我们需要通过fetch库发送给后端的行为：

 

 

 代码中分别定义了CREATE按钮触发的行为如下：

 

 

 RUN按钮触发的行为如下：

 

 

 这里的fetchService封装了Get、Post、Put、Delete请求，这里列举Get和Post请求的封装：

 

 

 

 至此，我们已经可以实现一个创建测试用例的页面，并且定义了CREATE和RUN这两个button对应的操作，下一节我们就针对于当前这个简单的react项目进行打包和手动部署到k8s集群中。