springboot用户信息删除(delete方式)

 需求:用户信息删除操作

 

具体步骤:

1.  userlist.html 页面内容如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
     <title>Dashboard Template for Bootstrap</title>
     <!-- Bootstrap core CSS -->
     <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <script src="assets/js/jquery-3.4.0.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
</head>

<body>

<!--在原来的位置引用公共的头部元素,原来的 <nav元素就是在这里的
commonsHead:模板名,根据Spring Boot配置的Thymeleaf映射查找
head:是模板中公用的代码片段-->
<div ></div>

<div class="container-fluid">
    <div class="row">

        <!-- 在原来的左侧菜单位置引用抽取好的公共左侧菜单代码
        1、这是使用的 id选择器 进行的引用
        2、引用公共代码的片段的同时传递参数值过去-->
        <div></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2><a th:href="@{/userCRUD}" class="btn btn-primary">用户添加</a></h2>
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>性別</th>
                        <th>生日</th>
                        <th>所属部门</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- th:each 表示遍历,userList是后台的参数名;循环时每次的变量名为 user
                    如同 JSTL 一样,当userList为null 或者大小为0 时,不会报错-->
                    <tr th:each="user:${userList}">
                        <!-- th:text 为标签赋值-->
                        <td th:text="${user.uId}"></td>
                        <!-- 这是行内写法,写成: <td th:text="${user.uName}"></td> 也是可以的-->
                        <td>[[${user.uName}]]</td>
                        <td th:text="${user.email}"></td>
                        <!-- 三元运算符,User的gender为0则表示女生,1表示南山-->
                        <td th:text="${user.gender}==0?'女':'男'"></td>
                        <!-- 这是 Thymeleaf 的日期格式化,如同JSTL的日期格式类似;可以官方文档-->
                        <td th:text="${#dates.format(user.birth, 'yyyy-MM-dd')}"></td>
                        <!-- 这是级联获取属性值,因为User中关联了 Department 对象-->
                        <td th:text="${user.department.depName}"></td>
                        <td>
                            <a class="btn btn-sm btn-primary" th:href="@{/userCRUD/}+${user.uId}">修改</a>
                            <button th:attr="del_uri=@{/userCRUD/}+${user.uId}"  class="btn btn-sm btn-danger deleteBtn">删除</button>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>

        </main>
    </div>
</div>

<form id="deleteEmpForm"  method="post">
    <input type="hidden" name="_method"  value="delete"/>
</form>
<script>
   $(".deleteBtn").click(function(){

   alert("abc");
      //删除当前员工的
       $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
       alert("abc");
      //return false;
    });
</script>
</body>

</html>

(1)首先,为了在js中对删除这个按钮做操作,我们在class中加一个属性值,我这里起名叫:deleteBtn

<button th:attr="del_uri=@{/emp/}+${emp.id}"  class="btn btn-sm btn-danger deleteBtn">删除</button>

 

(2)click一个事件function,返回一个fasle是为了取消这个按钮的默认行为。click事件触发form表单的deleteEmpForm

<form id="deleteEmpForm"  method="post">
    <input type="hidden" name="_method"  value="delete"/>
</form>
<script>
   $(".deleteBtn").click(function(){

   alert("abc");
      //删除当前员工的
       $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
       alert("abc");
      //return false;
    });
</script>
</body>

</html>

2. 在UserController类里添加deleteEmployee函数 

/**员工删除
 *
 */
    @DeleteMapping("userCRUD/{userId}")
    public String deleteEmployee(@PathVariable("userId") Integer id){
        userDaoImpl.delUserById(id);
        return  "redirect:/userlist";
    }

 

 

/**
 * 跳转到用户列表页面
 *
 * @param model 用户设值返回页面
 * @return
 */

@GetMapping("userlist")
public String findAllUsers(Model model) {
    List<User> userList = userDaoImpl.getAll();
    model.addAttribute("userList", userList);

    /** 往前端 Thymeleaf 模板引擎时,开头不要加 "/" ,因为它默认配置的前缀就是:
     * spring.thymeleaf.prefix=classpath:/templates/
     */
    System.out.println("findAllUsers");
    return "userList";
}

3.UserDaoImpl类里添加 delUserById

/**
 * 根据用户id删除用户
 *
 * @param user
 */
public void delUserById(Integer userId) {
    if (userId != null) {
        for (int i = 0; i < userList.size(); i++) {
            if (userList.get(i).getUId().equals(userId)) {
                userList.remove(i);
                break;
            }
        }
    }
}

  • 2
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值