我使用后端的Node.js和前端的HTML / CSS / JS开发了一个Web应用程序。我正在尝试使用Express框架构建单页应用程序。

我想仅使用Node.js或JavaScript构建一个页面应用程序,我知道对于响应我们可以调用类似res.render('contact')的方法,但这在我的情况下不起作用,因为我不想动态更改页面,我不想要任何其他框架,例如React,Angular,...

在我的index.html页面上,有一个菜单,其每个元素都包含一个hyperLink。例如,当单击索引页面中的联系人超链接时,我想在同一个页面上动态显示具有表单... ect的联系人页面的内容,而无需加载页面:

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


我的server.js文件定义了路由,默认情况下,我被定向到index页面:

//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,您至少需要为客户端的浏览器(通常是index.html页面)提供HTML和JavaScript包。

该页面可以通过JavaScript和HTML侦听事件,包括用户操作和输入,并可以调用Express服务器上的其他端点,而返回的端点可以返回数据,HTML代码段或允许您更改单个代码的任何内容。您提供给用户的页面。但是更改必须由初始页面上存在的JavaScript执行,或者由该初始JavaScript添加并执行的脚本执行。

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

09-26 02:07
查看更多