2021-09-07

实现学校管理系统中专业页面修改、删除功能的效果

我们这一路走来，完成这个项目的学院页面，还有专业页面的模糊搜索以及新增专业的功能，那么我们接下来去完成这个页面剩下的修改和删除的功能，完成这些功能后我们就直接跳过这个项目，因为这五个页面都差不多是一样的，所以没有多大的必要，就讲两个差不多了

1.

可以看到我截图的代码，我们先来写这个修改学院的模态窗并且布局，可以看到我们有很多的div标签，嵌套了很多层，还有标签内有很多的属性，这些都是我们布局的一些基本的东西，这就是那些插件里面的写好了的，我们直接用就行了，但是有一些是要我们自己加上去的，比如ID等，我们这个模态窗先分了三个部分，首先是标题部分，就是让我们知道弹出的这个模态窗是干什么用的，其次是内容部分，就放入一些输入框来接收学院的基本信息，然后就是结尾部分，我们就给了两个button按钮，分别是取消和保存按钮，最后我们再给模态窗以及内容部分的form表单添加不同的ID，还有给保存按钮添加一个onclick点击事件，模态窗就完成了

2.

接着就是给修改按钮也添加一个onclick点击事件，然后创建一个方法给修改按钮绑定上，再通过模态窗的ID把模态窗获取到，然后再通过modal（）方法让模态窗显示出来，我们还可以给表单设置重置，就是防止点开了模态窗后输入了一些内容后然后点击取消或者保存后，再次点开修改时上次的数据还会显示在输入框内，所以我们每次保存或者取消后都要让数据清除，就需要通过表单的ID把表单获取到并且用get（）方法转化为js，然后再调用reset（）方法来重置表单，这样就不会出现那种情况了，然后我们还需要获取到学院的ID，这样才知道我们具体是修改或者删除哪一条数据，方法我在控制器已经写好了

3.

然后我们就打开页面去点击修改看看是否会弹出模态窗并且输入框内都有数据，然后我们可以直接更改里面的内容，点击取消或者点击右上角的×就可把模态窗关闭

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

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

6.完成了修改后就是删除操作了，这个功能比较简单，就直接写一个方法绑定到删除按钮上，这个方法中用到了一个询问框，就是再次询问是否删除该条数据，点击确认后就会进行删除操作，然后我在控制器中同样写好了一个删除的方法，我们只要调用方法就行了

好了，专业页面也完成了。