美文网首页
5、修改删除功能

5、修改删除功能

作者: wqjcarnation | 来源:发表于2020-03-05 11:33 被阅读0次

    参考：https://www.jianshu.com/p/7dfdcc058651

    目标

    • 修改
    • 删除

    调整css

    <style>
  .nav{
    text-align: left;
    height:50px;
    margin:10px;
  }
  .el-main{
      line-height: 0;
    }
</style>

    修改

    选定table表格-自定义列模板中的修改删除功能

    image.png

    1、拷贝代码到页面FindAllUser.vue

      <el-table-column label="操作">
  <template slot-scope="scope">
    <el-button
      size="mini"
      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>

    methods里新增加如下两个方法

    methods: {
   。。。。
  handleEdit(index, row) {
    console.log(index, row);
  },
  handleDelete(index, row) {
    console.log(index, row);
  }
  。。。。
}

    改造修改方法

           handleEdit(index, row) {
          //console.log(index, row);
          //alert(row.id);
          //请求后台，通过id查询指定用户的信息
          this.$axios.get("http://localhost:8082/vue-servlet/getUserById?id="+row.id)
          .then(response=>{
            console.log(response);
            //查询成功之后，携带用户信息进修改页
            this.$router.push({path:'/updateUser',
            query:response.data.list[0]
            })
          })
          .catch(error=>{
            console.log(error);
          })

    目前完整findalluser.vue代码

    <template>
  <div>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="用户名"
      width="120">
    </el-table-column>

    <el-table-column
      prop="email"
      label="邮箱"
      width="200">
    </el-table-column>

    <el-table-column
      prop="idCard"
      label="身份证号"
      width="200">
    </el-table-column>
<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button
      size="mini"
      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>


  </el-table>
<el-pagination
  background
  layout="prev, pager, next"
  :total="total"
  :page-size="pageSize"
  @current-change="changePage">
</el-pagination>
  </div>
</template>

<script>
 
  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: [],
        //以下三个是分页相关的属性
        total:0,//查询得到
        pageSize:2,//每页条数
        currentPage:1,
        dialogFormVisible: false,
      }
    },
    mounted(){
      //调用查询所有用户的方法
      this.findAll();
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      findAll(){
        //请求后台，查询所有用户
        this.$axios.get("http://localhost:8082/vue-servlet/findAllUser",
        {params:{currentPage:this.currentPage,pageSize:this.pageSize}})
        .then(response=>{
          let data=response.data;//后台的responseBean
          //用响应数据去更新
          this.tableData=data.list;
          this.total=data.page.count;

        })
        .catch()
      },
        changePage:function(currentPage){
          //alert(`当前页${currentPage}`);
          this.currentPage=currentPage;
          this.findAll();
      },
       handleEdit(index, row) {
          //console.log(index, row);
          //alert(row.id);
          //请求后台，通过id查询指定用户的信息
          this.$axios.get("http://localhost:8082/vue-servlet/getUserById?id="+row.id)
          .then(response=>{
            console.log(response);
            //查询成功之后，携带用户信息进修改页
            this.$router.push({path:'/updateUser',
            query:response.data.list[0]
            })
          })
          .catch(error=>{
            console.log(error);
          })

         },
       handleDelete(index, row) {
         //console.log(index, row);
         alert(row.id);
         //请求后台，通过id删除指定用户的信息
         //删除成功之后，重新调用findall
       }
    }
  }
</script>

<style>
  .nav{
    text-align: left;
    height:50px;
    margin:10px;
  }
  .el-main{
      line-height: 0;
    }
</style>

    编写修改页面UpdateUser.vue

    该页获取上一面传过来的数据用 this.$route.query.字段名
    在添加页基础上进行微调，把id带到后台，前台不可编辑

    <template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="ruleForm.idcard"></el-input>
      </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          id:this.$route.query.id,
          username: this.$route.query.userName,
          email: this.$route.query.email,
          idcard: this.$route.query.idCard,
          power:this.$route.query.power
        },
        rules: {
          //required是否必填项  trigger:触发方式 blur：表示离开焦点时   message：错误提示
          username: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ],
           //trigger: 'blur'     trigger: ['blur', 'change']
          email:[
             { required: true, message: '请输入邮箱地址', trigger: 'blur' },
             { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          idcard:[
             { min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: ['blur'] }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            //step 1，把form转换成json字符串形式
            let obj=this.$qs.stringify(this.ruleForm);
            //step 2计划在这里用axios去给后台发送修改请求   (url,data)   data-json
            this.$axios.post('http://localhost:8082/vue-servlet/updateUser',obj)
            .then(response=>{
                  //step 3如果响应后，我们再做后处理   --json
               alert(response.data.msg);
              this.$router.push({path:'findalluser'})
            })
            .catch(error=>{
              console.log(error)
            })
         


          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
</style>

    为修改配置路由

        {
        path: '/updateUser',
        name: 'UpdateUser',
        component: UpdateUser
    }

    编写后台修改方法

    GetUserServlet

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String id=request.getParameter("id");
    //调用service，根据id查询
    IUserService us=new UserServiceImpl();
    User db_user=null;
    try {
        db_user = us.getUserById(Integer.parseInt(id));
    } catch (NumberFormatException | ClassNotFoundException | SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    ResponseBean resp=new ResponseBean();
    resp.setCode("0");
    resp.setMsg("success");
    List<User>  userList=new ArrayList();
    userList.add(db_user);
    resp.setList(userList);
    ObjectMapper om=new ObjectMapper();
    String json=om.writeValueAsString(resp);
    response.getWriter().print(json);
}

    AdminUpdServlet

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取前台页面传过来的参数
            String id = request.getParameter("id");
            String name = request.getParameter("username");
            String email = request.getParameter("email");
            String idCard = request.getParameter("idcard");
            String power = request.getParameter("power");
            // 封装user对象
            User user = new User();
            user.setId(Integer.parseInt(id));
            user.setUserName(name);
            user.setEmail(email);
            user.setIdCard(idCard);
            user.setPower(Integer.parseInt(power));
            // 调用service进行修改操作
            IUserService service = new UserServiceImpl();
            int i=0;
            try {
                i = service.update(user);
            } catch (ClassNotFoundException | SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            
            ResponseBean rm = new ResponseBean();
            if(i>0){
                rm.setCode("0");
                rm.setMsg("修改成功");
            }else{
                rm.setCode("-1");
                rm.setMsg("修改失败");
            }
            // 数据返回到页面
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(rm);
            System.out.println(json);
            response.getWriter().append(json);
}

    dao:

    @Override
public User getUserById(String id) {
    User dbuser=null;
    conn=DBUtil.getConnection();
    try {
        ps=conn.prepareStatement("select * from t_user where user_id=? ");
        ps.setInt(1, Integer.parseInt(id));
        rs=ps.executeQuery();
        if(rs.next()){//如果有该用户
            dbuser=new User();
            dbuser.setId(rs.getInt("user_id"));
            dbuser.setUserName(rs.getString("user_name"));
            dbuser.setUserPwd(rs.getString("user_pwd"));
            dbuser.setEmail(rs.getString("user_email"));
            dbuser.setIdCard(rs.getString("user_idcard"));
            dbuser.setPower(rs.getInt("user_power"));
        }
    } catch (SQLException e) {

        e.printStackTrace();
    }
    DBUtil.closeConnection(rs, ps, conn);
    return dbuser;
}

@Override
public int update(User user) {
    
    int i=0;
    try {
        conn=DBUtil.getConnection();
        ps=conn.prepareStatement("update t_user set user_name=?,user_email=?,user_idcard=?,user_power=? where user_id=? ");
        ps.setString(1,user.getUserName());
        ps.setString(2,user.getEmail());
        ps.setString(3,user.getIdCard());
        ps.setInt(4,user.getPower());
        ps.setInt(5, user.getId());
        
        i=ps.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    }
    DBUtil.closeConnection(rs, ps, conn);
    return i;
    

}

    测试

    image.png image.png
    image.png

    新增用户的链接

    用到的技术button dialog,参考element-ui官网

    image.png image.png

    关键代码

    step1 新增一个按钮，触发dialog显示

    <div class="nav">
  <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
</div>

    step2 data属性里新增dialogFormVisible

    data() {
  return {
    tableData: [],
    multipleSelection: [],
    //以下三个是分页相关的属性
    total: 0, //查询得到
    pageSize: 2, //每页条数
    currentPage: 1,
    dialogFormVisible: false
  }
}

    step3 制作dialog

    <el-dialog title="用户添加" :visible.sync="dialogFormVisible" modal="true">
  
</el-dialog>

    step4

     引用新增用户组件


    import reg from '@/components/user/Register'
        components: {
       reg
    }

<el-dialog title="用户添加" :visible.sync="dialogFormVisible" modal="true">
  <reg></reg>
</el-dialog>

    findalluser完整代码

      <template>
    <div>
      <div class="nav">
        <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
      </div>
      <el-dialog title="用户添加" :visible.sync="dialogFormVisible" modal="true">
        <reg></reg>
      </el-dialog>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="120">
        </el-table-column>

        <el-table-column prop="email" label="邮箱" width="200">
        </el-table-column>

        <el-table-column prop="idCard" label="身份证号" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="changePage">
      </el-pagination>
    </div>


  </template>

  <script>
    import reg from '@/components/user/Register'
    export default {
      data() {
        return {
          tableData: [],
          multipleSelection: [],
          //以下三个是分页相关的属性
          total: 0, //查询得到
          pageSize: 2, //每页条数
          currentPage: 1,
          dialogFormVisible: false
        }
      },
      mounted() {
        //调用查询所有用户的方法
        this.findAll();
      },
      methods: {
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        findAll() {
          //请求后台，查询所有用户
          this.$axios.get("http://localhost:8082/vue-servlet/findAllUser", {
              params: {
                currentPage: this.currentPage,
                pageSize: this.pageSize
              }
            })
            .then(response => {
              let data = response.data; //后台的responseBean
              //用响应数据去更新
              this.tableData = data.list;
              this.total = data.page.count;

            })
            .catch()
        },
        changePage: function(currentPage) {
          //alert(`当前页${currentPage}`);
          this.currentPage = currentPage;
          this.findAll();
        },
        handleEdit(index, row) {
          //console.log(index, row);
          //alert(row.id);
          //请求后台，通过id查询指定用户的信息
          this.$axios.get("http://localhost:8082/vue-servlet/getUserById?id=" + row.id)
            .then(response => {
              console.log(response);
              //查询成功之后，携带用户信息进修改页
              this.$router.push({
                path: '/updateUser',
                query: response.data.list[0]
              })
            })
            .catch(error => {
              console.log(error);
            })

        },
        handleDelete(index, row) {
          //console.log(index, row);
          alert(row.id); //是实体类的属性  是主键，不是索引
          //请求后台，通过id删除指定用户的信息
          //删除成功之后，重新调用findall
        }
      },

      components: {
        reg
      }
    }
  </script>

  <style>
    .nav {
      text-align: left;
      height: 50px;
      margin: 10px;
    }

    .el-main {
      line-height: 0;
    }

  </style>

    效果

    image.png image.png

    单条删除由学生自行完成

    相关文章

      网友评论

          本文标题：5、修改删除功能

          本文链接：https://www.haomeiwen.com/subject/whwtrhtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|5、修改删除功能|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！