黑马项目公开【传智健康】权限控制、图形报表 |
您所在的位置：网站首页 › 远程控制语句 › 黑马项目公开【传智健康】权限控制、图形报表 |
黑马项目公开【传智健康】权限控制、图形报表
|
第10章 权限控制、图形报表一、在项目中应用Spring Security 前面我们已经学习了Spring Security框架的使用方法，本章节我们就需要将Spring Security框架应用到后台系统中进行权限控制，其本质就是认证和授权。 要进行认证和授权需要前面课程中提到的权限模型涉及的7张表支撑，因为用户信息、权限信息、菜单信息、角色信息、关联信息等都保存在这7张表中，也就是这些表中的数据是我们进行认证和授权的依据。所以在真正进行认证和授权之前需要对这些数据进行管理，即我们需要开发如下一些功能： 1、权限数据管理（增删改查） 2、菜单数据管理（增删改查） 3、角色数据管理（增删改查、角色关联权限、角色关联菜单） 4、用户数据管理（增删改查、用户关联角色） 鉴于时间关系，我们不再实现这些数据管理的代码开发。我们可以直接将数据导入到数据库中即可。 1.1 导入Spring Security环境第一步：在health_parent父工程的pom.xml中导入Spring Security的maven坐标 org.springframework.security spring-security-web ${spring.security.version} org.springframework.security spring-security-config ${spring.security.version}第二步：在health_backend工程的web.xml文件中配置用于整合Spring Security框架的过滤器DelegatingFilterProxy springSecurityFilterChain org.springframework.web.filter.DelegatingFilterProxy springSecurityFilterChain /* 1.2 实现认证和授权第一步：在health_backend工程中按照Spring Security框架要求提供SpringSecurityUserService，并且实现UserDetailsService接口 package com.itheima.security; import com.alibaba.dubbo.config.annotation.Reference; import com.itheima.pojo.CheckItem; import com.itheima.pojo.Permission; import com.itheima.pojo.Role; import com.itheima.service.CheckItemService; import com.itheima.service.UserService; import org.springframework.security.core.GrantedAuthority; import org.springframework.security.core.authority.SimpleGrantedAuthority; import org.springframework.security.core.userdetails.User; import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetailsService; import org.springframework.security.core.userdetails.UsernameNotFoundException; import org.springframework.stereotype.Component; import java.util.ArrayList; import java.util.List; import java.util.Set; @Component public class SpringSecurityUserService implements UserDetailsService{ @Reference //注意：此处要通过dubbo远程调用用户服务 private UserService userService; //根据用户名查询用户信息 public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException { //远程调用用户服务，根据用户名查询用户信息 com.itheima.pojo.User user = userService.findByUsername(username); if(user == null){ //用户名不存在 return null; } List list = new ArrayList(); Set roles = user.getRoles(); for(Role role : roles){ //授予角色 list.add(new SimpleGrantedAuthority(role.getKeyword())); Set permissions = role.getPermissions(); for(Permission permission : permissions){ //授权 list.add(new SimpleGrantedAuthority(permission.getKeyword())); } } UserDetails userDetails = new User(username,user.getPassword(),list); return userDetails; } }第二步：创建UserService服务接口、服务实现类、Dao接口、Mapper映射文件等 package com.itheima.service; import com.itheima.pojo.User; /** * 用户服务接口 */ public interface UserService { public User findByUsername(String username); } package com.itheima.service; import com.alibaba.dubbo.config.annotation.Service; import com.itheima.dao.PermissionDao; import com.itheima.dao.RoleDao; import com.itheima.dao.UserDao; import com.itheima.pojo.Permission; import com.itheima.pojo.Role; import com.itheima.pojo.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.transaction.annotation.Transactional; import java.util.Set; @Service(interfaceClass = UserService.class) @Transactional public class UserServiceImpl implements UserService { @Autowired private UserDao userDao; @Autowired private RoleDao roleDao; @Autowired private PermissionDao permissionDao; public User findByUsername(String username) { User user = userDao.findByUsername(username); if(user == null){ return null; } Integer userId = user.getId(); Set roles = roleDao.findByUserId(userId); if(roles != null && roles.size() > 0){ for(Role role : roles){ Integer roleId = role.getId(); Set permissions = permissionDao.findByRoleId(roleId); if(permissions != null && permissions.size() > 0){ role.setPermissions(permissions); } } user.setRoles(roles); } return user; } } package com.itheima.dao; import com.itheima.pojo.User; public interface UserDao { public User findByUsername(String username); } package com.itheima.dao; import com.itheima.pojo.Role; import java.util.Set; public interface RoleDao { public Set findByUserId(int id); } package com.itheima.dao; import com.itheima.pojo.Permission; import java.util.Set; public interface PermissionDao { public Set findByRoleId(int roleId); } DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > select * from t_user where username = #{username} DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > select r.* from t_role r ,t_user_role ur where r.id = ur.role_id and ur.user_id = #{userId} DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > select p.* from t_permission p ,t_role_permission rp where p.id = rp.permission_id and rp.role_id = #{roleId}第三步：修改health_backend工程中的springmvc.xml文件，修改dubbo批量扫描的包路径 注意：此处原来扫描的包为com.itheima.controller，现在改为com.itheima包的目的是需要将我们上面定义的SpringSecurityUserService也扫描到，因为在SpringSecurityUserService的loadUserByUsername方法中需要通过dubbo远程调用名称为UserService的服务。 第四步：在health_backend工程中提供spring-security.xml配置文件 第五步：在springmvc.xml文件中引入spring-security.xml文件 第六步：在Controller的方法上加入权限控制注解，此处以CheckItemController为例 package com.itheima.controller; import com.alibaba.dubbo.config.annotation.Reference; import com.itheima.constant.MessageConstant; import com.itheima.constant.PermissionConstant; import com.itheima.entity.PageResult; import com.itheima.entity.QueryPageBean; import com.itheima.entity.Result; import com.itheima.exception.CustomException; import com.itheima.pojo.CheckItem; import com.itheima.pojo.Member; import com.itheima.service.CheckItemService; import org.springframework.security.access.annotation.Secured; import org.springframework.security.access.prepost.PreAuthorize; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.commons.CommonsMultipartFile; import java.util.List; /** * 体检检查项管理 */ @RestController @RequestMapping("/checkitem") public class CheckItemController { @Reference private CheckItemService checkItemService; //分页查询 @PreAuthorize("hasAuthority('CHECKITEM_QUERY')")//权限校验 @RequestMapping("/findPage") public PageResult findPage(@RequestBody QueryPageBean queryPageBean){ PageResult pageResult = checkItemService.pageQuery( queryPageBean.getCurrentPage(), queryPageBean.getPageSize(), queryPageBean.getQueryString()); return pageResult; } //删除 @PreAuthorize("hasAuthority('CHECKITEM_DELETE')")//权限校验 @RequestMapping("/delete") public Result delete(Integer id){ try { checkItemService.delete(id); }catch (RuntimeException e){ return new Result(false,e.getMessage()); }catch (Exception e){ return new Result(false, MessageConstant.DELETE_CHECKITEM_FAIL); } return new Result(true,MessageConstant.DELETE_CHECKITEM_SUCCESS); } //新增 @PreAuthorize("hasAuthority('CHECKITEM_ADD')")//权限校验 @RequestMapping("/add") public Result add(@RequestBody CheckItem checkItem){ try { checkItemService.add(checkItem); }catch (Exception e){ return new Result(false,MessageConstant.ADD_CHECKITEM_FAIL); } return new Result(true,MessageConstant.ADD_CHECKITEM_SUCCESS); } //编辑 @PreAuthorize("hasAuthority('CHECKITEM_EDIT')")//权限校验 @RequestMapping("/edit") public Result edit(@RequestBody CheckItem checkItem){ try { checkItemService.edit(checkItem); }catch (Exception e){ return new Result(false,MessageConstant.EDIT_CHECKITEM_FAIL); } return new Result(true,MessageConstant.EDIT_CHECKITEM_SUCCESS); } }第七步：修改页面，没有权限时提示信息设置，此处以checkitem.html中的handleDelete方法为例 //权限不足提示 showMessage(r){ if(r == 'Error: Request failed with status code 403'){ //权限不足 this.$message.error('无访问权限'); return; }else{ this.$message.error('未知错误'); return; } } // 删除 handleDelete(row) { this.$confirm('此操作将永久当前数据，是否继续?', '提示', { type: 'warning' }).then(()=>{ //点击确定按钮执行此代码 axios.get("/checkitem/delete.do?id=" + row.id).then((res)=> { if(!res.data.flag){ //删除失败 this.$message.error(res.data.message); }else{ //删除成功 this.$message({ message: res.data.message, type: 'success' }); this.findPage(); } }).catch((r)=>{ this.showMessage(r); }); }).catch(()=> { //点击取消按钮执行此代码 this.$message('操作已取消'); }); } 1.3 显示用户名前面我们已经完成了认证和授权操作，如果用户认证成功后需要在页面展示当前用户的用户名。Spring Security在认证成功后会将用户信息保存到框架提供的上下文对象中，所以此处我们就可以调用Spring Security框架提供的API获取当前用户的username并展示到页面上。 实现步骤： 第一步：在main.html页面中修改，定义username模型数据基于VUE的数据绑定展示用户名，发送ajax请求获取username new Vue({ el: '#app', data:{ username:null,//用户名 menuList:[] }, created(){ //发送请求获取当前登录用户的用户名 axios.get('/user/getUsername.do').then((response)=>{ this.username = response.data.data; }); } }); {{username}}第二步：创建UserController并提供getUsername方法 package com.itheima.controller; import com.itheima.constant.MessageConstant; import com.itheima.entity.Result; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.security.core.context.SecurityContextImpl; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/user") public class UserController { //获取当前登录用户的用户名 @RequestMapping("/getUsername") public Result getUsername()throws Exception{ try{ org.springframework.security.core.userdetails.User user = (org.springframework.security.core.userdetails.User) SecurityContextHolder.getContext().getAuthentication().getPrincipal(); return new Result(true, MessageConstant.GET_USERNAME_SUCCESS,user.getUsername()); }catch (Exception e){ return new Result(false, MessageConstant.GET_USERNAME_FAIL); } } }通过debug调试可以看到Spring Security框架在其上下文中保存的用户相关信息：  1.4 用户退出第一步：在main.html中提供的退出菜单上加入超链接 退出第二步：在spring-security.xml文件中配置 二、图形报表ECharts2.1 ECharts简介ECharts缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的使用JavaScript实现的数据可视化工具，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。 官网：https://echarts.baidu.com/ 下载地址：https://echarts.baidu.com/download.html  下载完成可以得到如下文件：  解压上面的zip文件：  我们只需要将dist目录下的echarts.js文件引入到页面上就可以使用了  2.2 5分钟上手ECharts我们可以参考官方提供的5分钟上手ECharts文档感受一下ECharts的使用方式，地址如下： https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 第一步：创建html页面并引入echarts.js文件 第二步：在页面中准备一个具备宽高的DOM容器。 第三步：通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个简单的柱状图 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);效果如下：  2.3 查看ECharts官方实例ECharts提供了很多官方实例，我们可以通过这些官方实例来查看展示效果和使用方法。 官方实例地址：https://www.echartsjs.com/examples/  可以点击具体的一个图形会跳转到编辑页面，编辑页面左侧展示源码（js部分源码），右侧展示图表效果，如下：  要查看完整代码可以点击右下角的Download按钮将完整页面下载到本地。 通过官方案例我们可以发现，使用ECharts展示图表效果，关键点在于确定此图表所需的数据格式，然后按照此数据格式提供数据就可以了，我们无须关注效果是如何渲染出来的。 在实际应用中，我们要展示的数据往往存储在数据库中，所以我们可以发送ajax请求获取数据库中的数据并转为图表所需的数据即可。 三、会员数量折线图3.1 需求分析会员信息是体检机构的核心数据，其会员数量和增长数量可以反映出机构的部分运营情况。通过折线图可以直观的反映出会员数量的增长趋势。本章节我们需要展示过去一年时间内每个月的会员总数据量。展示效果如下图：  3.2 完善页面会员数量折线图对应的页面为/pages/report_member.html。 3.2.1 导入ECharts库第一步：将echarts.js文件复制到health_backend工程的plugins目录下 第二步：在report_member.html页面引入echarts.js文件 3.2.2 参照官方实例导入折线图 // 基于准备好的dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById('chart1')); //发送ajax请求获取动态数据 axios.get("/report/getMemberReport.do").then((res)=>{ myChart1.setOption( { title: { text: '会员数量' }, tooltip: {}, legend: { data:['会员数量'] }, xAxis: { data: res.data.data.months }, yAxis: { type:'value' }, series: [{ name: '会员数量', type: 'line', data: res.data.data.memberCount }] }); });根据折线图对数据格式的要求，我们发送ajax请求，服务端需要返回如下格式的数据： { "data":{ "months":["2019.01","2019.02","2019.03","2019.04"], "memberCount":[3,4,8,10] }, "flag":true, "message":"获取会员统计数据成功" }3.3 后台代码3.3.1 Controller在health_backend工程中创建ReportController并提供getMemberReport方法 package com.itheima.controller; import com.alibaba.dubbo.config.annotation.Reference; import com.itheima.constant.MessageConstant; import com.itheima.entity.Result; import com.itheima.pojo.Setmeal; import com.itheima.service.MemberService; import com.itheima.service.ReportService; import com.itheima.service.SetmealService; import com.itheima.utils.DateUtils; import org.apache.poi.xssf.usermodel.XSSFRow; import org.apache.poi.xssf.usermodel.XSSFSheet; import org.apache.poi.xssf.usermodel.XSSFWorkbook; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.math.BigDecimal; import java.text.SimpleDateFormat; import java.util.*; /** * 统计报表 */ @RestController @RequestMapping("/report") public class ReportController { @Reference private MemberService memberService; /** * 会员数量统计 * @return */ @RequestMapping("/getMemberReport") public Result getMemberReport(){ Calendar calendar = Calendar.getInstance(); calendar.add(Calendar.MONTH,-12);//获得当前日期之前12个月的日期 List list = new ArrayList(); for(int i=0;i |
【本文地址】