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刪除。

猜您在找 SpringBoot實戰項目（九）--用戶修改功能之顯示用戶對應角色 SpringBoot實戰項目（四）--用戶模糊查詢以及分頁功能實現 gradle構建實戰-從普通項目到springboot多模塊項目 Intellij IDEA 構建Spring Web項目 — 用戶登錄功能項目實戰從0到1之hive（17）hive求新增用戶數，日活，留存率 10.flask博客項目實戰五之用戶登錄功能 vue項目構建與實戰 SpringBoot實戰項目（十四）--登錄功能之登錄表單驗證 springboot項目快速構建從無到有構建vue實戰項目（三）