系列文章目录
文章目录
- 系列文章目录
- 13-角色维护-新增-目标和思路（引入模态框）
- 需求，拿不到数据就不显示页码
- 全部用ajax做的的话我们希望不要跳转页面，直接一点新增，来一个浮动的框框
- 引入模态框
- ==模态框的使用 案例==
- 14-角色维护-新增-代码：前端
- js给变量去空格
- 15-角色维护-新增-代码：后端
- ==后端保存对象方法1==
- ==后端保存对象方法2==
- 16-角色维护-新增-小结
- 17-角色维护-更新-目标和思路（下一篇）
- 18-角色维护-更新-代码：前端-给铅笔按钮绑定单击响应函数
13-角色维护-新增-目标和思路（引入模态框）
需求，拿不到数据就不显示页码
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_ajax](https://file.cfanz.cn/uploads/png/2023/03/31/14/N7800Y1348.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_后端_02](https://file.cfanz.cn/uploads/png/2023/03/31/14/0IT4H1TU11.png "在这里插入图片描述")
remove( ) 删除选择的元素和子元素
empty( ) 只删除选中元素的子元素
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_03](https://file.cfanz.cn/uploads/png/2023/03/31/14/f297JbeOAK.png "在这里插入图片描述")
remove( ) 删除选择的元素和子元素
empty( ) 只删除选中元素的子元素
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_模态框_04](https://file.cfanz.cn/uploads/png/2023/03/31/14/190644D9Mc.png "在这里插入图片描述")
效果如下：在没有数据的情况下就不显示 页码 导航码了
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_对象方法_05](https://file.cfanz.cn/uploads/png/2023/03/31/14/4J8B1XI27D.png "在这里插入图片描述")
全部用ajax做的的话我们希望不要跳转页面，直接一点新增，来一个浮动的框框
引入模态框
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_06](https://file.cfanz.cn/uploads/png/2023/03/31/14/ee6f8C8882.png "在这里插入图片描述")
https://v3.bootcss.com/ 选择 JavaScript 插件 ——> 模态框 ——> 用法
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_07](https://file.cfanz.cn/uploads/png/2023/03/31/14/7Ye95Q7JC8.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_08](https://file.cfanz.cn/uploads/png/2023/03/31/14/F5162H9M07.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_后端_09](https://file.cfanz.cn/uploads/png/2023/03/31/14/0G5b485574.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_对象方法_10](https://file.cfanz.cn/uploads/png/2023/03/31/14/3d0DaEPWa4.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_对象方法_11](https://file.cfanz.cn/uploads/png/2023/03/31/14/eBW8d48Me6.png "在这里插入图片描述")
模态框的使用 案例
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_模态框_12](https://file.cfanz.cn/uploads/png/2023/03/31/14/9U16KS61b3.png "在这里插入图片描述")
把刚刚那些内容复制过来
注意有些东西是要保留的，不要整个页面覆盖
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_后端_13](https://file.cfanz.cn/uploads/png/2023/03/31/14/6fT467358O.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_对象方法_14](https://file.cfanz.cn/uploads/png/2023/03/31/14/3RWFGe17F6.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_后端_15](https://file.cfanz.cn/uploads/png/2023/03/31/14/dMV03280ET.png "在这里插入图片描述")
我们可以直接把之前新增用户的表单拿过来，但是把action去掉，，为什么要去掉，原因是这里我们要用的ajax，
如果直接action加上的话，点击提交的时候就跳转页面了
我们这里用ajax异步去访问后台，表单不需要action属性
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_16](https://file.cfanz.cn/uploads/png/2023/03/31/14/7FCRaaY8Ua.png "在这里插入图片描述")
模态框默认是不显示的，即隐藏的，我们还要看怎么打开模态框
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_后端_17](https://file.cfanz.cn/uploads/png/2023/03/31/14/7Bf3BR8c3U.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_18](https://file.cfanz.cn/uploads/png/2023/03/31/14/1Y1UE698dA.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_对象方法_19](https://file.cfanz.cn/uploads/png/2023/03/31/14/011834801b.png "在这里插入图片描述")
所以，模态框要先加一个id
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_20](https://file.cfanz.cn/uploads/png/2023/03/31/14/3KC14aSS2L.png "在这里插入图片描述")
然后就很简单了
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_后端_21](https://file.cfanz.cn/uploads/png/2023/03/31/14/E8c5J7YUPN.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_对象方法_22](https://file.cfanz.cn/uploads/png/2023/03/31/14/5fcPb2I922.png "在这里插入图片描述")
模态框大致就是这么一个效果：
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_ajax_23](https://file.cfanz.cn/uploads/png/2023/03/31/14/d4664D9J53.png "在这里插入图片描述")
所以我们有了这个知识就可以
用模态框代替我们要去另外一个页面的思想
一个页面基本上可以完成所有的操作
再整一下思路
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_24](https://file.cfanz.cn/uploads/png/2023/03/31/14/e5D4M726Yd.png "在这里插入图片描述")
14-角色维护-新增-代码：前端
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_ajax_25](https://file.cfanz.cn/uploads/png/2023/03/31/14/I1MaH67fdT.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_ajax_26](https://file.cfanz.cn/uploads/png/2023/03/31/14/6E543a4H1c.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_27](https://file.cfanz.cn/uploads/png/2023/03/31/14/aETY6ea4X3.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_模态框_28](https://file.cfanz.cn/uploads/png/2023/03/31/14/f1aa80O0Vf.png "在这里插入图片描述")
js给变量去空格
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_29](https://file.cfanz.cn/uploads/png/2023/03/31/14/28JbL1X27O.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_模态框_30](https://file.cfanz.cn/uploads/png/2023/03/31/14/94B803P412.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_31](https://file.cfanz.cn/uploads/png/2023/03/31/14/SePF9L46W6.png "在这里插入图片描述")
下面就是关闭模态框，实际上不管你成功也好，失败也好，都要关闭模态框
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_后端_32](https://file.cfanz.cn/uploads/png/2023/03/31/14/bL9A8d26de.png "在这里插入图片描述")
还有一个问题，其实如果失败的话还是不要动，成功再去最后一页，失败不用动
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_ajax_33](https://file.cfanz.cn/uploads/png/2023/03/31/14/f4XebEDac6.png "在这里插入图片描述")
15-角色维护-新增-代码：后端
后端保存对象方法1
此时的新增方法不需要返回数据，只需要返回一个消息就行
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_模态框_34](https://file.cfanz.cn/uploads/png/2023/03/31/14/M047RR470d.png "在这里插入图片描述")
所以我们还有另外一种方式
后端保存对象方法2
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_bootstrap_35](https://file.cfanz.cn/uploads/png/2023/03/31/14/W3260b380a.png "在这里插入图片描述")
直接传一个对象就行
只是参数名字要改一下，因为这种方式必须要跟实体类保持一致
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_ajax_36](https://file.cfanz.cn/uploads/png/2023/03/31/14/6O0O2TK8e6.png "在这里插入图片描述")
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_对象方法_37](https://file.cfanz.cn/uploads/png/2023/03/31/14/Z3Ab1063H3.png "在这里插入图片描述")
其它都跟以前一样
![项目一众筹网04_2_角色维护新增和更新[ajax异步开发模式]_bootStrap模态框的使用_后端保存的2种方式_js给变量去空格_ajax_38](https://file.cfanz.cn/uploads/png/2023/03/31/14/3b88d7dRdf.png "在这里插入图片描述")
有异常映射机制的话，不用try-catch也很好，少了很多冗余代码
16-角色维护-新增-小结
17-角色维护-更新-目标和思路（下一篇）
18-角色维护-更新-代码：前端-给铅笔按钮绑定单击响应函数
19-角色维护-更新-代码：前端-打开模态框
20-角色维护-更新-代码：前端-执行更新
21-角色维护-更新-代码：后端-执行更新
22-角色维护-删除-目标和思路
23-角色维护-删除-代码：后端
24-角色维护-删除-代码：前端-打开模态框
25-角色维护-删除-代码：前端-执行删除
26-角色维护-删除-代码：前端-单条删除
27-角色维护-删除-代码：前端-批量删除-全选全不选功能
28-角色维护-删除-代码：前端-批量删除-收集要删除的信息
29-角色维护-删除-小结
