上节我们基本上完成了用户角色权限的后台服务，这节我们主要来完成页面上的操作。在开始这节内容时，先补充下上节Controller里面漏掉的一些内容。

0、增加方法

上节我们的User，Role，Perm对应的Controller，里面漏掉了新增页面和编辑页面的导航方法，这里我们先将漏掉的方法加上，下面将会用到的。三个类做相对应的修改

1、权限页面

我们从最简单的权限列表开始，我们将原来的文章列表页面复制一份

修改成下面这样

测试页面：

我们再将文章新增页面复制一份到perm文件夹

测试新增

我们再复制文章编辑页面到perm文件夹

测试编辑

这时我们测试，发现修改了内容，提交后，内容又还原了。

原来是我们当初在Controller里面留了一段代码还没实现

这里有个常见的错误做法，就是直接把前端传过来的perm保存在数据库里面，即直接permRepository.save(perm)，这样做是有问题的，因为前端传过来的数据，都存在危险，是不可信的，假设我们Perm的name是不可修改的（这种场景，很多，例如用户的用户名是不能修改的），如果你直接保存perm，就可能导致Perm的name被篡改。有人说，我页面上设置了name是不可编辑的啊，但是对于稍微有点经验的程序员来说，完全可以伪造请求，直接使用postman就可以完成name的篡改。又有人说，那我对perm对象的值进行检查不就ok了，确实如此，但我们再考虑另外一个场景，假设这个权限编辑页面，并没有提供description这个字段的展现，前端的表单也没有description字段，这样提交过来的perm的description就是null，这时直接保存perm，就会将原来的description值设置成null，这个结果是用户真正期望的吗？所以，笔者的经验是，先查出原来的对象，然后按照需要从前端传过来的对象取值赋给原来的对象。

假设这里perm的name是不可编辑的，我们就可以这样处理

这样，你的name就绝对不可能被篡改。

删除很简单，我们直接点删除按钮，就可以发现记录被正常删除了。

2、角色页面

我们现在将权限列表页面复制一份，作为我们的角色列表页面，将权限新增页面复制一份作为角色新增页面，我们暂时先不考虑perms属性。当我们测试完角色新增，返回列表页面时，发现后台报错

2020-04-11 10:32:48.175  WARN 94575 --- [nio-8080-exec-9] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotWritableException: Could not write JSON: write javaBean error, fastjson version 1.2.58, class org.springframework.data.domain.PageImpl, failed to lazily initialize a collection of role: com.cangzhitao.springboot.study.security.entities.Role.perms, could not initialize proxy - no Session; nested exception iscom.alibaba.fastjson.JSONException: write javaBean error, fastjson version 1.2.58, class org.springframework.data.domain.PageImpl, failed to lazily initialize a collection of role: com.cangzhitao.springboot.study.security.entities.Role.perms, could not initialize proxy - no Session]

这就是“著名”的延迟加载异常，我们后台方法返回的是结果是使用fastjson序列化成字符串到前端的，fastjson序列化Role里面的perms属性的时候，触发了JPA的延迟加载机制，JPA的延迟加载机制将会去数据库查询关联数据，但这时候我们的session已经关闭了。

解决这个方法有两个，一个是将Lazy改为EAGER，即不使用延迟加载，再一个就是延迟session关闭的时间，其实我们之前配置文件中的spring.jpa.open-in-view: true就是做这个事的。但是为什么我们还会报这个错呢，原来现在我们还需要设置enable_lazy_load_no_trans属性

这样我们的程序可以正常运行了。

我们继续完成编辑页面。

3、用户页面

用户页面和就是页面基本一致，我们也暂时先不考虑里面的roles属性，先完成基本属性的增删改查。这里就不贴出代码了。

4、总结

这节主要完成前端页面的编写，暂时我们只处理了基本属性，像User对象里面的roles属性，Role对象里面的perms属性，我们暂时都略过了，下节我们来完善这两个属性的处理。

代码：

https://github.com/www15119258/springboot-study/tree/branch20