【Vue学习-element-ui】用户信息列表的实现

冷不防 2023-03-06 03:35 15阅读 0赞

**一、效果**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]  
**二、功能实现**  
    **1.显示所有用户信息**

后端查询所有用户信息，前端axios请求获取所有用户信息的JSON字符数组，将获取的信息放在一个**allUsers的数组**中，用于拉取所有信息（便于查询之后，能够再查询回来）。**再把信息赋给tableData**(表格显示的data)，最后再把此信息显示方法放在mouted()\{\}中，一打开页面便显示。

***后端代码***

//service
    
    public JSONArray  allUsers() throws IOException { 
        UserMapper userMapper=connect().getMapper(UserMapper.class);
    
        List<User> list=userMapper.QueryAllUsers();
    
        JSONArray jsonArray=new JSONArray();
    
        jsonArray.addAll(list);
    
        return jsonArray;
      }
    
    //controller
    
     @RequestMapping("/allUsersInfo")
      @ResponseBody
      @CrossOrigin
       public JSONArray allUsers() throws IOException { 
        Connection connection=new Connection();
        return connection.allUsers();
      }

***前端代码***

//拉取所有用户信息
        showAllUsers(){ 
            this.$axios.post("/allUsersInfo").then( (response)=> { 
              this.tableData=response.data;
              this.allUsers=response.data;
              this.pageTotal=Math.ceil(this.allUsers.length/5);
    
              console.log(this.pageTotal);
            }).catch(function (error) { 
              console.log("获取所有用户信息失败！")
            })
    
          },
    
    //表格
    
    <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    max-height="400px"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
    
                    <el-table-column prop="id" label="ID" width="100" align="center">
                      <template slot-scope="scope">{ { scope.row.id}}</template>
                    </el-table-column>
    
                    <el-table-column prop="address" label="密码">
                      <template slot-scope="scope">{ { scope.row.password}}</template>
                    </el-table-column>
    
                    <el-table-column prop="name" width="80" label="姓名">
                      <template slot-scope="scope">{ { scope.row.name}}</template>
                    </el-table-column>
    
                    <el-table-column prop="sex" width="45" label="性别">
                      <template slot-scope="scope">{ { scope.row.sex}}</template>
                    </el-table-column>
    
                    <el-table-column prop="birthday" width="120" label="出生日期">
                      <template slot-scope="scope">{ { scope.row.birthday}}</template>
                    </el-table-column>
    
    
                    <el-table-column label="所在部门">
                      <template slot-scope="scope">{ { scope.row.department}}</template>
                    </el-table-column>
    
                    <el-table-column label="健康状态" align="center">
                      
                      
                      
                      
                      
                      <template slot-scope="scope">{ { scope.row.status}}</template>
                    </el-table-column>
    
                    <el-table-column label="操作" width="180" align="center">
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          icon="el-icon-edit"
                          @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                          type="text"
                          icon="el-icon-delete"
                          class="red"
                          @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>

**2.查询用户信息**

有了前面的基础，就很简单了。只需要一个简单的逻辑分析即可，然后对allUsers进行查询操作，tableData进行显示。考虑情况，(1)都为空时，查询所有用户信息（2）部门为空，姓名不空，查询姓名匹配信息。。以此类推，代码如下：

this.allUsers.find(item=>item.namename1&&item.departmentdepartment1)

this.tableData=\[data\];

handleSearch() { 
            this.$axios.post("/allUsersInfo").then( (response)=> { 
    
             let name1=document.getElementById('search').value;
             let department1=document.getElementById('department').value
              let data;
         if(name1!==""||department1!==""){ 
    
           if(name1==""&&department1!=="")
             //查找
             data = this.allUsers.find(item=>item.department==department1)
           else if(department1==""&&name1!=="")
             data = this.allUsers.find(item=>item.name==name1)
           else
             // (name1!==""&&department1!=="")
             data = this.allUsers.find(item=>item.name==name1&&item.department==department1)
    
           if(data == undefined){ 
             this.$message({ 
               showClose: true,
               message: 'no user'
             });
           }else{ 
             this.tableData=[data];//为什么要放在axios里面才有反应
           }
         } else { 
           this.showAllUsers();
         }}).catch(function (error) { 
              console.log("获取所有用户信息失败！")
            })
          },

**3.录入用户信息**

使用一个dialog对话框，然后在里面进行一个表单设计用于采集信息（此处，作者踩了一个坑，废了很多时间，，获取前端数据，**其中有个只获取节点并未使用value ，因此报错500,在后端查了很久，最后使用断点调试，找到原因**。），将信息交给后端（后端使用User接收即可），存入数据库。由于后端代码和1类似，就不写了。放一下前端的。

<el-dialog title="录入个人信息" :visible.sync="outerVisible" width="28%">
          <el-dialog
            width="30%"
            title="excel批量导入"
            :visible.sync="innerVisible"
            append-to-body>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-dialog>
    
    
          <el-form :model="form" style="margin-top: 0">
    
            <el-form-item label="工号" style="margin-top: 5px" >
              <el-input v-model="form.id" prefix-icon="el-icon-user" style="width: 200px;" id="employeeId"></el-input>
            </el-form-item>
    
            <el-form-item label="姓名"  style="margin-top: 5px" >
              <el-input v-model="form.name" autocomplete="off" prefix-icon="el-icon-collection-tag" style="width: 200px" id="name2"></el-input>
            </el-form-item>
    
            <el-form-item label="性别" >
              <el-input v-model="form.sex" prefix-icon="el-icon-male" autocomplete="off" style="width: 200px" id="sex2"></el-input>
            </el-form-item>
    
            <el-form-item label="电话" >
              <el-input v-model="form.tel" prefix-icon="el-icon-phone" autocomplete="off" style="width: 200px" id="tel"></el-input>
            </el-form-item>
    
            <el-form-item label="部门">
              <el-select v-model="form.department" placeholder="请选择部门" id="department2">
                <el-option label="人力资源部" value="shanghai"></el-option>
                <el-option label="销售部" value="beijing"></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item style="width: 240px; display: inline">
              <div>出生日期</div>
              <div class="block" style="display: inline">
                <el-date-picker
                  id="birthday"
                  type="dates"
                  v-model="value4"
                  placeholder="选择出生日期">
                </el-date-picker>
              </div>
    
              <div style="display: inline; margin-left: 20px">
                <el-button style="" @click="submmit">提交</el-button>
                <div style="color: #97a8be">密码默认：123456</div>
              </div>
    
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
    
            <el-button type="primary" @click="innerVisible = true">点击文件上传</el-button>
          </div>
        </el-dialog>
    
    
    
     //新增用户
          submmit(){ 
    
            let employeeId0=document.getElementById("employeeId").value;
            let name0=document.getElementById("name2").value;
            let sex0=document.getElementById("sex2").value;
            let department0=document.getElementById("department2").value;
            let birthday0=document.getElementById("birthday").value;
            let password="123456"
            let tel0=document.getElementById("tel").value;
    
            let params=new URLSearchParams();
            params.append("id",employeeId0);
            params.append("name",name0);
            params.append("sex",sex0);
            params.append("tel",tel0);
            console.log(tel0);
            params.append("department",department0);
            params.append("password",password);
            params.append("birthday",birthday0);
    
            this.$axios.post(
              "/newUser",
              params
            ).then((res)=>{ 
                console.log(res.data)
                if(res.data){ 
                  this.$message({ 
                    message:"增添成功",
                    type:"success"
                  });
                }else { 
                  this.$message("此Id已注册");
                }
              }
            ).catch(function (error) { 
              console.log("错误！！")
            })
          },

4.删除用户

注意index的使用（表示第行，用于删除和拉取id以便后端进行删除条件判断）

// 删除用户
          handleDelete(index, row) {  //index如何灌的？？
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', { 
              type: 'warning'
            })
              .then(() => { 
    
                console.log("id:"+this.tableData[index].id);
    
                let params=new URLSearchParams();
                params.append("id",this.tableData[index].id);
    
                this.$axios.post("/deleteUser",
                  params
                ).then((res)=>{ 
                  if(res.data){ 
                    this.$message.success('删除成功');//记住
                  }else{ 
                    this.$message.warning('删除失败')
                  }
    
                }).catch(function (error) { 
                   console.log("服务器连接异常！")
                })
     
                this.tableData.splice(index, 1);
         
              })
              .catch(() => { });
          },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]: /images/20230208/a402f3c6d66947c0940de9b2e5c063c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]: /images/20230208/004e700147c74f9da8d9aaba2d73591b.png