2021-09-07

实现学校管理系统中专业页面新增专业的效果

在之前的基础上我们接着继续往下走，之前把学院的页面已经完成了，并且这个专业页面的模糊搜索和表格已经弄好了，那么我们再去把新增专业这个功能完成

 

1.这次的新增模态窗和修改模态窗共用同一个模态窗，上次学院页面就是分了两个模态窗来完成，其实也一样，同样这个模态窗也分了三部分，首先是标题部分、其次是内容部分、最后是结尾部分

2.接下来来讲解一下这三部分的构造，首先标题部分用div标签来包括起来，里面放入标题标签和一个button按钮就行了，标题的内容可以是新增学院或修改学院，内容部分就用一个from表单来包裹，表单里面又是用几个div标签来包裹label标签和input标签或者select标签，这些都是我们需要输入或选择的标签，最后结尾部分就只需要在div标签中放两个button按钮就行了，分别是取消和保存按钮，最后我们再给模态窗以及内容部分的form表单添加不同的ID，还有给保存按钮添加一个onclick点击事件，模态窗就完成了

 

3.然后我们再去创建一个方法并且给新增按钮绑定点击事件，接着再在方法里通过ID把模态窗的标题获取到，并且把标题修改为新增专业，因为新增和修改是共用同一个模态窗，所以打开新增要把标题修改为新增的标题，接着还需要通过ID把表单获取到并且给表单设置重置，这就需要用到reset（）方法，再把专业ID的值赋值为0，最后就是通过ID把模态窗获取到并用方法modal（让其）显示，然后我们还声明了一个变量bl，然后我们让其等于true，相反，在修改专业的方法里我们让bl等于false

 

4.然后我们就打开页面去点击新增看看是否会弹出模态窗并试试输入内容，点击取消或者点击右上角的×就可把模态窗关闭，这个效果没什么问题

5.接下来就是去把模态窗内输入框中的内容获取到，获取到之后点击保存操作就会通过控制体中我之前打好的方法保存到数据库，然后接着又会通过控制体中的方法把数据库中的数据映射到页面的表格中

 

6.接着我们再创建一个方法给模态窗里的保存按钮绑定点击事件，然后再在这个方法里把我们输入的内容或输入框的值获取到，这就要通过每个输入框的ID来获取到并赋值给声明的变量，获取到之后再声明一个变量URL，接着再来判断bl是否为true，如果是的话URL的路径就为新增操作的路径，否则就为修改操作的路径，接着我们不管是新增操作还是修改操作都要来做几个判断，就是判断学院、专业、编码是否选择了或不为空，这几个都是必填的，然后再通过post想控制器发送请求，成功了就会关闭模态窗、表格重载