如何为Quasar的q-input/q-date实现监听器并联动后端数据过滤？

一、前端处理：监听日期变化并发起请求 #

在display.vue中，我们需要监听用户选择的日期变化，向后端传递日期参数，同时将日期同步到URL查询参数中，提升整体用户体验。

修改后的display.vue代码：

<template>
  <div class="q-pa-md" style="max-width: 300px">
    <q-input filled v-model="date" mask="date" :rules="['date']">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-date v-model="date" @input="fetchDataByDate">
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat />
              </div>
            </q-date>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default {
  setup () {
    const date = ref('2019/02/01')
    const router = useRouter()

    // 根据日期获取数据的核心函数
    const fetchDataByDate = async () => {
      try {
        // 同步日期到URL查询参数，保留历史记录
        await router.push({ query: { selectedDate: date.value } })
        
        // 向后端发送请求
        const response = await axios.get('/api/displayData', {
          params: { selectedDate: date.value }
        })
        // 此处处理返回的数据，比如更新页面展示逻辑
        console.log('筛选后的数据:', response.data)
      } catch (error) {
        console.error('请求失败:', error)
      }
    }

    // 监听日期变化，自动触发数据请求
    watch(date, () => {
      fetchDataByDate()
    })

    // 页面初始化时，若URL已有日期参数，同步到组件并请求数据
    const initDate = router.currentRoute.value.query.selectedDate
    if (initDate) {
      date.value = initDate
      fetchDataByDate()
    }

    return {
      date
    }
  }
}
</script>

二、后端处理：接收日期参数并过滤数据 #

在displayData.js中，从请求的查询参数中获取日期，修改SQL查询语句添加过滤条件，务必使用参数化查询防止SQL注入。

修改后的displayData.js代码：

// displayData.js
router.get("/api/displayData", async function (req, res) {
  try {
    const { selectedDate } = req.query;
    let query = 'SELECT * FROM database';
    let queryParams = [];

    // 若存在日期参数，添加过滤条件
    if (selectedDate) {
      // 假设数据库日期字段为`record_date`，格式与前端传递的一致（如'YYYY/MM/DD'）
      query += ' WHERE record_date = ?';
      queryParams.push(selectedDate);
    }

    // 执行参数化查询（以mysql2为例，其他数据库逻辑类似）
    const [results] = await db.query(query, queryParams);
    
    // 返回筛选后的数据
    res.json(results);
  } catch (error) {
    console.error('查询失败:', error);
    res.status(500).json({ error: '查询数据失败' });
  }
});

三、是否将日期更新到URL中？ #

推荐这么做，核心优势：

• 可分享性：用户复制URL分享给他人，对方打开后能直接看到相同的日期筛选结果。
• 状态保留：页面刷新时不会丢失已选日期，自动重新加载对应数据。
• 历史回溯：用户可通过浏览器前进/后退按钮切换不同日期的筛选状态，体验更流畅。
• 符合REST设计：将筛选条件作为URL查询参数，是REST风格中资源筛选的常规做法。

如果业务中日期属于敏感信息，或不需要上述特性，也可选择通过POST请求体传递日期，但GET+URL参数的方式在这类数据筛选场景下更优雅。

内容的提问来源于stack exchange，提问作者Annielaa