黑马javaweb综合案例---修改

• 前端brand.html页面：用户点击修改按钮(@click=“”)绑定方法，异步请求将输入的数据以json的形式传给后端
• Servlet层拿到数据转为相应的实体类，放到相应的service层的方法
• service层调用dao层相应的数据库删除操作
• dao层写七方法与sql语句

从后往前写代码：

写dao层的sql语句以及方法：

 @Update("update tb_brand set brand_name = #{brandName}, company_name = #{companyName}, " +
            "ordered = #{ordered}, description = #{description}, status = #{status} where id = #{id}")
    void updateById(Brand brand);

service：接口中编写方法，实现类中重写其方法

@Override
    public void updateById(Brand brand) {
        SqlSession sqlSession = factory.openSession();
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        mapper.updateById(brand);
        sqlSession.commit();
        sqlSession.close();
    }

Servlet层读取前端的json数据：

public void updateById(HttpServletRequest request,HttpServletResponse response) throws IOException {
        BufferedReader reader = request.getReader();
        String _brand = reader.readLine();

        Brand brand = JSON.parseObject(_brand, Brand.class);

        service.updateById(brand);
        response.getWriter().write("success");
    }

前端：

第一步：准备工作，点击修改需要显示出修改的表单，而修改的表单和添加数据的表单差不多，我们可以拿来改改：

<!--修改数据对话框表单-->
    <el-dialog
            title="修改品牌"
            :visible.sync="dialogVisible_1"
            width="30%"
    >

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

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

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

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

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


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

    </el-dialog>

model=“updateBrand” 可以用原来的brand 如果model想改成这样那么在data里面，按照原来的添加一个

// 品牌模型数据
                updatebrand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },

其次：

//第一步：
<el-row  slot-scope="scope">
    <el-button type="primary" @click = "updateById(scope.row)">修改</el-button>
     <el-button type="danger" @click = "byDelete(scope.row)">删除</el-button>
    <!--修改数据对话框表单-->
    <el-dialog
            title="修改品牌"
            :visible.sync="dialogVisible"
            width="30%"
    >

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

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

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

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

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


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

    </el-dialog>
 </el-row>
//第二步：
     data() {
            return {
                //当前选中行的对象
                row:{},
                //当前选中行的下标
                index:0,
 //第三步：编写updateById
 updateById(row)
            {
                this.dialogVisibleUpdate = true;
                this.updatebrand = row;
            },
            //修改数据的部分内容
UpdateBrand() {
       //发送ajax异步请求，添加数据
      axios({
           method: "post",
            url: "http://localhost:8080/brand_case/brand/updateById",
             data: this.updatebrand
         }).then(  (resp) =>{
             if (resp.data == "success") {
                        //关闭窗口
                        this.dialogVisibleUpdate  = false;
                        //查询一次
                        this.selectAll();
                        this.$message({
                            message: '恭喜你，修改数据成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('修改数据失败');
                    }
                })
            },