制作CRM管理系统05(客户管理)

最新推荐文章于 2023-10-25 22:12:03 发布

朵朵宝

最新推荐文章于 2023-10-25 22:12:03 发布

阅读量344

点赞数

分类专栏： CRM管理系统文章标签： servlet java 开发语言

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/magic_818/article/details/127792680

版权

CRM管理系统专栏收录该内容

8 篇文章 4 订阅

订阅专栏

目录

一、后台servlet开发

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

1.2、添加CustomAddServlet

二、前端html开发

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

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

2.3、完整前端代码

一、后台servlet开发

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

接口

接口1:根据id查询客户,即员工只可以查询到自己的客户

接口2:查询所有客户,超级管理员使用的,可以查到所有客户

DAO实现类

根据id查询

代码如下:

public List<Custom> selectCustomsByUid(int uid) {
        String sql="select * from t_custom where uid="+uid;
        ResultSet rs = executeQuery(sql);
        ArrayList<Custom> list = new ArrayList<Custom>();
        try {
            if (rs.next()){
                Custom custom = new Custom();
                custom.setId(rs.getInt("id"));
                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);
            }

查询所有

代码如下:

    public List<Custom> selectAllCustom() {
        String sql = "SELECT c.*, u.nick_name FROM t_custom AS c LEFT JOIN t_user AS u ON c.uid=u.id";//外连接
        //String sql="SELECT t_custom.*, t_user.nick_name FROM t_custom, t_user WHERE t_custom.uid=t_user.id"; 内连接

        ResultSet rs = this.executeQuery(sql);
        List<Custom> list = new ArrayList<Custom>(); //用于保存所有客户信息

        try {
            while(rs.next()){
                Custom custom = new Custom();
                custom.setId(rs.getInt("id"));
                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.setNickName(rs.getString("nick_name"));
                custom.setUid(rs.getInt("uid"));
                list.add(custom);
            }
            closeAll();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

        return list;

    }

1.2、添加CustomAddServlet

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

package controller;

import com.alibaba.fastjson.JSON;
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=utf-8");
        //获取打印输出流,向网页输出内容
        PrintWriter writer = resp.getWriter();
        //从session中获取用户信息,看看是不是admin用户
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("user");
        //通过dao查询客户列表
        CustomDAOImpl dao = new CustomDAOImpl();
        List<Custom> list=null;
        if ("admin".equals(user.getUserName())){
            //是超级管理员,显示所有的客户信息
            list = dao.selectAllCustom();
        }else{
            //不是超级管理员,显示登录用户自己的客户信息
            list=dao.selectCustomsByUid(user.getId());
        }
        //向页面输出客户信息
        String json= JSON.toJSONString(list);
        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="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--    导入vue依赖-->
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/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);
        }

        /*鼠标悬浮链接上*/
        /*text-decoration: none;不显示下划线*/
        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="asset/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="custom_list.html">客户管理</a>
                </div>
            </div>
            <!--                -->
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
                    <a href="custom_add.html">添加客户</a>
                </div>
            </div>
            <!--                -->
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
                    <a href="changepassword.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;">
                <!--                显示内容-->
                <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 表头-->
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>手机号</th>
                            <th>微信号</th>
                            <th>住址</th>
                            <th>爱好</th>
                            <th>邮箱</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){
                /*尝试能不能找到要删除的id
                console.log("要删除的用户id:"+id)
                 */
                //请求serverlet删除用户
                axios.get("delete_user?id="+id).then(response =>{
                    if (response.data=='删除成功'){
                        //删除用户列表
                        this.reqeustCustomList();//调用请求用户列表的函数
                    }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>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作CRM管理系统05(客户管理)

CRM管理系统(客户管理系统)实现管理可以查看所有客户,单个员工只能看自己的客户
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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