一、效果

二、功能实现
    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">-->
                  <!--                        <el-tag-->
                  <!--                            :type="scope.row.state==='健康'?'success':(scope.row.state==='不健康'?'danger':'')"-->
                  <!--                        >{{scope.row.state}}</el-tag>-->
                  <!--                    </template>-->
                  <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>

<!--      :label-width="formLabelWidth"-->
      <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(() => {});
      },