使用node / express动态加载网页，需要在同一页面上呈现

Question

我正在使用节点和表达与胡子模板系统，我已经创建了一个多页网站，但不希望它在渲染时刷新（使其成为单页），我该怎么做才能解决这个问题？

我想我需要使用ajax，我只是不确定如何。

现在它将URL呈现到另一个页面，但我需要它在同一页面上呈现。

这是一些代码

const express = require('express');
const parseurl = require('parseurl');
const bodyParser = require('body-Parser');
const path = require('path');
const expressValidator = require('express-validator');
const mustacheExpress = require('mustache-express');
const models = require('./models');
const session = require('express-session');
const app = express();

app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache');
app.set('views', './views')
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
 }));
app.use(expressValidator());

app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true
}));


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

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

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

app.get('/login', function(req, res) {
  if (req.session && req.session.authenticated) {
 var user = models.user.findOne({
  where: {
    username: req.session.username,
    password: req.session.password
  }
}).then(function(user) {
  if (user) {
    req.session.username = req.body.username;
    req.session.userId = user.dataValues.id;
    let username = req.session.username;
    let userid = req.session.userId;
    res.render('index', {
      user: user
    });
  }
})
} else {
res.redirect('/home')
}
})

app.post('/login', function(req, res) {
let username = req.body.username;
let password = req.body.password;

Answer 1

如果您尝试将应用程序转换为使用单页面体系结构，同时仍然预先渲染服务器上的所有HTML，则需要实现某种形式的客户端路由器，如this one。在客户端代码中，在每个路由的回调中，您可以对服务器进行AJAX调用，然后用服务器返回的html替换整个html文档。如果你使用jquery，这样的事情：

route('/login', function(name) {
      $.get("/login", {
            anyotherparamsyouwanttosend: "whatever",
        },
        function(htmlResponse) {
            $('html').html(htmlResponse);
        })
})

但是，与传统的多页面架构相比，这种方法没有多大优势。更好的方法是在客户端渲染胡子模板。在您的Express代码中，您将使用res.json而不是res.render来发送您在客户端呈现Mustache模板所需的数据，而不是发送大块HTML。

希望这可以帮助！