Vue?3?表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程

更新時間：2024年12月07日 12:12:11 作者：碼農(nóng)研究僧

本文給大家介紹Vue3表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程,結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

前言

對應(yīng)的回顯數(shù)據(jù)異常，可回頭看這篇：在使用uni-data-select插件時通過接口獲取值賦給localdata失敗的問題解決方案

以下是實戰(zhàn)中抽離的Demo

核心邏輯和步驟流程概述：

前端添加“查詢”按鈕：在表單中輸入箱號，點擊“查詢”按鈕后，通過調(diào)用后端接口獲取數(shù)據(jù)
后端處理查詢請求：后端根據(jù)傳入的查詢數(shù)據(jù)庫，返回查詢到的數(shù)據(jù)
前端回顯查詢結(jié)果：前端接收到查詢結(jié)果后，將數(shù)據(jù)填充到表單中，用戶可以在表單中查看或編輯數(shù)據(jù)

1. 前端

前端界面包含一個輸入框（用于輸入箱號）和一個“查詢箱號”按鈕。點擊按鈕時，會通過后端接口查詢箱號相關(guān)數(shù)據(jù)，并將查詢結(jié)果回顯到表單中

<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({
  // 表單驗證規(guī)則
})
const formLoading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
// 打開彈窗方法
const open = async (type, id = null) => {
  dialogVisible.value = true
  dialogTitle.value = type === 'create' ? '創(chuàng)建' : '編輯'
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      formData.value = await GoodsLogApi.getGoodsLog(id)
    } finally {
      formLoading.value = false
    }
  }
}
// 重置表單數(shù)據(jù)
const resetForm = () => {
  formData.value = {
    containerNumber: '',
    containerOwner: '',
    // 其他字段
  }
}
// 查詢箱號數(shù)據(jù)
const searchBoxData = async () => {
  if (!formData.value.containerNumber) {
    return this.$message.warning('請輸入箱號')
  }
  formLoading.value = true
  try {
    // 向后端請求箱號數(shù)據(jù)
    const boxData = await GoodsLogApi.queryBoxData(formData.value.containerNumber)
    if (boxData) {
      // 將查詢結(jié)果填充到表單
      formData.value.containerOwner = boxData.containerOwner || ''  // 例如填充箱屬
      // 根據(jù)返回的其他字段繼續(xù)填充表單數(shù)據(jù)
      formData.value.containerNumber = boxData.cntr || ''  // 例如填充箱號
    } else {
      this.$message.warning('未找到相關(guān)箱號數(shù)據(jù)')
    }
  } catch (error) {
    this.$message.error('查詢失敗')
  } finally {
    formLoading.value = false
  }
}
</script>

前端調(diào)用后端查詢箱號數(shù)據(jù)接口，并返回查詢結(jié)果。

// api/GoodsLogApi.js
import request from '@/utils/request'
export default {
  // 根據(jù)箱號查詢數(shù)據(jù)
  queryBoxData(containerNumber) {
    return request({
      url: `/api/goods-log/query-box`,
      method: 'get',
      params: { containerNumber }
    })
  }
}

2. 后端

后端接口接收箱號作為請求參數(shù)，查詢數(shù)據(jù)庫相關(guān)數(shù)據(jù)，并將數(shù)據(jù)返回給前端

@RestController
@RequestMapping("/api/goods-log")
public class GoodsLogController {
    @Autowired
    private GoodsLogService goodsLogService;
    // 查詢箱號數(shù)據(jù)
    @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);  // 如果未找到數(shù)據(jù)
        }
        return ResponseEntity.ok(boxData);  // 返回查詢結(jié)果
    }
}

以及

在服務(wù)層通過 SQL 查詢箱號數(shù)據(jù)，并返回查詢到的結(jié)果

@Service
public class GoodsLogService {
    @Autowired
    private JdbcTemplate jdbcTemplate;  // 使用 JdbcTemplate 執(zhí)行 SQL 查詢
    public Map<String, Object> queryBoxData(String containerNumber) {
        String sql = "SELECT * " +
                     "FROM xxx WHERE CNTR = ?";
        // 執(zhí)行查詢并返回結(jié)果
        List<Map<String, Object>> result = jdbcTemplate.queryForList(sql, containerNumber);
        // 如果找到數(shù)據(jù)，返回第一個結(jié)果
        if (result != null && !result.isEmpty()) {
            return result.get(0);
        }
        return null;  // 如果沒有找到數(shù)據(jù)，返回 null
    }
}

3. 總結(jié)

前端輸入箱號：用戶在表單中的 containerNumber 輸入框中輸入箱號
點擊查詢按鈕：用戶點擊“查詢箱號”按鈕，觸發(fā) searchBoxData 方法
請求后端接口：前端通過 GoodsLogApi.queryBoxData 向后端請求箱號數(shù)據(jù)
后端查詢數(shù)據(jù)庫：后端通過 SQL 查詢數(shù)據(jù)庫，獲取箱號的相關(guān)數(shù)據(jù)
回顯數(shù)據(jù)：如果查詢到數(shù)據(jù)，后端將數(shù)據(jù)返回給前端，前端將數(shù)據(jù)回顯到表單中的各個字段（例如 containerOwner、containerNumber 等）

實戰(zhàn)截圖如下：