黑马javaweb最后的作业的修改和删除部分代码

itheima的javaWeb课程最后留下了一个修改和删除品牌的空子，然后下面是我的实现方式。

一、修改逻辑 

1. 前端界面

点击修改就会跳入brandShow的函数中

 <template slot-scope="scope">
       <el-row>
            <el-button type="primary" @click="brandShow(scope.row) ">修改</el-button>
             <el-button type="danger" @click="deleteById(scope.row.id)">删除</el-button>
       </el-row>
</template>

brandShow函数定义如下：

brandShow(row) {
       // 获取数据
       this.brandSelect = row;
       console.log(this.brand);
       // 弹出窗口
       this.updateDialogVisible = true;
       console.log(this.updateDialogVisible);
       this.selectAll();
},

会发现，我又定义了一个新的模型，brandSelect，它和新的表单相对应，所以完整的前端代码就是：

 <!--修改表单-->
    <el-dialog

            title="修改品牌"
            :visible.sync="updateDialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="brandSelect" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input  v-model="brandSelect.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brandSelect.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brandSelect.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brandSelect.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brandSelect.status"
                           active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update">提交</el-button>
                <el-button @click="updateDialogVisible = false">取消 </el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

点击提交触发update方法，该函数定义是：

update(){
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo1/brand/update",
                    data:_this.brandSelect //这是提交的表单数据
                }).then(function (resp){
                    //这里是success数据
                    if(resp.data == "success"){
                        //添加成功
                        _this.updateDialogVisible = false;
                        console.log("修改成功！");
                        //重新查询数据进行显示
                        _this.selectAll();
                        _this.$message({
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });
                    }
                    if(resp.data == "fail"){
                        _this.$message.error('修改失败');
                    }
                })
            },

2.后台部分

public void update(Brand brand) {
        //调用BrandMapper.selectAll()
        SqlSession sqlSession = factory.openSession();
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        mapper.update(brand);
        //提交事务
        sqlSession.commit();
        sqlSession.close();

    }

二、删除逻辑

1.前台部分

 <template slot-scope="scope">
       <el-row>
            <el-button type="primary" @click="brandShow(scope.row) ">修改</el-button>
             <el-button type="danger" @click="deleteById(scope.row.id)">删除</el-button>
       </el-row>
</template>

点击删除，调用一个deleteById的方法

deleteById(id){
                console.log(id);
                this.selectId = id;
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo1/brand/deleteById?id="+this.selectId
                }).then(function (resp){
                    //这里是success数据
                    if(resp.data == "success"){
                        //添加成功
                        _this.updateDialogVisible = false;
                        //重新查询数据进行显示
                        _this.selectAll();
                        _this.$message({
                            message: '恭喜你，删除成功',
                            type: 'success'
                        });
                    }
                    if(resp.data == "fail"){
                        _this.$message.error('删除失败');
                    }
                })
            },

2.后台部分

 @Override
    public void deleteById(int id) {
        SqlSession sqlSession = factory.openSession();
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        mapper.deleteById(id);
        //提交事务
        sqlSession.commit();
        sqlSession.close();
    }