在 Express.js 中的静态页面中获取 URL 值
Get URL value in static page in Express.js
我是节点和表达的初学者。在我当前的应用程序中,页面使用以下代码显示:
var app = express();
app.use(serveStatic('static', {'index': ['index.html']}));
在静态文件夹中,有文件:
css, index and a js file
监听3000端口正常
但是,如果我想像这样访问 URL 怎么办:
localhost:3000/name=someName
我想在静态文件夹中可用的 js 文件中使用此名称参数。
或者建议任何其他路由方法来做到这一点?
您可以像下面这样定义路线,
router.get('/name=:id', function(req, res, next) {res.render('index', { title: req.params.id});});
路由参数被命名为 URL 段,用于捕获在 URL 中它们的位置指定的值。这个捕获的值我们可以使用 'req.params' 对象访问。供参考https://expressjs.com/en/guide/routing.html
如果你想在你的 .js 文件中获取查询参数,这是可以做到的。所以代码看起来像这样:
服务器 (index.js)
"use strict";
var express = require("express");
var serveStatic = require('serve-static');
var app = express();
app.use(serveStatic('static', {'index': ['index.html']}));
app.listen(3000);
console.log("Static express server started");
HTML (/static/index.html)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body onLoad="readParameters()">
<div>
<h3 id="1" >Loading..</h3>
</div>
</body>
</html>
客户端JavaScript (/static/test.js)
var readParameters = function()
{
console.log('Getting parameters..');
let params = (new URL(location)).searchParams;
console.log('Query parameters: ', params.toString());
var html = 'Query parameters: ';
for (let p of params) {
html += "<br/>" + p.toString();
}
$("#1").html(html);
}
然后您可以输入以下内容进行测试:
http://localhost:3000/?test=value
进入您的浏览器。
你应该看到:
Query parameters: test=value
在索引页上。
代码树应该是这样的:
root
¦ index.js
¦
+---static
index.html
test.js
3 个文件:
/index.js (Node server side code)
/static/index.html (HTML)
/static/test.js (Test JavaScript file)
我是节点和表达的初学者。在我当前的应用程序中,页面使用以下代码显示:
var app = express();
app.use(serveStatic('static', {'index': ['index.html']}));
在静态文件夹中,有文件:
css, index and a js file
监听3000端口正常
但是,如果我想像这样访问 URL 怎么办:
localhost:3000/name=someName
我想在静态文件夹中可用的 js 文件中使用此名称参数。
或者建议任何其他路由方法来做到这一点?
您可以像下面这样定义路线,
router.get('/name=:id', function(req, res, next) {res.render('index', { title: req.params.id});});
路由参数被命名为 URL 段,用于捕获在 URL 中它们的位置指定的值。这个捕获的值我们可以使用 'req.params' 对象访问。供参考https://expressjs.com/en/guide/routing.html
如果你想在你的 .js 文件中获取查询参数,这是可以做到的。所以代码看起来像这样:
服务器 (index.js)
"use strict";
var express = require("express");
var serveStatic = require('serve-static');
var app = express();
app.use(serveStatic('static', {'index': ['index.html']}));
app.listen(3000);
console.log("Static express server started");
HTML (/static/index.html)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body onLoad="readParameters()">
<div>
<h3 id="1" >Loading..</h3>
</div>
</body>
</html>
客户端JavaScript (/static/test.js)
var readParameters = function()
{
console.log('Getting parameters..');
let params = (new URL(location)).searchParams;
console.log('Query parameters: ', params.toString());
var html = 'Query parameters: ';
for (let p of params) {
html += "<br/>" + p.toString();
}
$("#1").html(html);
}
然后您可以输入以下内容进行测试:
http://localhost:3000/?test=value
进入您的浏览器。
你应该看到:
Query parameters: test=value
在索引页上。
代码树应该是这样的:
root
¦ index.js
¦
+---static
index.html
test.js
3 个文件:
/index.js (Node server side code)
/static/index.html (HTML)
/static/test.js (Test JavaScript file)