VUE-條件查詢並顯示報表

  • 15
  • 0

VUE-條件查詢並顯示報表

 

 

為了實現前端和後端都能進行條件查詢並顯示報表

整理出的整體流程

此過程包括 Vue 組件 (components) 的查詢條件設置、Vue 視圖 (view) 層的展示,以及後端查詢邏輯的處理

 

整體流程

前端 (Vue)

components/ReportForm.vue

這個組件負責顯示查詢表單並接收查詢條件,然後向後端發送請求

用戶在 ReportForm.vue 組件中設置查詢條件,並提交查詢請求

Vue 會將查詢條件發送到後端 API(例如使用 Axios)

 

views/ReportForm.vue

這個視圖組件負責顯示報表查詢結果,並接收來自 ReportForm 組件的事件

從後端獲取資料後,Vue 視圖會根據資料顯示報表結果

 

後端

後端 API (Node.js + Express)

接收到查詢請求後,根據條件查詢資料庫,並將結果返回給前端。

 

主要將顯示VIEWS、查詢條件、後端API拆成3部份

方便可以重覆使用

 

但是寫出來後

還沒有感覺特別好用的特點

想再串接LLM模型試試

 

自我LV~