Динамическая загрузка веб-страницы с использованием узла / экспресса, необходимо визуализировать на той же странице - PullRequest
Новая
       31

Динамическая загрузка веб-страницы с использованием узла / экспресса, необходимо визуализировать на той же странице

0 голосов
/ 20 марта 2019

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

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

1 Ответ

0 голосов
/ 21 марта 2019

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

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

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

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

...