Express中带有参数的路由请求req.query、req.body、req.params

- 日理万妓 2022-10-02 10:57 75阅读 0赞

我们的需求是：我们循环遍历出所有用户和密码，我们打算点击删除之后将对应的ID作为参数传输到对应的路由，处理之后，地址重定向也就是页面刷新，数据重新显示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
**前端代码：**

<table border="1" style="width:300px;margin:0 auto;margin-top:10px;">
    
        <tr>
          <td style="text-align:center;vertical-align:middle;">ID</td>
          <td style="text-align:center;vertical-align:middle;">UserName</td>
          <td style="text-align:center;vertical-align:middle;">PassWord</td>
          <td style="text-align:center;vertical-align:middle;">删除</td>
        </tr>
        <tr>
          <%for(var i = 0;i<titles.length;i++){%>
           <tr>
              <td style="text-align:center;vertical-align:middle;"><%=titles[i].id%></td>
              <td style="text-align:center;vertical-align:middle;"><%=titles[i].username%></td>
              <td style="text-align:center;vertical-align:middle;"><%=titles[i].passwd%></td>
              <td style="text-align:center;vertical-align:middle;">
                
                <a href="/root-content/del?id=<%=titles[i].id%>" >删除</a>
              </td>
           </tr>
          <%}%>
        </tr>
    
      </table>

**后端代码：**

**1.Express获取路由地址参数的方法**

**我们主要关注两种方式：req.query（req.body）和req.param**

var express=require('express');
    
    var app=express();
    
    app.get('/csdn',function(req,res){
        var name=req.query.name;
        res.send(name)
    });
    app.get('/csdn/:id',function(req,res){
        var id=req.params.id;
        res.send(id)
    });
    
    app.listen(3000,'0.0.0.0');
    
    //第一个get方法则是可以获取像这样的参数：
    127.0.0.1:3000/csdn?name=参数   //var name=req.query.name; 所以name就是=后的参数
    
    //第二个get则是可以获取到比较优雅的路由地址参数：
    127.0.0.1:3000/csdn/参数   //var id=req.params.id; 所以'参数'就是传递给:id，所以id就是'参数'

req.query也就是？id=参数，这样情况下，key和value都在请求的url中。（[http://localhost:3000/query?q=123&w=456）中key是q/w，value是123/456][http_localhost_3000_query_q_123_w_456_key_q_w_value_123_456].

req.param也就是/，这样情况下，key在路由中，value是请求的url。

router.get('/test/:urlname', function (req, res,next) {
      console.log('url参数对象 :',req.params);
      console.log('get请求参数对象 :',req.query);
      console.log('post请求参数对象 :',req.body);
      console.log('q的值为 :',req.params.urlname);
    });
    http://localhost:3000/test/url2

上面代码中key是urlnname，value是url2.

**我们再看一个代码示例：**

1.获取get请求的参数值（req.query）

在index.js文件里添加路由方法：

router.get('/query', function (req, res, next) {
     
      console.log('get请求参数对象 :',req.query);
      console.log('post请求参数对象 :',req.body);
      console.log('q的值为 :',req.query.q);
      
    });

访问： [http://localhost:3000/query?q=123&w=456][http_localhost_3000_query_q_123_w_456]

结果：  
![在这里插入图片描述][20190618133011750.png]

2.获取post请求的参数值(req.body)

html:

在index.js文件里添加路由方法：

router.post('/body', function (req, res, next) {
      console.log('get请求参数对象 :',req.query);
      console.log('post请求参数对象 :',req.body);
      console.log('q的值为 :',req.body.q);
    });

提交后：  
![在这里插入图片描述][20190618133540586.png]

3.获取url路径（req.params）

在index.js文件里添加路由方法：

访问:[http://localhost:3000/test/url2][http_localhost_3000_test_url2]

![在这里插入图片描述][20190618134425536.png]

再看一个例子：

![在这里插入图片描述][20190618161938588.png]

4.获取上传文件信息

req.files 需要第三方库,比如 multer

大致是这样子的

![在这里插入图片描述][20190618134805172.png]  
关于req.query、req.body、req.params、req.files解释更多可以参考官方文档。

[http://expressjs.com/en/api.html\#req.query][http_expressjs.com_en_api.html_req.query]

**2.利用a标签可以跳转，利用点击事件和ajax也可以跳转**

<td>
    	<button onclick="del(<%=titles[i].id%>)">点击</button>
    </td>
    
    <script>
    	function del(id){
    		$.ajax({
                url:'root-content/delete/id',
                data:{},
                type:'get',
                dataType:'json',
                success:function(result) {
                    alert(result)
                },
                error:function (msg) {
                    console.log(msg);
                    alert('系统发生错误');
                }
            })
    	}
    </script>
    
    router.get("/root-content/delete/:id",function(req,res){
    
    	const id = req.params.id;
    
    })

参考文章：  
[https://blog.csdn.net/woshidamimi0/article/details/80291610][https_blog.csdn.net_woshidamimi0_article_details_80291610]  
[https://blog.csdn.net/zzwwjjdj1/article/details/52094988][https_blog.csdn.net_zzwwjjdj1_article_details_52094988]

express增删改查的参考文章：  
[https://www.cnblogs.com/zhoulifeng/p/10197816.html][https_www.cnblogs.com_zhoulifeng_p_10197816.html]  
[https://blog.csdn.net/qq\_42459742/article/details/88049970][https_blog.csdn.net_qq_42459742_article_details_88049970]  
[https://www.cnblogs.com/yansj1997/p/6550201.html][https_www.cnblogs.com_yansj1997_p_6550201.html]  
[https://blog.csdn.net/qq272708698/article/details/51264988][https_blog.csdn.net_qq272708698_article_details_51264988]  
[https://blog.csdn.net/weixin\_36339245/article/details/87091193][https_blog.csdn.net_weixin_36339245_article_details_87091193]  
[https://www.cnblogs.com/kinoko-1009/p/10527006.html\#top][https_www.cnblogs.com_kinoko-1009_p_10527006.html_top]

[https://blog.csdn.net/ly364434006/article/details/84762741][https_blog.csdn.net_ly364434006_article_details_84762741]  
[https://blog.csdn.net/u012123026/article/details/78979645][https_blog.csdn.net_u012123026_article_details_78979645]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220112/7d008ea29cfa46bbbe771c9d85076712.png
[http_localhost_3000_query_q_123_w_456_key_q_w_value_123_456]: http://localhost:3000/query?q=123&w=456%EF%BC%89%E4%B8%ADkey%E6%98%AFq/w%EF%BC%8Cvalue%E6%98%AF123/456
[http_localhost_3000_query_q_123_w_456]: http://localhost:3000/query?q=123&w=456
[20190618133011750.png]: /images/20220112/557fae5fbaa841a382d67a4547d8002a.png
[20190618133540586.png]: /images/20220112/7b115bed8abd4beabdf65deb11199283.png
[http_localhost_3000_test_url2]: http://localhost:3000/test/url2
[20190618134425536.png]: /images/20220112/caf8e6311e5b4f2a97a2c30467e38827.png
[20190618161938588.png]: /images/20220112/f673d741d4c04db4aafc6efbd3fa98c1.png
[20190618134805172.png]: /images/20220112/5a00f75875734ccea4087c24e3b2dabc.png
[http_expressjs.com_en_api.html_req.query]: http://expressjs.com/en/api.html#req.query
[https_blog.csdn.net_woshidamimi0_article_details_80291610]: https://blog.csdn.net/woshidamimi0/article/details/80291610
[https_blog.csdn.net_zzwwjjdj1_article_details_52094988]: https://blog.csdn.net/zzwwjjdj1/article/details/52094988
[https_www.cnblogs.com_zhoulifeng_p_10197816.html]: https://www.cnblogs.com/zhoulifeng/p/10197816.html
[https_blog.csdn.net_qq_42459742_article_details_88049970]: https://blog.csdn.net/qq_42459742/article/details/88049970
[https_www.cnblogs.com_yansj1997_p_6550201.html]: https://www.cnblogs.com/yansj1997/p/6550201.html
[https_blog.csdn.net_qq272708698_article_details_51264988]: https://blog.csdn.net/qq272708698/article/details/51264988
[https_blog.csdn.net_weixin_36339245_article_details_87091193]: https://blog.csdn.net/weixin_36339245/article/details/87091193
[https_www.cnblogs.com_kinoko-1009_p_10527006.html_top]: https://www.cnblogs.com/kinoko-1009/p/10527006.html#top
[https_blog.csdn.net_ly364434006_article_details_84762741]: https://blog.csdn.net/ly364434006/article/details/84762741
[https_blog.csdn.net_u012123026_article_details_78979645]: https://blog.csdn.net/u012123026/article/details/78979645