删除与修改

小卡斯蒂
124 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

下面的流程都是我对照着前面的代码进行实现的，也算是一次重大的突破

一些注意点

1.getParameter("currentPage") 括号内填入前端页面中对应的参数名字。这种方法用POST请求方式的话得在前端页面的url后加入对应的参数值

删除

后端代码：

1.在BrandMapper中定义delete方法并写上sql语句

//删除记录
    @Delete("delete from tb_brand where id = #{id}")
    void delete(int id);
}

2.在BrandService中定义方法并在BrandServiceImpl中实现方法

@Override
public void delete(int id) {
    //2.获取SqlSessionFactory工厂对象
    SqlSession sqlSession = factory.openSession();
    //3.获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    //4.调用方法
    mapper.delete(id);
    //提交事务
    sqlSession.commit();
    //5.关闭资源
    sqlSession.close();
}

3.在BrandServlet中实现对应逻辑

public void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    //1.接收数据
    String _id = request.getParameter("id");
    //2.转为int类型
    int id = Integer.parseInt(_id);
    //3.调用service删除
    brandService.delete(id);
    //4.响应成功的标识
    response.getWriter().write("success");
}

t:此时使用getParameter从前端获取得到即为id值

前端代码

//删除数据
deleteBrand(){
    var _this = this;
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/brand/delete?id="+this.id,
        data:this.brand
    }).then(function (resp){
        if(resp.data == "success"){
            _this.selectAll();
            _this.$message({
                message: '恭喜你，删除成功',
                type: 'success'
            })
        }
    })

记得在按钮上绑定单击事件

注意：此时呢，由于我们在前面设置的id是每页上由1开始到5的id，所以会出现除了前五条数据其他页码的删除会误删，这就需要解决了。

观察了一下先前批量删除的业务代码，发现了其根据的就是数据库中的id进行批量删除的，我想着删除能不能跟这一样，但好像不是很可以，因此还需要另外找方法。

期间还有一个重要发现：就是getParameter是从url中的this.获取属性，而request.getReader()是从data中获取属性

注意：要是中间页面显示如下图所示

image.png 那多半是由于前端页面中有错误出现，即看右上角哪里出错即可

纠错：

我靠，原来是因为我的方法名delete在js中会报错

上面的后端代码不用变

前端代码变一下就OK

<el-table-column
        align="center"
        label="操作">
    <template slot-scope="scope">
        <el-button type="primary">修改</el-button>
        <el-button type="danger" @click="delete1(scope.row)">删除</el-button>
        </template>
</el-table-column>

t：slot-scope="scope"意思是插槽，scope.row可以获取当前行的值，记得，要在data中定义row

//删除数据
delete1(row) {
    console.log(1)
    //要删除的对象的id
    this.brand.id=row.id;
    // console.log(this.brand.id);
    //弹出确认删除的提示框
    this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(()=>{
        //用户点击确认按钮
        //发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-case/brand/delete1?id="+this.brand.id,
        }).then(resp=>{
            if(resp.data=="success"){
                //表示删除成功
                //刷新页面,重新查询数据
                this.selectAll();
                //弹出消息提示
                this.$message({
                    message: '恭喜你，删除成功!',
                    type: 'success'
                });
            }
        })
    }).catch(()=>{
        //用户点击取消按钮
        this.$message({
            type: 'info',
            message: '已取消删除'
        });
    })
},

t：首先要传入对应的参数值，这时候的row.id就是数据库中的id

修改

修改的思路可以从前面的代码中参考。代码格式也可以从中参考。但是最为复杂的还是该怎么去获取被修改的ID。这也是删除这个业务实现的重点所在，因此修改和删除最主要就是抓住所删除或修改的ID即对应在数据库中的id值是多少。找出了这个值一切都好说。

下面，开始一步步分析。

分析

1.修改是要跳出跟添加一样的界面，并且修改时跳出的界面上需要有原先的数据。因此在第一步就要有对应的id值。

2.修改是根据对应id值进行修改

3.修改完成后记得隐藏窗口并且提示修改成功

步骤

1.在BrandMapper中定义sql语句(暂定)

//修改数据
@Update("update tb_brand set brand_name=#{brandName},company_name=#{companyName},ordered=#{ordered},description=#{description},status=#{status} where id = #{id}")
void update1(Brand brand);

2.在BrandService中定义方法并在BrandServiceImpl中实现方法

@Override
public void update1(Brand brand) {
    //2.获取SqlSessionFactory工厂对象
    SqlSession sqlSession = factory.openSession();
    //3.获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    //4.调用方法
    mapper.update1(brand);
    sqlSession.commit();//提交事务
    //5.释放资源
    sqlSession.close();
}

3.在BrandService中

public void update1(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    BufferedReader br = request.getReader();
    String params=br.readLine();
    //1.接收数据
    String _id = request.getParameter("id");
    int id = Integer.parseInt(_id);

    Brand _brand = JSON.parseObject(params, Brand.class);
    Brand brand=new Brand();
    brand.setId(id);
    brand.setBrandName(_brand.getBrandName());
    brand.setCompanyName(_brand.getCompanyName());
    brand.setOrdered(_brand.getOrdered());
    brand.setDescription(_brand.getDescription());
    brand.setStatus(_brand.getStatus());
    //3.调用service删除
    brandService.update1(brand);
    //4.响应成功的标识
    response.getWriter().write("success");
}

t:修改的代码有些许繁杂，但好像也不是很难理解，OK，至此javaweb的学习结束了！

avatar
文章
阅读
粉丝