SpringBoot实战项目（五）--用户新增功能之页面构建

本文转载自查看原文 2020-04-12 14:45 646 SpringBoot实战

新增功能涉及三张表（用户表，角色表，用户角色关联表）

首先打开添加页面后需要把系统角色查询出来，也就是在新增用户的同时给用户设置角色

页面最终效果（截图屏幕有限）

页面代码

  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>

user-add.html

首先在UserControllerd 添加打开页面路径并绑定数据模型

新建RoleController(service层,dao层同理)

 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 }

RoleController

Serice层

 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 }

RoleService

实现类

 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 }

RoleServiceImpl

Dao层

 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 }

RoleDao

SQL映射文件

 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>

RoleMapper.xml

检查无误，debug运行---

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。