nodejs Express路由传参数据交互express.Router() router.get

忘是亡心i 2022-05-31 13:28 297阅读 0赞

路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。

路由是由一个 URI、HTTP 请求（GET、POST等）和若干个句柄组成，它的结构如下： app.METHOD(path, \[callback…\], callback)， app 是 express 对象的一个实例， METHOD 是一个 HTTP 请求方法， path 是服务器上的路径， callback 是当路由匹配时要执行的函数。

下面是一个基本的路由示例：  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
在app.js中部分代码：

var app = express();
    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    //app.set('view engine', 'html');//已经将jade变成html
    app.engine('html', ejs.__express);
    app.set('view engine', 'html');
    app.use('/spider',spider); //中间件设置路由跳转
    app.set('port', process.env.PORT || 3001); // 设定监听端口

在spider.js中：

var express = require('express');
    //初始化路由
    var router = express.Router();
    router.get('/', function(req, res, next) { 
      console.log('spider')
      res.render('spider',{ title: '对某个网站进行爬去',message:'message'});
    });

在spider.html中：

其他代码没有贴出来，展示的代码仅仅说明一下如何有后台给的数据。

对应前端向后台发送请求的做法是：  
![这里写图片描述][70 2]  
在spider.html中：

<div class="form-group row">
        <button class="btn btn-primary col-sm-1 getNewUrl">获取新地址</button>
        <label class="col-sm-3 newUrl"></label>
    </div>
    <script> /*获取新的地址*/ $('.getNewUrl').on('click',function(){ console.log('getNewUrl6666') $.ajax({ type: "GET", url: URL+"/spider/getInfoByType", data: { type:1 }, //dataType: "json", success: function(data){ console.log(data); $(".newUrl").text(data.newUrl) } }); }) </script>

在spider.js中：

//获取对应网站的地址
    router.get('/getInfoByType',function(req,res, next){ 
         /*处理浏览器同源策略问题*/
        res.header("Access-Control-Allow-Origin", "*");
        res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header('Access-Control-Allow-Headers', 'Content-Type');
        res.json({newUrl:'urlurlurlurlurlurlurlurlurlurlurl'});
    });

谢谢点赞和关注！

[70]: /images/20220531/e32745df638246d68c4deff0876794a9.png
[70 1]: /images/20220531/13831f00b2374910956eab4f23450d79.png
[70 2]: /images/20220531/d8e698d525de4ff9814077290b355355.png