NodeJS ExpressJS：将通配符路由和呈现与EJS结合起来有问题

ygya80vv 于 2023-01-20 发布在 Node.js

关注(0)|答案(3)|浏览(151)

我正在开发一个Angular 4.x应用程序，它包含自己的内部路由。它将在Express服务器上运行，不幸的是，它有自己的路由，覆盖了Angular应用程序中的路由。我最初试图通过在Express服务器上使用通配符路由来解决这个问题，但它导致了其他问题。
这其中的一部分也与使用EJS进行模板渲染有关，我将分步骤解释。
首先，我们有以下几条路线：

/ (root)
/appartment
/apartment/:id
/student
/student/:id

以下是呈现和返回的index.html文件：

<!doctype html>
<html lang="en">
  <head>
  </head>
  <body>

    <%- headerMenu %>

    <app-root></app-root>

    <%- footer %>
  </body>
</html>

因为它是一个有自己内部路由的Angular应用程序，所以只有index.html文件会从服务器返回，并且应该为所有路径返回它。
正如你所看到的，这里有一些EJS模板标签。我们真实的的应用程序是一个更大的网站的一部分，所以对于这个特定的应用程序，我们使用EJS来注入相同的headerMenu和footer内容，这些内容在我们所有的页面上都可以找到。不同的网页/应用程序是用不同的框架制作的，而这个应用程序使用的是Angular 4.x，托管在Express服务器上。
下面是js-file的工作版本：

var path = require("path");
var express = require("express");
var ejs = require("ejs");
var bodyParser = require("body-parser");
var http = require('http');

//....... All other content here .... 
//....... All other content here .... 
//....... All other content here .... 

var app = express();
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get(['/', '/apartment(/:id)?', '/student(/:id)?'], function(req, res) {
    res.render('../dist/index.html', {
        headerMenu: ourWebContent.headerMenu,
        footer: ourWebContent.foooter
    });
});

app.use(express.static(path.join(__dirname, '/dist')));

app.listen(env.port, function () {
    console.log('server running at ' + env.port + ', go refresh and see magic');
});

属性env.port和ourWebContent是在此代码部分之前定义的。
如您所见，Angular应用程序中使用的每条路线也在Express服务器代码中明确声明：

['/', '/apartment(/:id)?', '/student(/:id)?']

不幸的是，通过这种方法，对于我在Angular应用程序中引入的每个新路线，我还必须在Express中添加它们。
我尝试过通配符路由，类似于：

['/', '/*']

它本应工作，但在我的应用程序中却导致了以下错误：

Uncaught SyntaxError: Unexpected token <

现在，你们中的一些人可能已经注意到了下面的路线**所述的以下代码：

app.use(express.static(path.join(__dirname, '/dist')));

这是编译后的index.html的存储位置，在谷歌搜索错误后，虽然我不记得在哪里找到了解决方案（Stackoverflow上的其他地方）以及背后的确切解释，但如果我将这一特定代码行移到路由之前，它似乎是有效的。
不幸的是，它引入了一个新问题：EJS在大多数情况下不会呈现，我最终看到的是未呈现的文本，而不是headerMenu和footer。
所以问题是：我怎样才能修复通配符路由，而不破坏EJS呈现？

node.js

来源：https://stackoverflow.com/questions/48099255/expressjs-having-problems-combining-wildcard-routing-and-rendering-with-ejs

3条答案

按热度按时间

oknwwptz1#

为了避免这种冲突，您应该做的（至少是我所做的）是在API中添加一个前缀，这样，当您向/发出请求时，expressionAPI应用程序将返回index.ejs（或任何扩展名

router.get('/', function(req, res, next) {
  res.render('index');
});

现在，如果你有一个API的公寓，那么它是这样的：

app.use('/api/appartments', require('routes/appartments'));

//inside routes/appartments.js
router.get('/', function(req, res, next) {
  return res.send([//apartments])
});

router.get('/:id', function(req, res, next) {
  return res.send({//apartment})
});

诸如此类的学生或其他人。
这样，Angular就可以自由使用自己的路径，而API在/api/...

赞(0）回复(0）举报 2023-01-20

r8uurelv2#

您可以从Angular 动态设置路线，以下是一个示例：
创建路由处理程序：

var handler = function (req, res) {
    res.render('view');
}

通过调用/addRouteDynamically/path动态添加路由：

app.get('/addRouteDynamically/:path', function (req, res, next) {

     var path = req.params.path;

     app.get(path , handler);

});

现在，如果调用GET /addRouteDynamically/appartement%2F%3Aid，express将定义由handler方法处理的新路径
注意，appartement%2F%3Aid等效于appartement/:id

赞(0）回复(0）举报 2023-01-20

f0brbegy3#

Angular 14和快速

看起来我从聚会上迟到了，但我也有同样的问题，我找了很多我怎么能解决这个问题。
我正在使用快递服务Angular ，当我试图使用通配符路由，我结束了空白页与无法获得错误时，我使用了一个不存在的路线Angular 的一面。

**简短答案：**从Express静态文件中排除index.html
详细答案：

有关从静态内容中排除文件的快速文档：https://expressjs.com/en/4x/api.html#path-examples
关于排除文件的堆栈溢出：Exclude sub directory from static files in express
您需要使用Regex排除一个或某些文件。
在app.js中，从static文件夹中排除所有.html文件，这样通配符路由才能正常工作：

app.use(['/(.*).html$/', '/'], express.static(path.join(__dirname, appPath)));

你也可以用Regex排除index.html，我排除了所有以. html结尾的文件。
我在Express端也有一个/API路由，我必须在/api之前放置排除代码。

赞(0）回复(0）举报 2023-01-20

我来回答

NodeJS ExpressJS：将通配符路由和呈现与EJS结合起来有问题

3条答案

相关问题

热门标签

最新问答