【Java】暂存逻辑

需求说明：

需求是填写一个表单时暂时保存输入项，不提交表单

回来再次填写时可以恢复或者放弃，或者更改内容继续暂存

放两张UI图，一个移动端，一个手机端：

逻辑分析：

存储方式有这么几种，Cookie存，LocalStorage存，数据库存

用Web客户端存就是存取方便，不需要鉴别用户身份，但是用户不能跨端访问，就是换一个浏览器就没用了

用数据库存就要记录用户身份，操作的业务模块位置

老板确定要用db存，就没什么选型争议的了

由于每个业务的表单数据是不一样的，存入表中的数据类型是序列化的json, 后台不对表单数据操作

区分标识： 用户标识 + 业务模块标识

记录内容：用户标识 ，业务模块标识，表单JSON，创建时间

处理流程如下：

1、点击【暂存】按钮，填写的表单输入项通过了表单校验后，将表单数据json序列化，调用存入接口存表，允许重复暂存（即更新暂存内容）

2、每次点击新增操作，展开表单弹窗时，调用获取接口检查是否存在暂存数据，如果存在暂存数据，弹出确认提示框让用户选择 [放弃] 或 [加载]

3、加载，就把获取接口返回的数据反序列化即可

4、放弃，调用移除接口把暂存移除

表结构：

CREATE TABLE `sys_co_draft` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '系统编码',
  `dr_ident` varchar(32) NOT NULL COMMENT '业务标识',
  `dr_content` text NOT NULL COMMENT '业务内容 JSON字符串',
  `creator` varchar(32) NOT NULL COMMENT '创建用户',
  `create_time` datetime NOT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC COMMENT='暂存信息';

　　

功能需要的接口：

/**
  * 暂存或更新数据
  *
  * @param dto
  * @return boolean
  * @author Cloud9
  * @createTime 2022/10/18 11:52
  */
@PostMapping("/save")
public boolean saveData(@RequestBody SysCoDraftDTO dto) {
    return sysCoDraftService.saveData(dto);
}

/**
  * 载入暂存数据
  *
  * @param dto
  * @return java.lang.String
  * @author Cloud9
  * @createTime 2022/10/18 11:54
  */
@PostMapping("/get")
public SysCoDraftDTO getData(@RequestBody SysCoDraftDTO dto) {
    return sysCoDraftService.getData(dto);
}

/**
  * 放弃暂存数据
  *
  * @param dto
  * @return java.lang.String
  * @author Cloud9
  * @createTime 2022/10/18 11:55
  */
@PostMapping("/remove")
public boolean removeData(@RequestBody SysCoDraftDTO dto) {
    return sysCoDraftService.removeData(dto);
}

　　

接口逻辑：

注意前端序列化传给java的时候引号会被转义，这里用Apache包的字符处理工具类进行反转处理了

@Override
public SysCoDraftDTO getData(SysCoDraftDTO dto) {
    QueryWrapper<SysCoDraftDTO> query = Wrappers.<SysCoDraftDTO>query()
            .eq("dr_ident", dto.getDrIdent())
            .eq("creator", LoginUserContext.getUser().getLoginName());
    return this.baseMapper.selectOne(query);
}

@Override
public boolean saveData(SysCoDraftDTO dto) {
    String drIdent = dto.getDrIdent();
    String loginName = LoginUserContext.getUser().getLoginName();
    String drContent = StringEscapeUtils.unescapeHtml4(dto.getDrContent());

    int res;
    QueryWrapper<SysCoDraftDTO> query = Wrappers.<SysCoDraftDTO>query()
            .eq("dr_ident", drIdent)
            .eq("creator", loginName);
    SysCoDraftDTO sysCoDraftDTO = this.baseMapper.selectOne(query);
    if (Objects.isNull(sysCoDraftDTO)) {
        sysCoDraftDTO = new SysCoDraftDTO()
            .setCreator(loginName)
            .setDrIdent(drIdent)
            .setDrContent(drContent)
            .setCreateTime(new Date());
        res = this.baseMapper.insert(sysCoDraftDTO);
    } else {
        sysCoDraftDTO.setDrContent(drContent);
        sysCoDraftDTO.setCreateTime(new Date());
        res = this.baseMapper.updateById(sysCoDraftDTO);
    }
    return Constant.RESULT_SUCCESS.equals(res);
}

@Override
public boolean removeData(SysCoDraftDTO dto) {
    QueryWrapper<SysCoDraftDTO> query = Wrappers.<SysCoDraftDTO>query()
            .eq("dr_ident", dto.getDrIdent())
            .eq("creator", LoginUserContext.getUser().getLoginName());
    int delete = this.baseMapper.delete(query);
    return Constant.RESULT_SUCCESS.equals(delete);
}

　　

前端Demo

1、涉及暂存逻辑的关键变量：

/* 业务ID标识 */
businessIdentity: 'finExApply',

/* 表单元素ref标识 */
formRef: 'formRefKey',

/* 更新或新增的Flag变量 */
isUpdate: false

2、组件引入暂存接口

import { getDraftData, saveDraftData, removeDraftData } from '@/api/system/common/draft'

3、提交按钮位置追加暂存按钮，暂存的功能只在新增时提供：

<div align="center" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%)">
  <el-button type="primary" @click="submit">确定</el-button>
  <el-button v-if="!isUpdate" @click="staging">暂存</el-button>
  <el-button @click="cancel">取消</el-button>
</div>

4、表单弹窗创建周期函数需要执行：

created() {
  /* 判断当前表单弹窗要进行的是新增，还是修改操作 */
  this.isUpdate = !!this.form.id

  /* 调用封装的暂存表单恢复方法 */
  this.recoverStaging()

  /* 加载字典数据 */
  this.initialApRoTypeList()
  this.initialProjectList()
  this.initialCompanyList()
  if (this.isUpdate) this.initialAllocatedDepartmentList(this.form.sysArCoId)
  this.initialRoNameList()
}

5、暂存方法与恢复暂存方法实现：

async staging() {
  /* 复用表单校验 */
  this.$refs[this.formRef].validate(async valid => {
    if (!valid) return this.$message.error('请完善表单信息')
    const param = {
      drIdent: this.businessIdentity,
      drContent: JSON.stringify(this.form)
    }
    await saveDraftData(param)
    this.$message.success('暂存成功')
  })
},
async recoverStaging() {
  /* 不是新增操作跳过 */
  if (this.isUpdate) return
  const param = { drIdent: this.businessIdentity }
  const { data: res } = await getDraftData(param)
  /* 没有暂存数据跳过 */
  if (!res) return

  /* 弹出确认框 */
  this.$confirm(`当前页面存在 ${res.createTime} 编辑过但未提交的数据 是否载入?`, '暂存数据导入', {
    confirmButtonText: '加载',
    cancelButtonText: '丢弃',
    distinguishCancelAndClose: true,
    type: 'none'
  }).then(() => {
    this.form = JSON.parse(res.drContent)
    /* 回显字典数据 */
    this.initialAllocatedDepartmentList(this.form.sysArCoId)
    this.initialRoNameList()
  }).catch(async(action) => {
    if (action === 'close') return
    const param = { drIdent: this.businessIdentity }
    await removeDraftData(param)
  })
}

　

效果：