文章目录
编辑跟团游前台页面绑定单击事件弹出编辑窗口回显数据发送请求，编辑保存跟团游后台代码Controller服务接口服务实现类Dao接口Mapper映射文件编辑跟团游
1：前台代码
（1）绑定“编辑”单击事件
（2）弹出编辑窗口回显数据
• 回显跟团游数据
• 查询自由行列表
• 当前跟团游具有的自由行的复选框需要选中
（3）发送请求，编辑保存跟团游
• 编辑跟团游
2：后台代码
• 编辑跟团游保存
• 删除自由行和跟团游中间表数据
• 重新新增自由行和跟团游中间表数据
（1）TravelGroupController.java（Controller）
（2）TravelGroupService.java（服务接口）
（3）TravelGroupServiceImpl.java（服务实现类）
（4）TravelGroupDao.java（Dao接口）
（5）TravelGroupDao.xml（Mapper映射文件）
前台页面
用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。此处进行数据回显的时候，除了需要跟团游基本信息的回显之外，还需要回显当前跟团游包含的自由行（以复选框勾选的形式回显）。
绑定单击事件
（1）需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
<el-table-column label="操作" align="center"><template slot-scope="scope"><el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column>
（2）handleUpdate事件
// 弹出编辑窗口handleUpdate(row) {alert(row.id);},
弹出编辑窗口回显数据
当前页面的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送多个ajax请求分别查询当前跟团游数据、所有自由行数据、当前跟团游包含的自由行id用于基本数据回显
// 弹出编辑窗口 三部分都要回显所以三次请求handleUpdate(row) {//alert(row.id);//1 发送ajax请求根据id查询跟团游信息，用于基本信息回显 axios.get("/travelgroup/findById.do?id=" + row.id).then((res)=>{if(res.data.flag){//弹出编辑窗口this.dialogFormVisible4Edit = true;//默认选中第一个标签页this.activeName='first';//为模型数据赋值，通过VUE数据双向绑定进行信息的回显 表单数据this.formData = res.data.data;this.$message({type:"success",message: res.data.message})// 2：如果 第一次回显成功了 就查询自由行列表 发送ajax请求查询所有的自由行信息，用于自由行表格展示 axios.get("/travelItem/findAll.do").then((res)=> {if(res.data.flag){//为模型数据赋值，通过VUE数据双向绑定进行信息的回显 新增和编辑表单中对应的自由行列表数据this.tableData = res.data.data;// 3：当前跟团游具有的自由行的复选框需要选中// 使用跟团游id，查询当前跟团游具有的自由行的id集合// this.checkitemIds = [28,29,30];// 如果返回Result(flag,message,data)对应写法：// this.checkitemIds = response.data.data;// 如果返回List<Integer>对应写法：this.checkitemIds = response.data;//查询当前跟团游包含的所有自由行id，用于页面回显//第三个请求 axios.get("/travelgroup/findTravelItemIdByTravelgroupId.do?id=" + row.id).then((res)=> {//为模型数据赋值，通过VUE数据双向绑定进行信息的回显 复选框this.travelItemIds = res.data;});}else{this.$message.error(res.data.message);}});}else{this.$message.error("获取数据失败，请刷新当前页面");}});},
发送请求，编辑保存跟团游
保存跟团游
请求方式：post请求
请求地址
（1）在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数handleEdit
<el-button type="primary" @click="handleEdit()">确定</el-button>
（2）handleEdit()方法
//编辑handleEdit() {//发送ajax请求，提交模型数据axios.post("/travelgroup/edit.do?travelItemIds="+this.travelItemIds,this.formData).then((response)=> {//隐藏编辑窗口this.dialogFormVisible4Edit = false;// 返回true，表示成功，否则表示失败if(response.data.flag){this.$message({message: response.data.message,type: 'success'});}else{this.$message.error(response.data.message);}}).finally(()=> {this.findPage();});},
后台代码
Controller
在 TravelGroupController 中增加方法
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.TravelGroup;import com.atguigu.pojo.TravelItem;import com.atguigu.service.TravelGroupService;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RequestMapping("/travelgroup")@RestControllerpublic class TravelGroupController {@Referenceprivate TravelGroupService travelGroupService;// 使用自由行id，查询跟团游和自由行的中间表，获取自由行的集合，存放id的值@RequestMapping("/findTravelItemIdByTravelgroupId")public List<Integer> findTravelItemIdByTravelgroupId(Integer id){List<Integer> list = travelGroupService.findTravelItemIdByTravelgroupId(id);return list;}// 使用id查询跟团游，进行表单回显@RequestMapping("/findById")public Result findById(Integer id){TravelGroup travelGroup = travelGroupService.findById(id);return new Result(true,MessageConstant.QUERY_TRAVELGROUP_SUCCESS,travelGroup);}// 编辑跟团游（返回 public Result(boolean flag, String message)）@RequestMapping("/edit")public Result edit(Integer[] travelItemIds,@RequestBody TravelGroup travelGroup ){travelGroupService.edit(travelItemIds,travelGroup);return new Result(true,MessageConstant.EDIT_TRAVELGROUP_SUCCESS);}
服务接口
在 TravelGroupService 服务接口中扩展方法
package com.atguigu.service;import com.atguigu.entity.PageResult;import com.atguigu.pojo.TravelGroup;import com.atguigu.pojo.TravelItem;import java.util.List;public interface TravelGroupService {TravelGroup findById(Integer id);void edit(Integer[] travelItemIds, TravelGroup travelGroup);List<Integer> findTravelItemIdByTravelgroupId(Integer id);
服务实现类
在 TravelGroupServiceImpl 实现类中实现编辑方法
package com.atguigu.service.impl;import com.alibaba.dubbo.config.annotation.Service;import com.atguigu.dao.TravelGroupDao;import com.atguigu.entity.PageResult;import com.atguigu.pojo.TravelGroup;import com.atguigu.pojo.TravelItem;import com.atguigu.service.TravelGroupService;import com.github.pagehelper.Page;import com.github.pagehelper.PageHelper;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.transaction.annotation.Transactional;import java.util.HashMap;import java.util.List;import java.util.Map;@Service(interfaceClass = TravelGroupService.class)@Transactionalpublic class TravelGroupServiceImpl implements TravelGroupService {@Autowiredprivate TravelGroupDao travelGroupDao;@Overridepublic TravelGroup findById(Integer id) {return travelGroupDao.findById(id);}@Overridepublic List<Integer> findTravelItemIdByTravelgroupId(Integer id) {return travelGroupDao.findTravelItemIdByTravelgroupId(id);}@Overridepublic void edit(Integer[] travelitemIds, TravelGroup travelGroup) {// 1：修改跟团游的基本信息travelGroupDao.edit(travelGroup);/*** 2：修改跟团游和自由行的中间表（先删除，再创建）* 之前的数据删除* 再新增页面选中的数据*/// 删除之前中间表的数据travelGroupDao.deleteTravelGroupAndTravelItemByTravelGroupId(travelGroup.getId());// 再新增页面选中的数据setTravelGroupAndTravelItem(travelGroup.getId(),travelitemIds);}
Dao接口
在TravelGroupDao接口中扩展方法
package com.atguigu.dao;import com.atguigu.pojo.TravelGroup;import com.github.pagehelper.Page;import java.util.List;import java.util.Map;public interface TravelGroupDao {TravelGroup findById(Integer id);List<Integer> findTravelItemIdByTravelgroupId(Integer id); void deleteTravelGroupAndTravelItemByTravelGroupId(Integer id);void edit(TravelGroup travelGroup);
Mapper映射文件
在 TravelGroupDao.xml 中扩展SQL语句
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-////DTD Mapper 3.0//EN""/dtd/mybatis-3-mapper.dtd" ><mapper namespace="com.atguigu.dao.TravelGroupDao"><!--使用id查询跟团游--><select id="findById" parameterType="int" resultType="travelGroup">select * from t_travelgroup where id =#{id}</select><!--使用跟团游id，查询跟团游和自由行中间表，获取自由行id的集合--><select id="findTravelItemIdByTravelgroupId" resultType="int">select travelitem_id from t_travelgroup_travelitem where travelgroup_id =#{id}</select><!--编辑跟团游--><update id="edit" parameterType="travelGroup">update t_travelgroup<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="helpCode!=null and helpCode.length>0">helpCode = #{helpCode},</if><if test="sex!=null and sex.length>0">sex = #{sex},</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><!--使用跟团游id，删除自由行和跟团游中间表数据--><delete id="deleteTravelGroupAndTravelItemByTravelGroupId" parameterType="int">delete from t_travelgroup_travelitem where travelgroup_id =#{id}</delete></mapper>
