Skip to content

❤ Node05-增删改查接口优化

1、优化用户查询接口,根据用户条件查询我们的列表

image.png

先拿sql数据命令试试

js
SELECT * FROM user WHERE name = 'san娟';

image.png

我们的查询命令没问题,接下来把我们的传入的活数据给传入进去即可

传入查询参数之中的params参数进行鞋带参数的查询

js
// 获取用户
function getUserList() {
    let api = "http://localhost:8888/api/user";
    const params = {
      name: queryParams.value.name?queryParams.value.name:'',
    };
    axios.get(api,{
      params: params
    }).then(res => {
        // console.log(res, '/user/list');
        if (res.status == 200) {
            console.log(res, 'res');
            tableData.value = res.data.data;
        }
    })
}

app.js之中添加上对应的接收参数query

js
// 查询用户2
app.get('/api/user', (req, res) => {
  const { name } = req.query;
  const values =[name];
  const sql = `SELECT * FROM user WHERE name = ? `;  // 准备 SQL 插入语句
  // 查询数据库并返回数据
  connection.query(sql,values,(err, results) => {
    console.log(err,'err');
    // console.log(results,'results');
    if (err) {
      console.error('Error querying database:', err);
      res.status(500).json({ error: 'Internal server error' });
      return;
    }
    res.json({
      code:'200',
      data:results,
    });
  });
});

查询可以看出,我们查询参数已经传进去了 image.png

返回参数也可以正常显示 image.png

到这里我们就实现了根据name查询的功能

这里可以留一个小的测试,进一步对多个查询参数进行查询,并且在数据为空的时候也可以进行正常的查询!

2、根据用户ID查询用户详细信息

接下来我们做一个修改,但是之前要根据用户的iD做一个查询然后回显用户的详情数据 image.png

先试试我们的sql查询语句:

js
SELECT * FROM user WHERE id = 13

查询结果没问题,接下来我们以地址的方式携带参数到get请求的最后: 最后的查询地址就是:http://localhost:8888/api/user/3

3是查询的用户 id image.png

我们的查询用户详情接口如下图:

js
// 查询用户详情 3
app.get('/api/user/:id', (req, res) => {
  console.log(req.query,'req.query');
  const { id } = req.query;
  const values =[id];
  let query = 'SELECT * FROM user WHERE id = ?';
  connection.query(query,values,(err, results) => {
    console.log(err,'err');
    // console.log(results,'results');
    if (err) {
      console.error('Error querying database:', err);
      res.status(500).json({ error: 'Internal server error' });
      return;
    }
    res.json({
      code:'200',
      data:results,
    });
  });
});

查询id为3 的,这边我们可以看到数据库是存在数据的,但是查出来的数据却为空。 image.png

查看我们从接口拿到的数据可以发现: req.query压根没有参数 image.png

在这里我们可以看一下req.queryreq.params的区别

....

接下来就知道我为什么要将接收参数给换掉,我们使用req.params来拿到参数 image.png

成功拿到参数,对于前端而言,接下来拿数组第一个数据这种操作肯定是不行的,所以我们从后台接口里面返回的数据进行一下优化

js
res.json({
      code:'200',
      data:results?results[0]:{},
 });

ok数据已经成功显示! image.png

3、req.queryreq.params的区别

req.queryreq.params是 Express 框架中用于从 HTTP 请求中获取参数的两种常见方式。它们的区别在于获取参数的方式和用途不同。

  1. req.query
    • req.query 是 Express 中的一个对象,用于获取 URL 查询参数(即 URL 中以 ? 开头的参数),通常用于 GET 请求。
    • 它会将 URL 查询参数解析成一个对象,其中键值对分别对应参数的名称和值。
    • 在路由处理函数中,可以通过 req.query 直接访问这个对象,从而获取请求中的查询参数。
js
// 示例 URL:http://example.com/api/users?name=John&age=30
console.log(req.query);
// 输出:{ name: 'John', age: '30' }
  1. req.params
    • req.params 是 Express 中的一个对象,用于获取路由参数,通常用于动态路由。
    • 在定义路由时,通过在路由路径中使用冒号(:)定义参数,这些参数会被 Express 解析并放入 req.params 中。
    • 这种方式适用于从 URL 中获取动态部分,例如用户 ID 或者其他标识符。
js
// 示例路由:/api/users/:id
console.log(req.params.id);
// 输出:用户ID
  1. 区别和用途
    • req.query 用于获取 URL 查询参数,适用于获取客户端通过 URL 传递的数据。
    • req.params 用于获取路由参数,适用于获取客户端通过 URL 路径中的动态部分传递的数据。
    • 通常,如果参数是作为查询字符串出现在 URL 中,使用 req.query;如果参数是作为路由的一部分出现在 URL 中,使用 req.params

总之,req.queryreq.params 分别用于获取不同类型的客户端传递的数据,具体根据请求中参数的形式来选择使用哪种方式

因为我这里采用的直接获取用户详情肯定是一个id,所以采用的就是req.params这种方式 image.png

Released under the MIT License.