How to navigate through pages without reloading the page (pug, express)?

E

Erik21212017-09-23 10:51:12

Node.js

Erik2121, 2017-09-23 10:51:12

See there are 3 pages index.pug, q.pug, schedule.pug:
Server:

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(express.static(__dirname + '/views/'));
app.set('views', __dirname + '/views/');
app.set('view engine', 'pug');


app.get('/', function(req, res) {
    conn.query("SELECT * FROM posts ORDER BY id DESC",  function(err, rows) {
        if(err) throw err;
        res.render('index', { data : rows });
    });
});

app.get('/q', function(req, res) {
    conn.query("SELECT title FROM posts ORDER BY id DESC",  function(err, rows) {
        if(err) throw err;
        res.render('q', { q : rows });
    });
});

app.get('/schedule', function(req, res) {
    conn.query("SELECT fulltxt FROM posts ORDER BY id DESC",  function(err, rows) {
        if(err) throw err;
        res.render('schedule', { s : rows });
    });
});

client:

.container.main
    div  
      each row in q  
       p= row.title

Each page has a navigation:

.container
    nav
     .nav-wrapper
       a.brand-logo(href='/') Dashboard
       ul#nav-mobile.right.hide-on-med-and-down
        li
          a(href='/schedule') Расписание
        li
          a(href='/q') Вопросы

I want to be able to switch pages without reloading, well, type SPA :D
I understand, of course, that it's better to use Angular, but for now I'm practicing like this.
I would be grateful for a hint

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Aleksey Solovyev, 2017-09-23
@alsolovyev

On the client side, we create XMLHttpRequest (ajax) along the path ( /schedule, /q ... ). In response, we receive data from the server (a piece of html code). We insert the received data in the place we need.

A

Abcdefgk, 2017-09-23
@Abcdefgk

Yes, you need to give everything with one GET request. It's elementary, Watson - to do it, as in Gmail, and without any notorious angular. Three large (full-page) divs with content (having discarded them in the template engine in layouts) - and switch their style.display - block / none
Here, I bungled the general scheme out of boredom:

<!DOCTYPE html>
<html>
<head>
  <title>NAV</title>
  <meta charset="utf-8">
  <style>
    ul li {
      display: inline-block;
      cursor: pointer;
    }
    #one,
    #two,
    #three {
      width: 80%;
      height: 500px;
    }
    #one {
      border: 5px solid red;
    }
    #two {
      border: 5px solid green;
    }
    #three {
      border: 5px solid blue;
    }
  </style>
</head>
<body>
  <div>
    <ul>
      <li>Красный</li>
      <li>Зелёный</li>
      <li>Синий</li>
    </ul>
  </div>

  <div id="one" style="display:block"></div>
  <div id="two" style="display:none"></div>
  <div id="three" style="display:none"></div>

  <script>
    var red = document.getElementById('one');
    var green = document.getElementById('two');
    var blue = document.getElementById('three');

    var ul = document.querySelector('ul');
    ul.children[0].onclick = function() {
      green.style.display = 'none';
      blue.style.display = 'none';
      red.style.display = 'block';
    }
    ul.children[1].onclick = function() {
      red.style.display = 'none';
      blue.style.display = 'none';
      green.style.display = 'block';
    }
    ul.children[2].onclick = function() {
      red.style.display = 'none';
      green.style.display = 'none';
      blue.style.display = 'block';
    }
  </script>
</body>
</html>

V

Vladimir Mukovoz, 2017-09-23
@castomi

And you can also do it through web sockets), otherwise I support those who have already answered.