第2阶段18-vue+axios实现CRM系统客户展示功能

最新推荐文章于 2024-04-09 17:08:54 发布

M78910

最新推荐文章于 2024-04-09 17:08:54 发布

阅读量208

点赞数

文章标签： vue.js servlet 前端

原文链接：https://juejin.cn/post/7164307964902244365

版权

第2阶段18-vue+axios实现CRM系统客户展示功能

一、后台servlet开发

1.1、在CustomDAO中添加查询所有客户的方法

public List<Custom> selectAllCustoms() {
    String sql = "SELECT c.*, u.nick_name FROM t_custom AS c LEFT JOIN t_user AS u ON c.uid=u.id";
    ResultSet rs = this.executeQuery(sql);
    List<Custom> list = new ArrayList<Custom>(); //用于保存所有客户信息

    try {
        while(rs.next()){
            Custom custom = new Custom();
            custom.setName(rs.getString("name"));
            custom.setAge(rs.getInt("age"));
            custom.setSex(rs.getInt("sex"));
            custom.setPhone(rs.getString("phone"));
            custom.setWechat(rs.getString("wechat"));
            custom.setAddr(rs.getString("addr"));
            custom.setHoby(rs.getString("hoby"));
            custom.setEmail(rs.getString("email"));
            custom.setOccupation(rs.getString("occupation"));
            custom.setUid(rs.getInt("uid"));
            custom.setNickName(rs.getString("nick_name"));
            list.add(custom);
        }
        this.closeAll();
    } catch (SQLException throwables) {
        throwables.printStackTrace();
    }

    return list;
}

1.2、在CustomDAO中添加根据用户id查询所有客户的方法

public List<Custom> selectCustomsByUid(int uid) {
    String sql = "select * from t_custom where uid="+uid;
    ResultSet rs = this.executeQuery(sql);
    List<Custom> list = new ArrayList<Custom>(); //用于保存所有客户信息

    try {
        while(rs.next()){
            Custom custom = new Custom();
            custom.setName(rs.getString("name"));
            custom.setAge(rs.getInt("age"));
            custom.setSex(rs.getInt("sex"));
            custom.setPhone(rs.getString("phone"));
            custom.setWechat(rs.getString("wechat"));
            custom.setAddr(rs.getString("addr"));
            custom.setHoby(rs.getString("hoby"));
            custom.setEmail(rs.getString("email"));
            custom.setOccupation(rs.getString("occupation"));
            try {
                custom.setNickName(rs.getString("nick_name"));
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            custom.setUid(uid);
            list.add(custom);
        }
        this.closeAll();
    } catch (SQLException throwables) {
        throwables.printStackTrace();
    }

    return list;
}

1.3、添加CustomAddServlet

在servlet中获取session中保存的用户，判断当前登录的用户是否是admin，如果是则显示全部用户，否则显示当前登录用户的客户列表

package controller;

import com.alibaba.fastjson.JSON;
import dao.CustomDAO;
import dao.impl.CustomDAOImpl;
import entity.Custom;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * 获取全部客户
 */
@WebServlet("/custom_list")
public class CustomListServlet 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 writer = resp.getWriter();

        //从session中获取用户信息，看看是不是admin用户
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("user");

        //通过dao查询客户列表
        CustomDAO dao = new CustomDAOImpl();
        List<Custom> list = null;
        if("admin".equals(user.getUserName())){
            //显示全部的客户信息
            list = dao.selectAllCustoms();
        } else {
            //显示当前登录的用户自己的客户信息
            list = dao.selectCustomsByUid(user.getId());
        }
        //向网页输出客户信息
        String json = JSON.toJSONString(list); //将list对象转换成json
        writer.print(json);

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

二、前端html开发

2.1、在created方法中通过axios发送请求获取客户列表

reqeustCustomList(){ //请求客户列表
    //发送请求获取用户列表
    axios.get("custom_list").then(response => {
        this.customs = response.data;
    });
}

created: function () { //页面加载完成之后执行
    this.reqeustCustomList(); //调用请求用户列表的函数
},

2.2、通过v-for指令显示客户列表

<tr v-for="u in customs">
    <td>{{u.id}}</td>
    <td>{{u.name}}</td>
    <td>{{u.age}}</td>
    <td>{{u.sex}}</td>
    <td>{{u.phone}}</td>
    <td>{{u.wechat}}</td>
    <td>{{u.addr}}</td>
    <td>{{u.hoby}}</td>
    <td>{{u.email}}</td>
    <td>{{u.occupation}}</td>
    <td>{{u.nickName}}</td>
    <td>
        <button class="btn btn-link" @click="doUpdate(u.id)">修改</button>
        <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
    </td>
</tr>

2.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">
    <!-- bootstrap行-->
    <div class="row">
        <!-- 显示导航-->
        <div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px;">
            <!-- bootstrap行 -->
            <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="#">修改密码</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">
                <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>
                                <th>爱好</th>
                                <th>Email</th>
                                <th>职业</th>
                                <th>创建者</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <!-- 表格内容-->
                        <tbody>
                            <tr v-for="u in customs">
                                <td>{{u.id}}</td>
                                <td>{{u.name}}</td>
                                <td>{{u.age}}</td>
                                <td>{{u.sex}}</td>
                                <td>{{u.phone}}</td>
                                <td>{{u.wechat}}</td>
                                <td>{{u.addr}}</td>
                                <td>{{u.hoby}}</td>
                                <td>{{u.email}}</td>
                                <td>{{u.occupation}}</td>
                                <td>{{u.nickName}}</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: {
            customs: null
        },
        created: function () { //页面加载完成之后执行
            this.reqeustCustomList(); //调用请求用户列表的函数
        },
        methods: {
            /* 删除用户，根据id*/
            doDelete(id){
                // console.log("要删除的用户id："+id);
                // 请求servlet删除用户
                axios.get("delete_user?id="+id).then(response => {
                    if(response.data == '删除成功'){
                        //刷新用户列表
                        this.reqeustUserList(); //调用请求用户列表的函数
                    } else {
                        alert("删除失败！！！");
                    }
                });
            },
            doUpdate(id){ //点击修改按钮后触发
                //跳转到user_update.html页面，并且传递id过去
                window.location.href = "user_update.html?id="+id;
            },
            reqeustCustomList(){ //请求客户列表
                //发送请求获取用户列表
                axios.get("custom_list").then(response => {
                    this.customs = response.data;
                });
            }
        }
    });
</script>
</body>
</html>