有没有一种方法可以选择具有特定列值的表格行，并且还显示 phpmyadmin 中原始表格中的行号？

Question

我正在尝试通过 phpmyadmin 使用 mysql 制作一个全栈 CRUD Web 应用程序，它将被发送到一个快速前端（这是我第一次使用 SQL 和 PHP，所以请原谅我的错误或我缺乏知识）例如，我的 PHP 表格：

ID  Name  Time      Date  

1   COR   01:40:37  01/24/24

2   BING  01:39:38  01/23/24

其值已随用户输入插入。以下可能吗？

首先获取行号并按“时间”排序：

ID  Name   Time      Date       Rn

2   BING   01:39:38  01/23/24   1

1   COR    01:40:37  01/24/24   2

但是，当搜索“BING”时，我只想得到以下输出：

ID  Name   Time      Date      Rn

2   BING   01:39:38  01/23/24  1

我的搜索功能是：

async searchByName(name) {
        try{
            const response = await new Promise((resolve, reject) => {
                const query = "SELECT *, ROW_NUMBER() OVER (ORDER BY time) rn FROM medley_relay; SELECT * FROM medley_relay WHERE name = ?;";
// try separating the two queries
                connection.query(query, [name], (err, results) => {
                    if (err) reject(new Error(err.message));
                    resolve(results);
                })
            });
            console.log(response)
            return response;
        } catch (error) {
            console.log(error);
        }
    }

这被称为：

app.get('/search/:name', (request, response) => {
    const {name} = request.params;
    const db = dbService.getDbServiceInstance();

    const result = db.searchByName(name);

    

    result
    .then(data => response.json({data : data}))
    .catch(err => console.log(err)); 
    console.log(result);
})

并通过前端使用 HTML 输入元素激活：

const searchBtn = document.querySelector('#search-btn');

searchBtn.onclick = function() {
    const searchValue = document.querySelector('#search-input').value;

    fetch('http://localhost:5000/search/' + searchValue)
    .then(response => response.json())
    .then(data => loadHTMLTable(data['data']));
}

我的loadHTMLTable函数是：

function loadHTMLTable(data) {
    const table = document.querySelector('table tbody');

    console.log(data);

    if (data.length === 0) {
        table.innerHTML = "<tr><td class='no-data'>No Data</td><td class = 'no-data'colspan='5'>No Data</td></tr>";
        return;
    }

    let tableHtml = "";

    data.forEach(function ({id, name, time, date, rn}) {
    
        tableHtml += "<tr>";
        tableHtml += `<td>${rn}</td>`;
        tableHtml += `<td>${name}</td>`;
        tableHtml += `<td>${time}</td>`;
        tableHtml += `<td>${new Date(date).toLocaleDateString()}</td>`;
        tableHtml += `<td><button class="delete-row-btn" data-id=${id}>Delete</td>`;
        tableHtml += `<td><button class="edit-row-btn" data-id=${id}>Edit</td>`;
        tableHtml += "</tr>";
        
    });

    table.innerHTML = tableHtml;

}

如果我只使用查询：

const query = "SELECT * FROM medley_relay WHERE name = ?;";

并且名称被传递，我得到 rn 的未定义值，因为它尚未通过 ROW_NUMBER 函数定义。但是，当我添加 ROW_NUMBER 函数时，我得到：

[
  [
    RowDataPacket {
      id: 15,
      name: 'Corning',
      time: '01:40:15',
      date: 2024-04-10T04:00:00.000Z,
      rn: 1
    },
    RowDataPacket {
      id: 16,
      name: 'Binghamton',
      time: '01:52:42',
      date: 2024-04-02T04:00:00.000Z,
      rn: 2
    }
  ],
  [
    RowDataPacket {
      id: 16,
      name: 'Binghamton',
      time: '01:52:42',
      date: 2024-04-02T04:00:00.000Z
    }
  ]
]

整个表中都有未定义的值。有没有办法在不获取嵌套数组而仅获取索引 [0][1] 处的数组的情况下执行此操作？现在，我从数组加载数据而不将其限制为任何名称的查询如下所示：

app.get('/getAll', (request, response) => {
    const db = dbService.getDbServiceInstance();

    const result = db.getAllData();

    result
    .then(data => response.json({data : data}))
    .catch(err => console.log(err)); 
})

和

async getAllData() {
        try{
            const response = await new Promise((resolve,reject) => {
                const query = "SELECT *, ROW_NUMBER() OVER (ORDER BY time) rn FROM medley_relay ORDER BY rn;" 
                "SELECT * FROM medley_relay;";
                connection.query(query, (err,results) => {
                    if (err) reject(new Error(err.message));
                    resolve(results);
                })
            });
            return response;
        } catch (error) {
            console.log(error);
        }
    }

在这种情况下，像这样的查询和我的表都可以正常运行。为什么当我更改“SELECT * FROM medley_relay;”时到“SELECT * FROM medley_relay WHERE name = ?;”它停止工作了吗？

Answer 1

也许将您的查询合并到一个 SQL 查询中，同时执行这两项操作。

async searchByName(name) {
    try{
        const response = await new Promise((resolve, reject) => {
            const query = "SELECT *, ROW_NUMBER() OVER (ORDER BY time) rn FROM medley_relay WHERE name = ?;";
            connection.query(query, [name], (err, results) => {
                if (err) reject(new Error(err.message));
                resolve(results);
            })
        });
        console.log(response)
        return response;
    } catch (error) {
        console.log(error);
    }
}