使用 Node.js + Express 构建一个简单的 SPA

Question

我使用 Node.js 作为后端并使用 HTML/CSS/JS 作为前端来开发 Web 应用程序。我正在尝试使用 Express 框架构建单页应用程序。

我想只使用 Node.js 或 JavaScript 构建一个单页应用程序，我知道对于响应我们可以调用类似 res.render('contact') 的东西，但这不适用于我的情况，因为我不想动态更改我的页面，我不想要任何额外的框架，如 React、Angular、...

在我的 index.html 页面上，有一个菜单，其中每个元素都包含一个超链接。例如，当点击 index 页面中的联系人超链接时，我想在同一页面上动态显示联系人页面的内容与表单...等而不加载页面：

    <li> <a href="/contact">Contact</a></li>

我的 server.js 文件定义了路由，默认情况下我被定向到索引页面：

//to define the routes
var express = require('express'), app = express();
//to call multiple template engines easly, like html page...ect
var engines = require('consolidate');

app.engine('html', engines.nunjucks);
app.set('view engine', 'html');
app.set('views', __dirname + '/public');
app.use(express.static(__dirname + '/public'));


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

app.get('/contact', function(req, res){
    res.render('views/contact');
});


var server = app.listen(8080, function(){
    console.log('Listening on port ' + server.address().port);
});

我知道 SPA 存在于单个 HTML 文档中，但是如何在不加载页面的情况下使用 Express Framework 做到这一点？我有点迷茫。

Answer 1

您的问题非常广泛，但我会尝试解释一些可能会有所帮助的事情。

Express 的工作是处理 HTTP 请求并返回响应。其中一些响应将是 HTML 文件，可能带有 JavaScript 和 CSS。

要创建 SPA，您至少需要向客户端的浏览器提供一组 HTML 和 JavaScript 作为起点，通常是 index.html 页面。

这个页面，通过 JavaScript 和 HTML，可以监听事件，包括用户操作和输入，并调用你的 Express 服务器上的其他端点，而不是返回数据、HTML 的 sn-ps 或任何你需要允许的东西您可以更改您提供给用户的单个页面。但更改必须由初始页面上存在的 JavaScript 执行，或者由初始 JavaScript 添加并执行的脚本。

例如，您可以使用 jQuery 或 fetch 来调用您的服务器，甚至是浏览器中的 basic web APIs。还有其他可用的工具。