当前位置： 首页 > article >正文

Java学习Day48：苦战小黄龙(基础增删改查新建)

article 2024/10/24 10:24:57

1.新建体检：

设置点击按钮呼出提交表单以及表单数据校验规则

// 重置表单
resetForm() {
	this.formData = {};
},
// 弹出添加窗口
handleCreate() {
	this.resetForm();
	this.dialogFormVisible = true;
} 
dialogFormVisible: false,//增加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                rules: {//校验规则
                    code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
                    name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
                }

数据发送：

 handleAdd () {
                    //对数据检查项编码和名字，再次校验
                    //dataAddForm 新增检查项目中打开对话框中的 ref的属性值
                    /**
                     * validate函数是Vue框架自己的表单验证方法
                     * validate（val） val校验的结果，传递匿名函数
                     * val值是true，验证成功
                     */
                    this.$refs["dataAddForm"].validate(val=>{
                        if (!val){
                            //提示用户验证失败
                            this.$message({
                                type:"error",
                                message:"请填写数据"
                            });
                            return;
                        }
                        //向服务器发请求，提交新增检查项目的表单数据
                        axios.post("/CheckItem/addCheckItem.do",this.formData).then(response=>{
                            //判断请求状态  {"flag":true,"message":"新增检查项成功","data":null}
                            console.log(response.data);
                            if (response.data.flag){
                                this.$message({
                                    type: "success",
                                    message:response.data.message,
                                });
                                //关闭对话框，清空原有历史数据
                                this.dialogFormVisible = false;
                                this.formData = {};
                            }
                        }).catch(response=>{
                            console.log("##########")
                        });
                    });
                },

1. this.$refs['dataAddForm']

  • $refs: Vue.js 中的 $refs 是一个对象，包含所有注册的 DOM 元素或子组件的引用。当在 Vue 的模板中使用 ref 属性时，可以通过 $refs 访问这些元素或组件。
  • dataAddForm: 这里 dataAddForm 是一个在 Vue 模板中使用 ref 属性定义的表单组件（例如，<el-form ref="dataAddForm">）。通过 $refs['dataAddForm'] 可以访问这个表单组件。

2. validate((valid) => { ... })

  • validate 方法: 这是 Element UI 中表单组件（<el-form>）提供的一个方法。它用于对表单字段进行验证。调用这个方法时，组件会自动检查所有的表单字段是否满足定义的验证规则。
  • 回调函数 (valid) => { ... }: validate 方法接受一个回调函数作为参数，valid 是一个布尔值，表示表单的验证结果：
    • true: 表示表单数据验证通过。
    • false: 表示表单数据验证失败。

3. 验证流程

在这个代码片段中，验证的整体流程如下：

  1. 调用验证: 当执行 this.$refs['dataAddForm'].validate((valid) => { ... }) 时，validate 方法开始检查表单字段的有效性。

  2. 验证结果:

    • 如果表单数据验证通过（即 valid 为 true）：

      • 发送 AJAX 请求，使用 axios.post 将 this.formData 提交到后台接口 /checkitem/add.do。
      • 根据响应结果，隐藏对话框（this.dialogFormVisible = false）并显示成功或错误的消息。
      • 无论请求成功还是失败，最终都会调用 this.findPage() 方法，通常用于刷新或重新加载数据。

    • 如果表单数据验证失败（即 valid 为 false）：

      • 显示一个错误消息，提示用户表单数据未通过验证。
      • 通过 return false 终止后续操作。
  @Autowired
    private checkServices checkServices;
    @PostMapping("addCheckItem")
    public Result addCheckItem(@RequestBody Checkitem checkItem) {
        System.out.println(checkItem.toString());
        int a = checkServices.addCheckitem(checkItem);
        //响应页面端
        return new Result(true, MessageConstant.ADD_CHECKITEM_SUCCESS,a);
    }

2.检查组分页

1.定义分页相关模型数据

pagination: {//分页相关模型数据
  currentPage: 1,//当前页码
  pageSize:10,//每页显示的记录数
  total:0,//总记录数
  queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据

2 定义分页方法

在页面中提供了findPage方法用于分页查询，为了能够在checkgroup.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法

分页需要信息：每页几条数据、查询第几页

findPage() {
  //分页参数
  var param = {
    currentPage:this.pagination.currentPage,//页码
    pageSize:this.pagination.pageSize,//每页显示的记录数
    queryString:this.pagination.queryString//查询条件
  };
  //请求后台
  axios.post("/checkgroup/findPage.do",param).then((response)=> {
    //为模型数据赋值，基于VUE的双向绑定展示到页面
    this.dataList = response.data.rows;
    this.pagination.total = response.data.total;
  });
}
<el-button @click="findPage()" class="dalfBut">查询</el-button>

<el-pagination
               class="pagiantion"
               @current-change="handleCurrentChange"
               :current-page="pagination.currentPage"
               :page-size="pagination.pageSize"
               layout="total, prev, pager, next, jumper"
               :total="pagination.total">
</el-pagination>
<el-button @click="findPage()" class="dalfBut">查询</el-button>

<el-pagination
               class="pagiantion"
               @current-change="handleCurrentChange"
               :current-page="pagination.currentPage"
               :page-size="pagination.pageSize"
               layout="total, prev, pager, next, jumper"
               :total="pagination.total">
</el-pagination>

3 服务实现类

在CheckGroupServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页

public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) {
  PageHelper.startPage(currentPage,pageSize);
  Page<CheckItem> page = checkGroupMapper.selectByCondition(queryString);
  return new PageResult(page.getTotal(),page.getResult());
}

分页后端结构如下：

分页代码

Page<JavaBean> 获取page对象

从page对象中回传前端需要的totle和result

3. 编辑检查组

思路：编辑检查组除了编辑检查组本身的数据，还要顾及检查组对应的检查项，一旦检查组改变，检查组和检查项对应的中间表的数据也要被改变

1.更新CheckGroup本身数据；

2.获取更改的CheckGroup的id，传输回去中间表，删除所有与CheckGroupid对应的双线绑定数据

3.将前端选择的CheckGroup中包含的CheckItem的id列表回传，使用循环插入，每次传入CheckGroup的id以及遍历链表中的CheckItem的id，循环补全中间表；

1.弹出编辑窗口回显数据

当前页面的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送多个ajax请求分别查询当前检查组数据、所有检查项数据、当前检查组包含的检查项id用于基本数据回显

handleUpdate(row) {
  //发送ajax请求根据id查询检查组信息，用于基本信息回显
  axios.get("/checkgroup/findById.do?id=" + row.id).then((res)=>{
    if(res.data.flag){
      //弹出编辑窗口
      this.dialogFormVisible4Edit = true;
      //默认选中第一个标签页
      this.activeName='first';
      //为模型数据赋值，通过VUE数据双向绑定进行信息的回显
      this.formData = res.data.data;
      //发送ajax请求查询所有的检查项信息，用于检查项表格展示
      axios.get("/checkitem/findAll.do").then((res)=> {
        if(res.data.flag){
          //为模型数据赋值，通过VUE数据双向绑定进行信息的回显
          this.tableData = res.data.data;
          //查询当前检查组包含的所有检查项id，用于页面回显
          axios.get("/checkgroup/findCheckItemIdsByCheckGroupId.do?id=" + row.id).then((res)=> {
            //为模型数据赋值，通过VUE数据双向绑定进行信息的回显
            if(res.data.flag){
                this.checkitemIds = res.data.data;
            }else{
                this.$message.error(res.data.message);
            }
          });
        }else{
          this.$message.error(res.data.message);
        }
      });
    }else{
      this.$message.error("获取数据失败，请刷新当前页面");
    }
  });
}

2.在CheckGroupServiceImpl实现类中实现编辑方法

public CheckGroup findById(Integer id) {
  return checkGroupMapper.findById(id);
}

public List<Integer> findCheckItemIdsByCheckGroupId(Integer id) {
  return checkGroupMapper.findCheckItemIdsByCheckGroupId(id);
}

//编辑检查组，同时需要更新和检查项的关联关系
public void edit(CheckGroup checkGroup, Integer[] checkitemIds) {
  //根据检查组id删除中间表数据（清理原有关联关系）
  checkGroupMapper.deleteAssociation(checkGroup.getId());
  //向中间表(t_checkgroup_checkitem)插入数据（建立检查组和检查项关联关系）
  setCheckGroupAndCheckItem(checkGroup.getId(),checkitemIds);
  //更新检查组基本信息
  checkGroupMapper.edit(checkGroup);
}

//向中间表(t_checkgroup_checkitem)插入数据（建立检查组和检查项关联关系）
public void setCheckGroupAndCheckItem(Integer checkGroupId,Integer[] checkitemIds){
  if(checkitemIds != null && checkitemIds.length > 0){
    for (Integer checkitemId : checkitemIds) {
      Map<String,Integer> map = new HashMap<>();
      map.put("checkgroup_id",checkGroupId);
      map.put("checkitem_id",checkitemId);
      checkGroupMapper.setCheckGroupAndCheckItem(map);
    }
  }
}

3.在CheckGroupMapper.xml中扩展SQL语句

<select id="findById" parameterType="int" resultType="com.easthome.pojo.CheckGroup">
  select * from t_checkgroup where id = #{id}
</select>
<select id="findCheckItemIdsByCheckGroupId" parameterType="int" resultType="int">
  select checkitem_id from t_checkgroup_checkitem where checkgroup_id = #{id}
</select>
<!--向中间表插入数据（建立检查组和检查项关联关系）-->
<insert id="setCheckGroupAndCheckItem" parameterType="hashmap">
  insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id) 
  	values
  (#{checkgroup_id},#{checkitem_id})
</insert>
<!--根据检查组id删除中间表数据（清理原有关联关系）-->
<delete id="deleteAssociation" parameterType="int">
  delete from t_checkgroup_checkitem where checkgroup_id = #{id}
</delete>
<!--编辑-->
<update id="edit" parameterType="com.easthome.pojo.CheckGroup">
  update t_checkgroup
  <set>
    <if test="name != null">
      name = #{name},
    </if>
    <if test="sex != null">
      sex = #{sex},
    </if>
    <if test="code != null">
      code = #{code},
    </if>
    <if test="helpCode != null">
      helpCode = #{helpCode},
    </if>
    <if test="attention != null">
      attention = #{attention},
    </if>
    <if test="remark != null">
      remark = #{remark},
    </if>
  </set>
  where id = #{id}
</update>


http://www.kler.cn/news/362861.html

相关文章：

  • 常用 SQL 语句的大全
  • oracle imp和exp 导入不同库的用户和表空间
  • SQL：字段a not in (筛选值 or 子查询)，当字段a = null 或not in里面存在null时。sql筛选结果可能不符预期
  • Qt自定义一个圆角对话框
  • 【C++打怪之路Lv11】-- stack、queue和优先级队列
  • js 基础补充3
  • 23.Redis核心数据结构
  • 架构演进史
  • 浅谈C++之触发器用法
  • 云原生后端：构建现代化、高扩展性的应用基础设施
  • Docker入门之安装
  • wmware下centos9磁盘扩容/原分区扩容
  • STM32通信协议-I2C
  • RISC-V笔记——Pipeline依赖
  • kali的下载与配置
  • css 切角实现（全）
  • ffmpeg的视频滤镜: 抠图-chromakey
  • MongoDB 安装教程（MAC版本）
  • react 基础学习笔记
  • 数据降维与主成分分析
  • Python项目内网环境pdm install超时httpx.ReadTimeout: timed out
  • VMware虚拟机中centos磁盘扩容（非VG分区挂载方案）
  • RabbitMQ 中的交换机学习
  • 项目实战-图书管理系统之个人中心
  • 【02】RabbitMQ客户端应用开发实战
  • gin入门教程（7）： 使用 Logrus + Lumberjack 创建日志中间件