New Features

前端:使用ajax实现禁用或启用账户的功能
后端：禁用/启用配套后端代码

Signed-off-by: Chenx221 <chenx221@yandex.com>

project2/out/artifacts/project2_war_exploded/WEB-INF/classes/mapper/UserMapper.xml

@@ -30,4 +30,14 @@
         SET password = #{password}
         WHERE id = #{id}
     </update>
+    <update id="disabledUser" parameterType="int">
+        UPDATE user
+        SET disabled = 1
+        WHERE id = #{id}
+    </update>
+    <update id="enabledUser" parameterType="int">
+        UPDATE user
+        SET disabled = 0
+        WHERE id = #{id}
+    </update>
 </mapper>

project2/out/artifacts/project2_war_exploded/WEB-INF/views/usermanage.jsp

@@ -165,7 +165,8 @@
                                             </c:when>
                                             <c:when test="${user.disabled_str == true}">
                                                 <button type="button" class="btn btn-success"><i
-                                                        class="fas fa-circle-check me-1"></i>启用账户
+                                                        class="fas fa-circle-check me-1"
+                                                        onclick="userenabled(${user.id})"></i>启用账户
                                                 </button>
                                             </c:when>
                                         </c:choose>
@@ -352,16 +353,32 @@
             </div>
         </div>
     </div>
+    <!-- Modal -->
+    <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel3"
+         aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel3">
+                        Info
+                    </h5>
+                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p id="de_message"></p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" data-mdb-dismiss="modal" id="de_button">OK</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </main>
-
 <!--Main layout-->
-
 <!-- Footer -->
 <footer class="bg-link text-center text-lg-start ">
 </footer>
 <!-- Footer -->
-
-
 <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/mdb.min.js"></script>
 <script>
     $(document).ready(function () {
@@ -380,13 +397,106 @@
     }
 
     // 监听权限组选择框的变化
-    document.getElementById('role-select').addEventListener('change', function() {
+    document.getElementById('role-select').addEventListener('change', function () {
         var roleSelect = document.getElementById('role-select');
         var typeText4 = document.getElementById('typeText4');
 
         // 如果选择的是管理员权限组，则禁用身份ID输入框；否则启用身份ID输入框
         typeText4.disabled = roleSelect.value === 'admin';
     });
+
+    //实现按钮的点击事件（禁用/启用用户)
+    $(document).ready(function () {
+        $('.btn-danger').on('click', function () {
+            var id = $(this).closest('tr').find('td:first').text();
+            userdisabled(id);
+            // console.log(id) // debug
+        });
+    });
+    $(document).ready(function () {
+        $('.btn-success').on('click', function () {
+            var id = $(this).closest('tr').find('td:first').text();
+            userenabled(id);
+            // console.log(id) // debug
+        });
+    });
+
+    //使用ajax在后台发送post禁用/启用用户请求
+    function userdisabled(id) {
+        //btn-danger
+        $.ajax({
+            url: 'userdisabled',
+            type: 'post',
+            data: {
+                id: id
+            },
+            success: function (data) {
+                if (data.status === 'success') {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("reload");
+                    });
+                    $('#exampleModal3').modal('show');
+                    $('#exampleModal3').on('hidden.bs.modal', function () {
+                        reloadka("reload");
+                    });
+                } else {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("close");
+                    });
+                    $('#exampleModal3').modal('show');
+                }
+            },
+            error: function (xhr, status, error) {
+                // 处理请求失败的逻辑
+                console.log('请求失败:', error);
+                alert('请求请求失败，请重试');
+            }
+        });
+    }
+
+    function userenabled(id) {
+        $.ajax({
+            url: 'userenabled',
+            type: 'post',
+            data: {
+                id: id
+            },
+            success: function (data) {
+                if (data.status === 'success') {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("reload");
+                    });
+                    $('#exampleModal3').modal('show');
+                    $('#exampleModal3').on('hidden.bs.modal', function () {
+                        reloadka("reload");
+                    });
+                } else {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("close");
+                    });
+                    $('#exampleModal3').modal('show');
+                }
+            },
+            error: function (xhr, status, error) {
+                // 处理请求失败的逻辑
+                console.log('请求失败:', error);
+                alert('请求请求失败，请重试');
+            }
+        });
+    }
+
+    //处理成功/失败后的刷新页面/关闭模态框操作
+    function reloadka(action) {
+        if (action === 'reload') {
+            window.location.reload();
+        } else if (action === 'close') {
+            $('#exampleModal3').modal('hide');
+        }
+    }
 </script>
 </body>
 

project2/src/main/java/cyou/chenx221/controller/UserController.java

@@ -11,9 +11,12 @@ import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
 
 import java.security.NoSuchAlgorithmException;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 @Controller
 public class UserController {
@@ -178,4 +181,43 @@ public class UserController {
         }
         return "redirect:/user/usermanage";
     }
+
+    @RequestMapping(path = "/user/userdisabled", method = {RequestMethod.POST})
+    @ResponseBody
+    public Map<String, String> userdisabled(@RequestParam("id") int id,
+                                            Model model) {
+        Map<String, String> response = new HashMap<>();
+        if (userMapper.getUserById(id).getUsername().equals(new UsernameHelper().getCurrentUsername())) {
+            response.put("status", "fail");
+            response.put("message", "不能禁用自己");
+            return response;
+        }
+        // 执行禁用用户的逻辑
+        int status_code = userMapper.disabledUser(id);
+        if (status_code == 1) {
+            response.put("status", "success");
+            response.put("message", "用户禁用成功");
+        } else {
+            response.put("status", "fail");
+            response.put("message", "用户禁用失败");
+        }
+        return response; // 返回包含成功信息的响应
+    }
+
+    @RequestMapping(path = "/user/userenabled", method = {RequestMethod.POST})
+    @ResponseBody
+    public Map<String, String> userenabled(@RequestParam("id") int id,
+                                           Model model) {
+        Map<String, String> response = new HashMap<>();
+        // 执行启用用户的逻辑
+        int status_code = userMapper.enabledUser(id);
+        if (status_code == 1) {
+            response.put("status", "success");
+            response.put("message", "用户启用成功");
+        } else {
+            response.put("status", "fail");
+            response.put("message", "用户启用失败");
+        }
+        return response; // 返回包含成功信息的响应
+    }
 }

project2/src/main/java/cyou/chenx221/mapper/UserMapper.java

@@ -19,4 +19,8 @@ public interface UserMapper {
     User getUserById(int id);
 
     int updateUserPassword(User user);
+
+    int disabledUser(int id);
+
+    int enabledUser(int id);
 }

project2/src/main/resources/mapper/UserMapper.xml

@@ -30,4 +30,14 @@
         SET password = #{password}
         WHERE id = #{id}
     </update>
+    <update id="disabledUser" parameterType="int">
+        UPDATE user
+        SET disabled = 1
+        WHERE id = #{id}
+    </update>
+    <update id="enabledUser" parameterType="int">
+        UPDATE user
+        SET disabled = 0
+        WHERE id = #{id}
+    </update>
 </mapper>

project2/web/WEB-INF/views/usermanage.jsp

@@ -165,7 +165,8 @@
                                             </c:when>
                                             <c:when test="${user.disabled_str == true}">
                                                 <button type="button" class="btn btn-success"><i
-                                                        class="fas fa-circle-check me-1"></i>启用账户
+                                                        class="fas fa-circle-check me-1"
+                                                        onclick="userenabled(${user.id})"></i>启用账户
                                                 </button>
                                             </c:when>
                                         </c:choose>
@@ -352,16 +353,32 @@
             </div>
         </div>
     </div>
+    <!-- Modal -->
+    <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel3"
+         aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel3">
+                        Info
+                    </h5>
+                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p id="de_message"></p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" data-mdb-dismiss="modal" id="de_button">OK</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </main>
-
 <!--Main layout-->
-
 <!-- Footer -->
 <footer class="bg-link text-center text-lg-start ">
 </footer>
 <!-- Footer -->
-
-
 <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/mdb.min.js"></script>
 <script>
     $(document).ready(function () {
@@ -380,13 +397,106 @@
     }
 
     // 监听权限组选择框的变化
-    document.getElementById('role-select').addEventListener('change', function() {
+    document.getElementById('role-select').addEventListener('change', function () {
         var roleSelect = document.getElementById('role-select');
         var typeText4 = document.getElementById('typeText4');
 
         // 如果选择的是管理员权限组，则禁用身份ID输入框；否则启用身份ID输入框
         typeText4.disabled = roleSelect.value === 'admin';
     });
+
+    //实现按钮的点击事件（禁用/启用用户)
+    $(document).ready(function () {
+        $('.btn-danger').on('click', function () {
+            var id = $(this).closest('tr').find('td:first').text();
+            userdisabled(id);
+            // console.log(id) // debug
+        });
+    });
+    $(document).ready(function () {
+        $('.btn-success').on('click', function () {
+            var id = $(this).closest('tr').find('td:first').text();
+            userenabled(id);
+            // console.log(id) // debug
+        });
+    });
+
+    //使用ajax在后台发送post禁用/启用用户请求
+    function userdisabled(id) {
+        //btn-danger
+        $.ajax({
+            url: 'userdisabled',
+            type: 'post',
+            data: {
+                id: id
+            },
+            success: function (data) {
+                if (data.status === 'success') {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("reload");
+                    });
+                    $('#exampleModal3').modal('show');
+                    $('#exampleModal3').on('hidden.bs.modal', function () { //针对点击modal外的情况的处理
+                        reloadka("reload");
+                    });
+                } else {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("close");
+                    });
+                    $('#exampleModal3').modal('show');
+                }
+            },
+            error: function (xhr, status, error) {
+                // 处理请求失败的逻辑
+                console.log('请求失败:', error);
+                alert('请求请求失败，请重试');
+            }
+        });
+    }
+
+    function userenabled(id) {
+        $.ajax({
+            url: 'userenabled',
+            type: 'post',
+            data: {
+                id: id
+            },
+            success: function (data) {
+                if (data.status === 'success') {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("reload");
+                    });
+                    $('#exampleModal3').modal('show');
+                    $('#exampleModal3').on('hidden.bs.modal', function () {
+                        reloadka("reload");
+                    });
+                } else {
+                    $('#de_message').text(data.message);
+                    $('#de_button').on('click', function () {
+                        reloadka("close");
+                    });
+                    $('#exampleModal3').modal('show');
+                }
+            },
+            error: function (xhr, status, error) {
+                // 处理请求失败的逻辑
+                console.log('请求失败:', error);
+                alert('请求请求失败，请重试');
+            }
+        });
+    }
+
+    //处理成功/失败后的刷新页面/关闭模态框操作
+    function reloadka(action) {
+        if (action === 'reload') {
+            window.location.reload();
+        } else if (action === 'close') {
+            $('#exampleModal3').modal('hide');
+        }
+    }
 </script>
 </body>