Блог

Я использую node и express с системой шаблонов mustache, я создал многостраничный веб-сайт, но не хочу, чтобы он обновлялся при отрисовке (сделайте его одностраничным), что я могу сделать, чтобы решить эту проблему?

я думаю, мне нужно использовать 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 amp;amp; 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;
  

Если вы пытаетесь преобразовать свое приложение для использования одностраничной архитектуры, все еще предварительно отрисовывая весь ваш HTML-код на сервере, вам нужно будет реализовать некоторую форму маршрутизатора на стороне клиента, подобного этому. В вашем клиентском коде, в рамках обратного вызова для каждого маршрута, вы можете выполнить AJAX-вызов на свой сервер, а затем заменить весь html-документ на html, возвращаемый сервером. Что-то вроде этого, если вы используете jquery:

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

Но у этого подхода не так много преимуществ по сравнению с традиционной многостраничной архитектурой. Лучшим подходом было бы визуализировать шаблоны mustache на стороне клиента. В вашем экспресс-коде вы бы использовали res.json вместо res.render отправки только данных, необходимых для отрисовки шаблона Mustache на стороне клиента, вместо отправки большого блока HTML.

Надеюсь, это поможет!