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

太过爱你忘了你带给我的痛 2023-10-11 19:43 41阅读 0赞

**目录**

一、后台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:查询所有客户,超级管理员使用的,可以查到所有客户**
> 
> ![195ad26412a447dd93f7e9e32dcc8250.png][]
> 
> **DAO实现类**
> 
> **根据id查询**
> 
> ![b723d00de5e6462e93b2c2efb9fe0bcb.png][]
> 
> **代码如下:**
> 
>     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);
>                 }
> 
> **查询所有**
> 
> ![aa5d7e22a5b24e5bb20b0a95adf327e6.png][]
> 
> **代码如下:**
> 
>     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>
        
        <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>
        
        <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">
        
        <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="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;">
                        >  客户管理
                    </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;">
                        
                        <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>邮箱</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>

[195ad26412a447dd93f7e9e32dcc8250.png]: https://img-blog.csdnimg.cn/195ad26412a447dd93f7e9e32dcc8250.png
[b723d00de5e6462e93b2c2efb9fe0bcb.png]: https://img-blog.csdnimg.cn/b723d00de5e6462e93b2c2efb9fe0bcb.png
[aa5d7e22a5b24e5bb20b0a95adf327e6.png]: https://img-blog.csdnimg.cn/aa5d7e22a5b24e5bb20b0a95adf327e6.png