这个页面如果是真的互联网产品，便是呈现在手机或者电脑的各种页面，这里游戏中，我们用图画纸可以达到同样的目的。

那么，这个页面便是所谓的前端，用来收集小朋友的报名信息的，等同于现实场景中老师看到/听到/拿到你的报名信息。

这里必要填写的4个信息，便是后端（是否可以报名成功）的输入参数，信息填写完成之后，点击【报名】按钮就会调用后端接口开始执行判断程序，类似老师的大脑处理信息。

在这里插入一个小知识，前端判断和后端判断的区别，前端判断便是不必要后端逻辑判断前端就可以校验的意思，例如上图中的照片尺寸必要一寸，那么如果你提交非1寸照片是不能提交成功的，这个就不必要大脑判断的。

第二步：后端判断

后端判断，在真的互联网产品技术中，便是一段段代码了，游戏中也没有实体化展示这个东西，还是大脑运算，不过我用注释来描述这里面的逻辑。

很简单的表达，不复杂，不抽象，看图：

 

 

所以，后端接口其实便是接收前端提交信息当做入参，然后内部依照必然规则运算之后，返回出参结果给到前端。而后端的复杂度便是这个规则的复杂和实现方式，而内核其实不会变更。

第三步：添加信息到数据库（报名失败没有这一步）

对于报名失败不必要写入数据库的情况下，是没有这第三步的，会直接跳转第四步。而对于报名成功的情况，后端会先把信息写入数据库后，然后将数据库的信息再通过接口返回。

第四步：前端展示后端返回数据

接第二步，拿到输出信息，然后通过前端页面展示出来，上述有3种报名结果，对比图如下：

 

 

在这里，强调下前端页面表达，接口返回信息是数据化的，没有任何格式，必要通过前端的各种样式来展示页面，例如页面结构、颜色、动画、固定文案等内容，可以参考上边表格中的3个页面展示效果。

新增场景介绍完了，这个其实也是增编削查最复杂的案例了，接下来篇幅有限，我会不再赘述现实场景与互联网产品的映射关系了，主要说产品与技术交互映射。

3. 删除（幼儿园小朋友转学）

第一步：前端输入页面

 

 

前置已经用了查询才能（详见下文）定位到要处理的学生对象上，老师操作“转校”操作，会出现弹窗操作确认，这个是前端实现减少误删除。

点击“确定”之后，调用后端的“删除学生信息接口”，同时传入参数1002（学生表主键可以唯一确定一个学生）。

第二步：后端操作

后端“删除接口”做的事情也比较简单，便是直接调用数据库自己的原子才能删除功能，就可以将学号1002这条数据删除掉。操作完成之后，告诉前端删除完成。

此时数据库里，已经没有了1002第二条数据，如下图：

 

 

4. 修改（幼儿园班级教室颜色变化）

第一步：前端输入页面

 

 

前置已经用了查询才能（详见下文）定位到所有班级信息，老师选择要处理的班级信息，操作“编辑”操作，老师填写教室变化后的颜色黄色，然后确定提交，经过弹窗确认之后，真正调用后端“修改班级信息”接口。

第二步：后端操作