【2阶】使用vue+axios实现-显示用户列表丶删除用户-crm-3

小王码字

已于 2022-11-16 17:13:48 修改

阅读量683

点赞数

分类专栏： BootStrap Vue 文章标签：前端

于 2022-11-09 20:13:33 首次发布

本文链接：https://blog.csdn.net/Wangzz1217/article/details/127776430

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

BootStrap

6 篇文章 1 订阅

订阅专栏

一.用户列表显示

1.1前端

1.1.1 axios发送请求到Servlet获取用户列表数据

1.1.2 将数据通过v-for指令显示到tale上

1.1.3代码

1.2后端

1.2.1查询用户的方法

1.2.2 UserListServlet

二.用户列表删除功能

2.1前端

2.1.1表格的按钮添加删除时执行的函数

2.1.2通过axios请求servlet删除用户

2.1.3刷新用户列表(获取用户列表数据)

2.2后端

2.2.3删除方法

2.2.4 UserDeleteServlet

一.用户列表显示

1.1前端

1.1.1 axios发送请求到Servlet获取用户列表数据

1.1.2 将数据通过v-for指令显示到tale上

1.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/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.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">
    <!--行-->
    <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="update_passwd.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;color:rgb(109,109,109);font-size: 18px; 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 20px 20px 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="doUpdate(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
        },
        created:function () {//页面加载完成之后执行
            this.requstUserList();//请求用户列表的函数
        },
        methods: {
            //删除用户,根据id
            doDelete(id) {
                //console.log("要删除的用户id:"+id)//打印控制台
                //请求servlet删除用户
                axios.get("delete_user?id="+id).then(res => {
                    if (res.data == '删除成功'){
                        this.requstUserList();//请求用户列表的函数

                    }else{
                        alert("删除失败!!!")
                    }
                });
            },
            doUpdate(id){//点击修改按钮触发
                //跳转到user_update.html页面,并且传递id过去
                window.location.href = "user_update.html?id="+id;
            },
            requstUserList(){
                //发送请求获取用户列表
                axios.get("user_list").then(response => {
                    this.users = response.data;
                });
            }
        }
    });
</script>
</body>
</html>

1.2后端

1.2.1查询用户的方法

public List<User> selectAll() {
        ArrayList<User> list = new ArrayList<User>();

        String sql = "select * from t_user";
        ResultSet rs = this.executeQuery(sql);

        try {
            while(rs.next()){
                User user = new User();
                user.setId(rs.getInt("id"));
                user.setUserName(rs.getString("user_name"));
                user.setPasswd(rs.getString("passwd"));
                user.setNickName(rs.getString("nick_name"));
                user.setSex(rs.getInt("sex"));
                user.setPhone(rs.getString("phone"));
                user.setImg(rs.getString("img"));
                user.setBirth(rs.getString("birth"));
                list.add(user);
            }
            this.closeAll();//释放资源
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

        return list;
    }

1.2.2 UserListServlet

package controller;

import com.alibaba.fastjson.JSON;
import dao.impl.UserDAOImpl;
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;
import java.util.List;

@WebServlet("/user_list")
public class UserListServlet 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;charset=utf8");

        //获取PrintWriter
        PrintWriter writer = resp.getWriter();

        //查询数据库
        UserDAOImpl dao = new UserDAOImpl();
        List<User> list = dao.selectAll();

        String json = JSON.toJSONString(list);

        writer.print(json);

        //释放资源
        writer.close();


    }
}

二.用户列表删除功能

2.1前端

2.1.1表格的按钮添加删除时执行的函数

2.1.2通过axios请求servlet删除用户

2.1.3刷新用户列表(获取用户列表数据)

2.2后端

2.2.3删除方法

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

2.2.4 UserDeleteServlet

package controller;

import dao.UserDAO;
import dao.impl.UserDAOImpl;

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;

/**
 * 删除用户,根据id
 */
@WebServlet("/delete_user")
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;charset=utf8");

        //获取PrintWriter
        PrintWriter writer = resp.getWriter();

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

        //通过dao删除用户
        UserDAO dao = new UserDAOImpl();
        int count  =dao.deleteById(id);

        //向网页输出数据
        if(count>0){
            writer.print("删除成功");
        }else{
            writer.print("删除失败");
        }

        //释放资源
        writer.close();
    }
}