SpringBoot实战项目(五)--用户新增功能之页面构建
新增功能涉及三张表(用户表,角色表,用户角色关联表)
首先打开添加页面后需要把系统角色查询出来,也就是在新增用户的同时给用户设置角色
页面最终效果(截图屏幕有限)
页面代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>新增用户信息</title> 7 <header th:replace="header.html"></header> 8 </head> 9 10 <body> 11 <div class="x-body"> 12 <form class="layui-form"> 13 14 <div class="layui-form-item"> 15 <label for="L_username" class="layui-form-label"> 16 <span class="x-red">*</span>用户名 17 </label> 18 <div class="layui-input-inline"> 19 <input type="text" id="L_username" th:value="${sysUser.userName}" name="userName" lay-verify="required" autocomplete="off" class="layui-input"> 20 </div> 21 <div class="layui-form-mid layui-word-aux"> 22 <span class="x-red">*</span>将会成为您唯一的登入名 23 </div> 24 </div> 25 <div class="layui-form-item"> 26 <label for="L_pass" class="layui-form-label"> 27 <span class="x-red">*</span>密码 28 </label> 29 <div class="layui-input-inline"> 30 <input type="password" id="L_pass" th:value="${sysUser.passWord}" name="passWord" lay-verify="pass" autocomplete="off" class="layui-input"> 31 </div> 32 <div class="layui-form-mid layui-word-aux"> 33 6到16个字符 34 </div> 35 </div> 36 <div class="layui-form-item"> 37 <label for="L_repass" class="layui-form-label"> 38 <span class="x-red">*</span>确认密码 39 </label> 40 <div class="layui-input-inline"> 41 <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" autocomplete="off" class="layui-input"> 42 </div> 43 </div> 44 <div class="layui-form-item"> 45 <label for="L_nickname" class="layui-form-label"> 46 <span class="x-red">*</span>昵称 47 </label> 48 <div class="layui-input-inline"> 49 <input type="text" id="L_nickname" th:value="${sysUser.nickName}" name="nickName" required="" lay-verify="nickname" autocomplete="off" class="layui-input"> 50 </div> 51 </div> 52 <div class="layui-form-item"> 53 <label for="L_telephone" class="layui-form-label"> 54 <span class="x-red">*</span>手机 55 </label> 56 <div class="layui-input-inline"> 57 <input type="text" id="L_telephone" th:value="${sysUser.telephone}" name="telephone" required="" lay-verify="telephone" autocomplete="off" class="layui-input"> 58 </div> 59 <div class="layui-form-mid layui-word-aux"> 60 11位数字 61 </div> 62 </div> 63 <div class="layui-form-item"> 64 <label for="L_email" class="layui-form-label"> 65 <span class="x-red">*</span>邮箱 66 </label> 67 <div class="layui-input-inline"> 68 <input type="text" id="L_email" th:value="${sysUser.email}" name="email" required="" lay-verify="email" autocomplete="off" class="layui-input"> 69 </div> 70 </div> 71 <div class="layui-form-item"> 72 <label for="L_email" class="layui-form-label">生日</label> 73 <div class="layui-input-inline"> 74 <input type="text" id="L_birthday" th:value="${sysUser.birthday}" name='birthday' placeholder="yyyy-MM-dd" class="layui-input "> 75 </div> 76 </div> 77 <div class="layui-form-item"> 78 <label class="layui-form-label">性别</label> 79 <div class="layui-input-block"> 80 <input type="radio" th:field="${sysUser.sex}" name="sex" value="1" title="男" checked=""> 81 <input type="radio" th:field="${sysUser.sex}" name="sex" value="0" title="女"> 82 </div> 83 </div> 84 <input type="text" id="roleId" name="roleId" style="display:none;"/> 85 <div class="layui-form-item"> 86 <label class="layui-form-label">角色</label> 87 <div class="layui-input-block show-role-container"> 88 </div> 89 </div> 90 <div class="layui-form-item"> 91 <label for="L_email" class="layui-form-label"> 92 </label> 93 <button class="layui-btn" lay-filter="add" lay-submit=""> 94 保存 95 </button> 96 </div> 97 </form> 98 </div> 99 <script> 100 101 layui.use(['form','layer', 'laydate'], function(){ 102 $ = layui.jquery; 103 var form = layui.form 104 ,layer = layui.layer 105 ,laydate = layui.laydate; 106 getAllRole(function(){ 107 layui.form.render('radio') 108 }); 109 //日期 110 laydate.render({ 111 elem: '#L_birthday' 112 ,trigger: 'click' 113 ,format: 'yyyy-MM-dd' //可任意组合 114 }); 115 116 117 //自定义验证规则 118 form.verify({ 119 nikename: function(value){ 120 if(value.length < 5){ 121 return '昵称至少得5个字符啊'; 122 } 123 } 124 ,telephone: [/(.+){6,12}$/, '电话号码必须6到12位'] 125 ,pass: [/(.+){6,12}$/, '密码必须6到12位'] 126 ,repass: function(value){ 127 if($('#L_pass').val()!=$('#L_repass').val()){ 128 return '两次密码不一致'; 129 } 130 } 131 }); 132 133 //监听提交 134 form.on('submit(add)', function(data){ 135 var rolelRadio = $("[name=roleId]:checked"); 136 if(rolelRadio == undefined || rolelRadio.length <= 0){ 137 layer.alert("请给该用户设置角色"); 138 return false; 139 } 140 data.field.roleId = rolelRadio.val(); 141 $.ajax({ 142 url:"/user/add", 143 type:"POST", 144 data:data.field, 145 dataType:'json', 146 success:function(result){ 147 if(result.code == 500 || result.code == 5000100 || result.code == 5000101 || result.code == 5000102){ 148 layer.alert(result.msg); 149 }else{ 150 layer.alert("用户添加成功!", {icon: 6},function () { 151 //关闭当前frame 152 xadmin.close(); 153 // 可以对父窗口进行刷新 154 xadmin.father_reload(); 155 }); 156 } 157 } 158 }); 159 return false; 160 }); 161 162 163 }); 164 function getAllRole(callback){ 165 $.ajax({ 166 url:"/role/all", 167 type:"GET", 168 dataType:'json', 169 success:function(result){ 170 var html = ""; 171 if(result.datas && result.datas.length > 0){ 172 for(i in result.datas ){ 173 html += '<input type="radio" name="roleId" value="'+result.datas[i].id+'" title="'+result.datas[i].roleName+'" >' + 174 '<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>'+result.datas[i].roleName+'</div></div>'; 175 } 176 $(".show-role-container").html(html); 177 callback(); 178 } 179 } 180 }); 181 } 182 </script> 183 </body> 184 </html>
首先在UserControllerd 添加打开页面路径并绑定数据模型
新建RoleController(service层,dao层同理)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package com.beilin.controller; 2 3 import com.beilin.Service.RoleService; 4 import com.beilin.entity.SysRole; 5 import com.beilin.result.Results; 6 import org.springframework.beans.factory.annotation.Autowired; 7 import org.springframework.stereotype.Controller; 8 import org.springframework.web.bind.annotation.GetMapping; 9 import org.springframework.web.bind.annotation.RequestMapping; 10 import org.springframework.web.bind.annotation.ResponseBody; 11 12 13 @Controller 14 @RequestMapping("/role") 15 public class RoleController { 16 17 @Autowired 18 private RoleService roleService; 19 20 /** 21 * 获取所有角色 22 * @return 23 */ 24 @GetMapping("/all") 25 @ResponseBody 26 public Results<SysRole> getAll(){ 27 return roleService.getAllRoles(); 28 } 29 30 }
Serice层
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package com.beilin.Service; 2 3 import com.beilin.entity.SysRole; 4 import com.beilin.result.Results; 5 6 7 public interface RoleService { 8 9 Results<SysRole> getAllRoles(); 10 }
实现类
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package com.beilin.Service.Impl; 2 3 import com.beilin.Service.RoleService; 4 import com.beilin.dao.RoleDao; 5 import com.beilin.entity.SysRole; 6 import com.beilin.result.Results; 7 import org.springframework.beans.factory.annotation.Autowired; 8 import org.springframework.stereotype.Service; 9 import org.springframework.transaction.annotation.Transactional; 10 11 @Service 12 public class RoleServiceImpl implements RoleService { 13 @Autowired 14 private RoleDao roleDao; 15 16 @Override 17 public Results<SysRole> getAllRoles() { 18 return Results.success(roleDao.getAllRoles()); 19 } 20 }
Dao层
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package com.beilin.dao; 2 3 import com.beilin.entity.SysRole; 4 5 import java.util.List; 6 7 public interface RoleDao { 8 /** 9 * 查询所有角色,List接收 10 * @return 11 */ 12 List<SysRole> getAllRoles(); 13 }
SQL映射文件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <?xml version="1.0" encoding="utf-8" ?> 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > 3 <mapper namespace="com.beilin.dao.RoleDao"> 4 <resultMap id="SysRoleMap" type="com.beilin.entity.SysRole"> 5 <id property="id" column="id"/> 6 <result property="roleName" column="role_name"/> 7 <result property="remark" column="remark"/> 8 <result property="createTime" column="createTime"/> 9 <result property="updateTime" column="updateTime"/> 10 </resultMap> 11 <sql id="Base_result"> 12 id,role_name,remark,createTime,updateTime 13 </sql> 14 15 <!--查询所有角色--> 16 <select id="getAllRoles" resultMap="SysRoleMap"> 17 select<include refid="Base_result"/> from sys_role 18 </select> 19 20 </mapper>
检查无误,debug运行---