【ITOO基础】以一个功能为例，浅读前后端调用

前言

在项目的基础模块中，有一个这个功能，点击“添加”，就能弹出“添加教职工信息”模态框，填写基本信息后，点击确定，就能在表格中成功添加一条信息。

那，这个功能是怎么实现的呢？
大致思路是：前端将用户填写的信息采集后，传入后端，后端传入数据库，添加成功后，再返回“添加成功”的信息给用户。
下面来看看代码？

前端

找到相对应的html文件—staff-manage.component.html，点击确定后，就会调用“save”方法。

在staff-manage.component.ts中，可以看到“save”方法的具体实现。其中url代表了传输给后端的地址。

后端

打开idea，去后端basicInfo-web文件夹中找到相关的controller文件—TeachStaffController，搜索“addTeacher”，找到相关代码块后，发现它调用了Facade层的方法，ctrl+左键点击“insertTeacher”，跳转到Facade层。

Facade层有相关接口，点击左边的绿实心圈，跳转到Facade接口层的实现处。

发现此时调用了Service层的方法，同样，ctrl+左键跳转。

service层。

service层的实现，点击跳转到dao层。

因为“BaseDao”是咱们内部封装的方法，所以到此就好了。否则会跳入相关Dao层，然后再跳入Mapper层。

后记

读到此，不知读者是否有个疑问，给用户返回“添加成功”的信息后，数据又是怎么添加到表格中的呢？和这个方法有关系吗？
答：无关。添加成功后，页面会自动进行一次刷新，将新数据显示在页面中。此时走的又是另一个方法了。
以上为自己的一点小收获，欢迎读者品鉴。