Question

我正在使用node并与胡须模板系统一起表达，我创建了一个多页网站，但不希望它在渲染时刷新（使其变为单页），我该怎么办才能解决这个问题？

我认为我需要使用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。

希望这会有所帮助！

使用节点/表达式动态加载网页，需要在同一页面上呈现

1 个答案: