前言

对于Java的基本知识推荐阅读：

1. java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）
2. 【Java项目】实战CRUD的功能整理（持续更新）

对应的回显数据异常，可回头看这篇：uni-data-select 使用 localdata 传入数据出现 不回显 | 下拉显示错误的 解决方法

以下是实战中抽离的Demo

核心逻辑和步骤流程概述：

1. 前端添加“查询”按钮：在表单中输入箱号，点击“查询”按钮后，通过调用后端接口获取数据
2. 后端处理查询请求：后端根据传入的查询数据库，返回查询到的数据
3. 前端回显查询结果：前端接收到查询结果后，将数据填充到表单中，用户可以在表单中查看或编辑数据

1. 前端

前端界面包含一个输入框（用于输入箱号）和一个“查询箱号”按钮。点击按钮时，会通过后端接口查询箱号相关数据，并将查询结果回显到表单中

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%" max-height="30%">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row>
        <!-- 输入箱号 -->
        <el-col :span="4">
          <el-form-item label="集装箱箱号" prop="containerNumber">
            <el-input v-model="formData.containerNumber" placeholder="请输入箱号" clearable />
          </el-form-item>
        </el-col>
        <!-- 输入箱属 -->
        <el-col :span="4">
          <el-form-item label="箱属" prop="containerOwner">
            <el-input v-model="formData.containerOwner" placeholder="箱属" clearable />
          </el-form-item>
        </el-col>
        <!-- 查询按钮 -->
        <el-col :span="4">
          <el-button type="primary" @click="searchBoxData">查询箱号</el-button>
        </el-col>
      </el-row>
      <!-- 其他表单项 -->
    </el-form>
  </Dialog>
</template>

<script setup>
import { ref } from 'vue'
import GoodsLogApi from '@/api/GoodsLogApi'

const formData = ref({
  containerNumber: '',
  containerOwner: '',
  // 其他字段
})
const formRules = ref({
  // 表单验证规则
})
const formLoading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')

// 打开弹窗方法
const open = async (type, id = null) => {
  dialogVisible.value = true
  dialogTitle.value = type === 'create' ? '创建' : '编辑'
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      formData.value = await GoodsLogApi.getGoodsLog(id)
    } finally {
      formLoading.value = false
    }
  }
}

// 重置表单数据
const resetForm = () => {
  formData.value = {
    containerNumber: '',
    containerOwner: '',
    // 其他字段
  }
}

// 查询箱号数据
const searchBoxData = async () => {
  if (!formData.value.containerNumber) {
    return this.$message.warning('请输入箱号')
  }

  formLoading.value = true
  try {
    // 向后端请求箱号数据
    const boxData = await GoodsLogApi.queryBoxData(formData.value.containerNumber)
    if (boxData) {
      // 将查询结果填充到表单
      formData.value.containerOwner = boxData.containerOwner || ''  // 例如填充箱属
      // 根据返回的其他字段继续填充表单数据
      formData.value.containerNumber = boxData.cntr || ''  // 例如填充箱号
    } else {
      this.$message.warning('未找到相关箱号数据')
    }
  } catch (error) {
    this.$message.error('查询失败')
  } finally {
    formLoading.value = false
  }
}
</script>

前端调用后端查询箱号数据接口，并返回查询结果。

// api/GoodsLogApi.js
import request from '@/utils/request'

export default {
  // 根据箱号查询数据
  queryBoxData(containerNumber) {
    return request({
      url: `/api/goods-log/query-box`,
      method: 'get',
      params: { containerNumber }
    })
  }
}

2. 后端

后端接口接收箱号作为请求参数，查询数据库相关数据，并将数据返回给前端

@RestController
@RequestMapping("/api/goods-log")
public class GoodsLogController {

    @Autowired
    private GoodsLogService goodsLogService;

    // 查询箱号数据
    @GetMapping("/query-box")
    public ResponseEntity<Map<String, Object>> queryBoxData(@RequestParam String containerNumber) {
        Map<String, Object> boxData = goodsLogService.queryBoxData(containerNumber);
        if (boxData == null) {
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);  // 如果未找到数据
        }
        return ResponseEntity.ok(boxData);  // 返回查询结果
    }
}

以及

在服务层通过 SQL 查询箱号数据，并返回查询到的结果

@Service
public class GoodsLogService {

    @Autowired
    private JdbcTemplate jdbcTemplate;  // 使用 JdbcTemplate 执行 SQL 查询

    public Map<String, Object> queryBoxData(String containerNumber) {
        String sql = "SELECT * " +
                     "FROM xxx WHERE CNTR = ?";
        
        // 执行查询并返回结果
        List<Map<String, Object>> result = jdbcTemplate.queryForList(sql, containerNumber);
        
        // 如果找到数据，返回第一个结果
        if (result != null && !result.isEmpty()) {
            return result.get(0);
        }
        return null;  // 如果没有找到数据，返回 null
    }
}

3. 总结

1. 前端输入箱号：用户在表单中的 containerNumber 输入框中输入箱号
2. 点击查询按钮：用户点击“查询箱号”按钮，触发 searchBoxData 方法
3. 请求后端接口：前端通过 GoodsLogApi.queryBoxData 向后端请求箱号数据
4. 后端查询数据库：后端通过 SQL 查询数据库，获取箱号的相关数据
5. 回显数据：如果查询到数据，后端将数据返回给前端，前端将数据回显到表单中的各个字段（例如 containerOwner、containerNumber 等）

实战截图如下：