阶段二-vue+axios实现CRM系统删除用户功能

vue+axios实现删除用户功能

.超人不会飞.

192人浏览 · 2022-11-10 22:52:43

.超人不会飞. · 2022-11-10 22:52:43 发布

一、前端HTML

1.1、给表格的按钮添加删除时执行的函数

在这里插入图片描述

1.2、在执行删除的函数中通过axios请求servlet删除用户

在这里插入图片描述

1.3、刷新用户列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!-- 导入bootstrap依赖 -->
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 导入vue依赖   -->
    <script src="assets/axios.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <style>
        a:link{font-size: 20px;color: rgb(109,109,109);}
        a:visited{font-size: 20px;color: rgb(109,109,109);}
        a:hover{font-size: 20px;color: white;text-decoration: none}
    </style>
</head>
<body>
<div class="container" id = "app">
    <!-- bootstrap行 -->
    <div class="row">
        <!-- 显示导航 -->
        <div class="col-md-3" style="background-color: rgb(0,21,41);height: 800px">
            <div class="row">
                <div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;font-weight: bold">
                    <img src="assets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px"/>
                    蜗牛CRM管理系统
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="index.html">进入首页</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="user_add.html">添加用户</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="#">客户管理</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="#">添加客户</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="user_alert.html">修改密码</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登录</a>
                </div>
            </div>
        </div>

        <!-- 显示内容 -->
        <div class="col-md-9" style="border: 1px solid gray;height: 800px">
            <div class="row">
                <!-- 显示提示位置 -->
                <div class="col-md-12" style="height: 70px ;font-size: 18px;color: rgb(109,109,109);line-height: 70px;font-weight: bold;padding-left: 20px">
                    > &nbsp;&nbsp;用户管理
                </div>
            </div>

            <div class="row" style="background-color: rgb(240,242,245);height: 730px;padding:20px">
                <!-- 显示内容 -->
                <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
                    <!-- 使用bootstrap表格斑马线样式 -->
                    <table class="table table-striped" style="margin-top: 20px">
                        <!-- 表格描述 -->
                        <caption>用户管理-用户列表</caption>
                        <!-- 表头 -->
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>昵称</th>
                                <th>性别</th>
                                <th>生日</th>
                                <th>手机号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <!-- 表格内容 -->
                        <tbody>
                            <tr v-for="u in users">
                                <td>{{u.id}}</td>
                                <td>{{u.userName}}</td>
                                <td>{{u.nickName}}</td>
                                <td>{{u.sex == 0? '男':'女'}}</td>
                                <td>{{u.birth}}</td>
                                <td>{{u.phone}}</td>
                                <td>
                                    <button class="btn btn-link" @click="doAlert(u.id)">修改</button>
                                    <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            users:null
        },
        methods:{
            doAlert(id){//点击修改按钮后触发
                window.location.href = 'user_update.html?id='+id;
            },
            // 删除用户,根据id
            doDelete(id){
                axios.get("delete?id="+id).then(response=>{
                    if (response.data == '删除成功') {//删除成功
                        // 刷新用户列表
                        // window.location.href = 'user_list.html';
                        this.requestUserList();
                    } else {//删除失败
                        alert("输入有误!!!");//弹窗警告
                    }
                })
            },
            requestUserList(){ // 请求用户列表
                axios.get("user_list").then(response=>{
                    this.users = response.data;
                })
            }
        },
        created:function(){
            // 调用请求用户列表的函数
            this.requestUserList();
        }
    });
</script>
</body>
</html>

二、后端Servlet

2.1、DAO中添加根据id删除用户的方法

    public int deleteById(int id) {
        String sql = "delete from t_user where id ="+id;
        return this.excuteUpdate(sql);
    }

2.2、创建UserDeleteServlet

package controller;

import com.alibaba.fastjson.JSON;
import dao.Impl.UserDaoImpl;
import dao.UserDao;
import entity.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/delete")
public class UserDeleteServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charser=utf8");

        PrintWriter writer = resp.getWriter();
        UserDao userDao = new UserDaoImpl();

        int id = Integer.parseInt(req.getParameter("id"));
        int delete = userDao.deleteById(id);

        if(delete > 0){
            writer.print("删除成功");
        }else {
            writer.print("删除失败!!!");
        }

        writer.close();
    }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^