我开发了一个 Web 应用程序,使用 Node.js 作为后端,使用 HTML/CSS/JS 作为前端。我正在尝试使用 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 来实现此目的而不加载页面?我有点迷失了。
最佳答案
您的问题非常广泛,但我会尝试解释一些可能有帮助的事情。
Express 的工作是处理 HTTP 请求并返回响应。其中一些响应将是 HTML 文件,可能包含 JavaScript 和 CSS。
要创建 SPA,您至少需要向客户端浏览器提供一组 HTML 和 JavaScript 作为起点,通常是一个 index.html
页面。
此页面通过 JavaScript 和 HTML 可以监听事件,包括用户操作和输入,并回调 Express 服务器上的其他端点,而不是返回数据、HTML 片段或您需要的任何内容,以允许您更改为用户提供的单个页面。但更改必须由初始页面上存在的 JavaScript 或由初始 JavaScript 添加并执行的脚本来执行。
例如,您可以使用 jQuery 或 fetch
来回调您的服务器,甚至是 basic web APIs在浏览器中。还有其他可用的工具。
关于javascript - 使用 Node.js + Express 构建简单的 SPA,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48613137/