测试平台框架

1、前端：LayUi

2、后端：springBoot

3、数据库：mysql

2

部署环境

1、由于是前后端分离的项目，所以前后端两个工程需要我们单独部署；

2、本次部署环境： K8S集群(应用/服务在docker容器中)
3、针对于前端工程部署，需要准备的部署文件： Dockerfile、 default.conf、yaml
4、针对于后端工程部署：需要准备的部署文件：Dockerfile、yaml

3

部署方式(jenkins)

1、需要在jenkins上创建两个任务，一个前端的，一个是后台的
2、通过jenkins进行部署，部署成功后，通过K8S master的IP和yaml文件中配置的nodeport就可以访问项目

注意：前端任务中需要增加静态页面的路径

4

前后端项目结构

前端：

• Web目录下的layUi为组件库

• index.html为主页面

• components为子页面

• Dockerfile负责制作镜像

• default.conf是nginx配置(在docker容器中使用)

• ins-automan-testplatform.yaml文件为K8S部署调度文件

后端：

• controller: 控制器，负责将用户发来的url请求发送到对应的service层

• service: 业务层，负责表示层和数据层的数据传递和逻辑处理

• dao: 数据持久层，属于比较底层的操作，具体到对数据库的增、删、改、查等

• mapper: mybatis配置文件，将程序中大量的sql语句剥离至独立的xml配置文件

• applicaion.yml: 配置文件，配置服务器端口，数据库连接信息等

• Dockerfile负责制作镜像

• ins-automan-testplatform.yaml文件为K8S部署调度文件，注意区分后台与前端的接口，避免端口冲突

5

实例演示

实现功能：为大家演示一个简单的新增接口

1、页面：

2、前端：在新建接口页面，输入完相应的信息，点击确认， 这样就可以调用到后台服务的接口， 给“确认button“加一个lable属性，如图

然后编写JS脚本，通过Ajax进行前后端交互通信，进行button操作的监听。如图

• 在请求中配置上后台接口地址

• var requestJson为收集起来的需要提交的数据

• headers中的配置为允许跨域请求

• data:JSON.stringify(requestJson)是将页面上收集到的填写信息转化为JSON格式

• contentType为前后端约定的数据传输格式，我们这里使用的是application/json

3、后台：

• CrossOrigin: 为解决 前后分离的架构下跨域的问题

• RequestMapping:  是一个用来处理请求地址映射的注解

• postMapping: 用来向服务器提交信息的注解，其实是一个组合注解，是@RequestMapping(method=RequestMethod.POST)的缩写

• requestBody:  将json格式的数据转为java对象

• valid：验证注解是否符合要求

4、测试新建接口是否正确

4.1 我们在页面中输入接口相关信息，点击”确认“按钮，如下图所示：

4.2 在浏览器中查看接口调用返回的信息：

我们可以看到，调用接口后，后台返回的信息，是成功的；

4.3 在数据库中，查看数据是否输入成功

从数据库中可以看到我们在前端页面调用后的数据，至此，前后端分离的项目就通了~