功能分为两个部分来做
1：编辑自由行（ID查询，回显）
2：编辑自由行（更新保存，执行update）
1：前台代码
（1）：点击编辑按钮，绑定单击事件
（2）：弹出编辑窗口回显数据
（3）：发送ajax请求，更改数据保存
2：后台代码
（1）TravelItemController.java
• 跳转到自由行编辑页面
• 编辑保存
（2）TravelItemService.java（服务接口）
（3）TravelItemServiceImpl.java（服务实现类）
（4）TravelItemDao.java（Dao接口）
（5）TravelItemDao.xml（Mapper映射文件）
前台代码
用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。
绑定单击事件
需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
处理事件：handleUpdate();
// 弹出编辑窗口
handleUpdate(row) {
alert(row.id);
},
弹出编辑窗口回显数据
当前页面中的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送ajax请求查询当前自由行数据用于回显
// 弹出编辑窗口
handleUpdate(row) {
// alert(row.id);
//发送请求获取自由行信息
axios.get("/travelItem/findById.do?id=" + row.id).then((res)=>{
if(res.data.flag){
//设置编辑窗口属性，dialogFormVisible4Edit为true表示显示
this.dialogFormVisible4Edit = true;
//为模型数据设置值，基于VUE双向数据绑定回显到页面
this.formData = res.data.data;
}else{
this.$message.error("获取数据失败，请刷新当前页面");
}
});
},
发送请求更改数据
在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数handleEdit
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
handleEdit()方法
//编辑
handleEdit() {
//表单校验
this.$refs['dataEditForm'].validate((valid)=>{
if(valid){
//表单校验通过，发送请求
axios.post("/travelItem/edit.do",this.formData).then((response)=> {
//隐藏编辑窗口
this.dialogFormVisible4Edit = false;
if(response.data.flag){
//编辑成功，弹出成功提示信息
this.$message({
message: response.data.message,type: 'success'});
}else{
//编辑失败，弹出错误提示信息
this.$message.error(response.data.message);
}
}).finally(()=> {
//重新发送请求查询分页数据
this.findPage();
});
}else{
//表单校验失败
this.$message.error("表单数据校验失败");
return false;
}
});
},
后台代码
Controller
在 TravelItemController 中增加编辑方法
package com.atguigu.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.entity.PageResult;
import com.atguigu.entity.QueryPageBean;
import com.atguigu.entity.Result;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping(value = "/travelItem")
public class TravelItemController {
@Reference
private TravelItemService travelItemService;
@RequestMapping("/findById")
public Result findById(Integer id){
//将查询到的数据返回给前台页面回显
TravelItem travelItem = travelItemService.findById(id);
return new Result(true,MessageConstant.QUERY_TRAVELITEM_SUCCESS,travelItem);
}
@RequestMapping("/edit")
public Result edit(@RequestBody TravelItem travelItem){
travelItemService.edit(travelItem);
return new Result(true,MessageConstant.EDIT_TRAVELITEM_SUCCESS);
}
服务接口
在 TravelItemService 服务接口中扩展编辑方法
package com.atguigu.service;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelItem;
public interface TravelItemService {
TravelItem findById(Integer id);
void edit(TravelItem travelItem);
服务实现类
在 TravelItemServiceImpl 实现类中实现编辑方法
package com.atguigu.service.impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.TravelItemDao;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
/**
* CheckItemServiceImpl
* dubbo（整合声明式事务处理
* 1：配置applicationContext-tx.xml对类代理，
* 2：@Service(interfaceClass = TravelItemService.class)）
*/
@Service(interfaceClass = TravelItemService.class)
@Transactional
public class TravelItemServiceImpl implements CheckItemService {
@Autowired
private TravelItemDao travelItemDao;
@Override
public TravelItem findById(Integer id) {
return travelItemDao.findById(id);
}
@Override
public void edit(TravelItem travelItem) {
travelItemDao.edit(travelItem);
}
Dao接口
在 TravelItemDao 接口中扩展edit方法
package com.atguigu.dao;
import com.atguigu.pojo.TravelItem;
import com.github.pagehelper.Page;
public interface TravelItemDao {
TravelItem findById(Integer id);
void edit(TravelItem travelItem);
Mapper映射文件
在 TravelItemDao.xml 中扩展SQL语句
<!--根据自由行id查询自由行信息-->
<select id="findById" resultType="travelItem" parameterType="int">
select * from t_travelitem where id = #{id}
</select>
<!--
编辑 update t_travelitem set code=#{code},name=#{name} where id=#{id}
-->
<update id="edit" parameterType="travelItem">
update t_travelitem
<set>
<if test="code!=null and code.length>0">
code=#{code},
</if>
<if test="name!=null and name.length>0">
name=#{name},
</if>
<if test="sex!=null and sex.length>0">
sex=#{sex},
</if>
<if test="age!=null and age.length>0">
age=#{age},
</if>
<if test="price!=null">
price=#{price},
</if>
<if test="type!=null and type.length>0">
type=#{type},
</if>
<if test="remark!=null and remark.length>0">
remark=#{remark},
</if>
<if test="attention!=null and attention.length>0">
attention=#{attention},
</if>
</set>
where id = #{id}
</update>