- 前端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('修改数据失败');
}
})
},