制作CRM管理系统03(用户管理)

布满荆棘的人生 2023-10-11 19:42 24阅读 0赞

**目录**

一、用户管理界面显示用户信息

1.1、前端HTML

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

1.1.2、将Servlet响应的数据通过v-for指令显示到table上

1.2后端Servlet

1.2.1、DAO中添加查询全部用户的方法

1.2.2、创建UserListServlet查询全部用户

二、用户管理界面删除功能

2.1、前端HTML

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

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

2.1.3、刷新用户列表(方便调用)

2.1.4、源代码

2.2后端Servlet

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

2.2.2、创建UserDeleteServlet

三、用户管理界面修改功能

3.1前端HTML

3.2后端serverlet

3.2.1在UserDAO中添加根据id修改用户信息的方法

3.2.2添加UserUpdateServlet

--------------------

## 一、用户管理界面显示用户信息 ##

### 1.1、前端HTML ###

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

![e2b1349ae4b945b089011ff811a101a1.png][]

#### 1.1.2、将Servlet响应的数据通过v-for指令显示到table上 ####

![aa88c02afb3749959ca9158e6f8f9c75.png][]

### 1.2后端Servlet ###

#### 1.2.1、DAO中添加查询全部用户的方法 ####

> **接口**
> 
>     /**
>        查询所有用户
>         */
>        public List<User> selectAll();
> 
> **方法重写**
> 
> ![735af39cf80644af84dd8482caad36f1.png][]
> 
> **代码如下:**
> 
>     public List<User> selectAll() {
>             ArrayList<User> list = new ArrayList<User>();
>             String sql="select * from t_user order by id desc";
>             ResultSet rs = 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);
>                 }
>                 //释放资源啊
>                 closeAll();
>             } catch (SQLException throwables) {
>                 throwables.printStackTrace();
>             }
>             return list;
>         }

#### 1.2.2、创建UserListServlet查询全部用户 ####

![27aba8701c144e97ba96038867a9c806.png][]

**代码如下:**

package controller;
    
    import com.alibaba.fastjson.JSON;
    import dao.UserDAO;
    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=utf-8");
            //获取打印输出流
            PrintWriter writer = resp.getWriter();
            //接受HTML请求传递的值
            UserDAO dao = new UserDAOImpl();
            List<User> list = dao.selectAll();
            String json = JSON.toJSONString(list);
            writer.print(json);
    
            //释放资源
            writer.close();
        }
    }

## 二、用户管理界面删除功能 ##

### 2.1、前端HTML ###

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

![86afc4cc7fe2403bb415d84de3727897.png][]

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

**方框内代码是尝试找到要删除的id,通过HTML页面的后台控制器显示**

![9d96639c8f854da8bc227c43366b0265.png][]

####  ####

#### 2.1.3、刷新用户列表(方便调用) ####

![cbf8338c44f541efb7b0326e74dd5612.png][]

#### 2.1.4、源代码 ####

<!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="#">客户管理</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="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>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="u in users">
                                <td>{
       {u.id}}</td>
                                <td>{
       {u.userName}}</td>
                                <td>{
       {u.nickName}}</td>
                                <td>{
       {u.sex}}</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.reqeustUserList();//调用请求用户列表的函数
            },
            methods:{
                /*删除用户,根据id*/
                doDelete(id){
                    /*尝试能不能找到要删除的id
                    console.log("要删除的用户id:"+id)
                     */
                    //请求serverlet删除用户
                    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;
                },
                reqeustUserList(){
                    //发送请求获取用户列表
                    axios.get("user_list").then(response=>{
                        this.users = response.data;
                    });
                },
            }
        });
    </script>
    </body>
    </html>

### 2.2后端Servlet ###

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

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

#### 2.2.2、创建UserDeleteServlet ####

>     package controller;
>     /**
>      * 删除用户,根据id
>      */
>     
>     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;
>     
>     @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=utf-8");
>             //获取打印输出流
>             PrintWriter writer = resp.getWriter();
>             //获取前台页面传来的id值
>             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();
>         }
>     }

### 三、用户管理界面修改功能 ###

#### 3.1前端HTML ####

**3.1.1给table中的修改按钮绑定点击事件**

![6c0dbe455c9f4a1a8314075858f3b50b.png][]

**3.1.2 新增user\_update.html页面**

**源代码:**

>     <!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="#">客户管理</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="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;">
>                         
>                         <div class="row">
>                             <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
>                                 <label>用户名</label>
>                                 <input type="text" class="form-control" v-model="userName"/>
>                             </div>
>                         </div>
>                         <div class="row">
>                             <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
>                                 <label>昵称</label>
>                                 <input type="text" class="form-control" v-model="nickName"/>
>                             </div>
>                         </div>
>                         <div class="row">
>                             <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
>                                 <label>手机号</label>
>                                 <input type="text" class="form-control" v-model="phone"/>
>                             </div>
>                         </div>
>                         <div class="row">
>                             <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
>                                 <label style="margin-right:15px;">性别</label>
>                                 <label class="radio-inline">
>                                     <input type="radio" name="sex" v-model="sex" value="0"/>男
>                                 </label>
>                                 <label class="radio-inline">
>                                     <input type="radio" name="sex" v-model="sex" value="1"/>女
>                                 </label>
>                             </div>
>                         </div>
>                         <div class="row">
>                             <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
>                                 <label>生日</label>
>                                 <input type="text" class="form-control" v-model="birth"/>
>                             </div>
>                         </div>
>                         <div class="row">
>                             <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center;">
>                                 <button class="btn btn-primary" style="margin-right: 8px"@click="doUpdate">修改</button>
>                                 <button class="btn btn-default"  >重置</button>
>                             </div>
>                         </div>
>                     </div>
>                 </div>
>             </div>
>         </div>
>     </div>
>     </body>
>     <script>
>       //创建Vue对象
>         new Vue({
>             el:'#app',
>             data:{
>                 userName: null,
>                 nickName: null,
>                 sex: null,
>                 phone: null,
>                 birth: null
>             },
>             methods:{
>                     doUpdate() {
>                         var url=window.location.href;
>                         var id= url.substring(url.indexOf("=")+1);//+1为再加一位数
>                         var url = "user_update?id="+id+"&user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex+"&phone="+this.phone+"&birth="+this.birth;
>                         axios.get(url).then(response =>{
>                                 if (response.data=='修改成功'){
>                                 window.location.href='user_list.html';
>                                 }else{
>                                     alert("修改失败");//弹窗警告
>                                 }
>                         });
>     
>                     }
>     
>             },
>             created: function () {//页面加载完成后执行
>             var url=window.location.href;
>             var id= url.substring(url.indexOf("=")+1);//+1为再加一位数
>                 //console.log(id); 检验是否找到id
>                 //通过axios发送请求获取用户信息
>                 axios.get("user_info?id="+id).then(response =>{
>                     //console.log(response.data);
>                     this.userName =response.data.userName;
>                     this.nickName=response.data.nickName;
>                     this.sex=response.data.sex;
>                     this.phone=response.data.phone;
>                     this.birth=response.data.birth;
>                 });
>             },
>     
>     
>         });
>     </script>
>     </html>

**3.1.3 在绑定的修改函数中,跳转到user\_update.html**

跳转页面时将用户id传递到user\_update.html中

![211618c348324d0b9ac45274870b7c99.png][]

**3.1.4 在user\_update.html中通过axios根据id回显用户信息(重点!!!!)**

**红框中的内容为获取页面传递的参数id**

![25f523c911144912b7cca8c2a023cd09.png][]

**3.1.5在user\_update.html中通过axios修改用户信息**

![1f203faf24954a78af36f4f3dd553297.png][]

**3.1.6在按钮控件中加入方法**

![f724d95a0983459db7fae89b4def29b4.png][]

**3.1.7 在vue的methods中写**![633be7993a534e07afdb7b9c0f2c02a8.png][]

**代码如下:**

>     methods:{
>                     doUpdate() {
>                         var url=window.location.href;
>                         var id= url.substring(url.indexOf("=")+1);//+1为再加一位数
>                         var url = "user_update?id="+id+"&user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex+"&phone="+this.phone+"&birth="+this.birth;
>                         axios.get(url).then(response =>{
>                                 if (response.data=='修改成功'){
>                                 window.location.href='user_list.html';
>                                 }else{
>                                     alert("修改失败");//弹窗警告
>                                 }
>                         });
>     
>                     }
>     
>             },

> **讲解:**
> 
> **以上的代码是通过用户管理界面的修改跳转并且数据回显的基础上,即如图所示**
> 
> ![a4a0ee5524bb48aea01620e3609c410f.png][]
> 
> **之后执行以下代码:**
> 
> ![e57a150383e34ac9a2b16894e4ed07d0.png][]
> 
> **① 获取url网址**
> 
> **②substring从"="号开始截取,后面+1为再加一位,即获取id**
> 
> **③字符串拼接**
> 
> **④axios方法修改**

### 3.2后端serverlet ###

#### 3.2.1在UserDAO中添加根据id修改用户信息的方法 ####

> > **接口**
> 
> > ![2e239c01559347028dfb22ba837ac1ff.png][]
> 
> **重写方法** ![07544753b55141b78f0c2ae8c9c2ae01.png][]
> 
> **代码如下:**
> 
>     public int updateByid(User user) {
>             String sql="update t_user set user_name='"+user.getUserName()+"',nick_name='"+user.getNickName()+"',phone='"+user.getPhone()+"',birth='"+user.getBirth()+"',sex="+user.getSex()+" where id="+user.getId();
>             return executeUpdate(sql);

#### 3.2.2添加UserUpdateServlet ####

> ![66263ca60ec54a379c4a23c15196872b.png][]
> 
> **代码如下:**
> 
>     package controller;
>     
>     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;
>     
>     @WebServlet("/user_update")
>     public class UserUpdateServlet 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();
>             int id =Integer.parseInt(req.getParameter("id")) ;
>             String user_name = req.getParameter("user_name");
>             String nick_name = req.getParameter("nick_name");
>             String phone = req.getParameter("phone");
>             int sex = Integer.parseInt(req.getParameter("sex"));
>             String birth = req.getParameter("birth");
>             User user = new User();
>             user.setId(id);
>             user.setUserName(user_name);
>             user.setNickName(nick_name);
>             user.setPhone(phone);
>             user.setSex(sex);
>             user.setBirth(birth);
>             UserDAOImpl dao = new UserDAOImpl();
>             int count = dao.updateByid(user);
>             if (count>0){
>                 writer.print("修改成功");
>             }else{
>                 writer.print("修改失败");
>             }
>     
>             writer.close();
>         }
>     }

[e2b1349ae4b945b089011ff811a101a1.png]: https://img-blog.csdnimg.cn/e2b1349ae4b945b089011ff811a101a1.png
[aa88c02afb3749959ca9158e6f8f9c75.png]: https://img-blog.csdnimg.cn/aa88c02afb3749959ca9158e6f8f9c75.png
[735af39cf80644af84dd8482caad36f1.png]: https://img-blog.csdnimg.cn/735af39cf80644af84dd8482caad36f1.png
[27aba8701c144e97ba96038867a9c806.png]: https://img-blog.csdnimg.cn/27aba8701c144e97ba96038867a9c806.png
[86afc4cc7fe2403bb415d84de3727897.png]: https://img-blog.csdnimg.cn/86afc4cc7fe2403bb415d84de3727897.png
[9d96639c8f854da8bc227c43366b0265.png]: https://img-blog.csdnimg.cn/9d96639c8f854da8bc227c43366b0265.png
[cbf8338c44f541efb7b0326e74dd5612.png]: https://img-blog.csdnimg.cn/cbf8338c44f541efb7b0326e74dd5612.png
[6c0dbe455c9f4a1a8314075858f3b50b.png]: https://img-blog.csdnimg.cn/6c0dbe455c9f4a1a8314075858f3b50b.png
[211618c348324d0b9ac45274870b7c99.png]: https://img-blog.csdnimg.cn/211618c348324d0b9ac45274870b7c99.png
[25f523c911144912b7cca8c2a023cd09.png]: https://img-blog.csdnimg.cn/25f523c911144912b7cca8c2a023cd09.png
[1f203faf24954a78af36f4f3dd553297.png]: https://img-blog.csdnimg.cn/1f203faf24954a78af36f4f3dd553297.png
[f724d95a0983459db7fae89b4def29b4.png]: https://img-blog.csdnimg.cn/f724d95a0983459db7fae89b4def29b4.png
[633be7993a534e07afdb7b9c0f2c02a8.png]: https://img-blog.csdnimg.cn/633be7993a534e07afdb7b9c0f2c02a8.png
[a4a0ee5524bb48aea01620e3609c410f.png]: https://img-blog.csdnimg.cn/a4a0ee5524bb48aea01620e3609c410f.png
[e57a150383e34ac9a2b16894e4ed07d0.png]: https://img-blog.csdnimg.cn/e57a150383e34ac9a2b16894e4ed07d0.png
[2e239c01559347028dfb22ba837ac1ff.png]: https://img-blog.csdnimg.cn/2e239c01559347028dfb22ba837ac1ff.png
[07544753b55141b78f0c2ae8c9c2ae01.png]: https://img-blog.csdnimg.cn/07544753b55141b78f0c2ae8c9c2ae01.png
[66263ca60ec54a379c4a23c15196872b.png]: https://img-blog.csdnimg.cn/66263ca60ec54a379c4a23c15196872b.png