Geek Answers Handbook

Serving dynamic web pages with Node.js

I find it difficult to understand exactly how node.js serves dynamic content. So, let's say we have the following code that displays the home page:

var express = require('express'), app = express(); app.get('/', function(req,res){ res.render('home.html'); });

However, suppose this home page should be a user profile in which you retrieve user information from the database, which leads to the code:

 var express = require('express'), mongoose = require('mongoose'), app = express(); mongoose.connect('mongodb://localhost/ExampleDB'); app.get('/:id', function(req,res){ User.findOne({_id: req.id}, function (err, user){ var name = user.name; var profilePic_uri = user.profilePic_uri; res.render('home.html'); });

So, ideally, home.html is just a template page in which you can set the profile picture of the user, his name, etc. in the route handler. That's right, because the idea of ​​node is that this app.js should be able to handle pulling dynamic content from the database at runtime. Where I have problems, you understand exactly how the rendering of dynamic pages works with node. The html page is a static page. You can't really render a php or asp page because, well, that doesn't really make sense?

What leaves me wondering how this is done?

+7
html express
source share
4 answers

If you added ...

 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade');

... after the app = express () application has been executed, it will now be the default for the Jade rendering engine if you are not using the extension. Then in your router:

 app.get('/', function(req,res){ res.render('home', { var1: 'val1', var2: 'val2' }); });

You need to add Jade to the project.json file of the project in the dependencies:

  "jade": "~1.9.1",

... and then "npm install" in your folder to paste this.

Then you need a file called /views/home.jade with the contents:

 doctype html html body p Var1 is #{var1} p Var2 is #{var2}

When visiting your homepage, you should see that the values ​​have been passed to the Jade rendering engine and expanded in the template as "val1" and "val2" respectively.

+7
source share

In your case, the page is static. Here you can use the mechanisms of templates (view engines), with this you can display the contents of the page dynamically.

Some of the template mechanisms that I remember now are vash (this is similar to the razor syntax from MVC, I like it) and jade . There are more of them.

Note. . You can find the links that I provided, how to integrate them using an expression.

+4
source share

What you are actually asking is not how it works in Node, but how Express creates templates. Once you realize that you are actually using the express module feature, you are probably more aware of what you need to look for in order to get the correct documentation.

In short: Express has a template rendering engine that does the job for you, very similar to what ASP or PHP do.

To get acquainted with Node, I would advise you first to try to create something without all the libraries, to find out the platform and understand why it is possible to use such libraries or frameworks (for example, express).

+1
source share

You can use the [Templatesjs] 1 module to visualize dynamic data

this module does the work that you want easily, you can display dynamic data on the html page using this.

let me show you an example:

 <html> <body> Welcome Dear <%username%> <img src="img/<%pic_url%>" /> </body> </html>

Now we need to display the name and pic_url on the page. in your node.js codes

 var express = require('express'), mongoose = require('mongoose'), app = express(), tj = require('templatesjs'); mongoose.connect('mongodb://localhost/ExampleDB'); app.get('/:id', function(req,res){ User.findOne({_id: req.id}, function (err, user){ var name = user.name; var profilePic_uri = user.profilePic_uri; var data = fs.readFileSync('./home.html'); //now do the main thing tj.set(data); // invoke templatesjs with data var output = tj.render("username",name); // this will replace <%username%> with actual username output = tj.render("pic_url",profilePic_uri); res.write(output); res.end() });

Now everything is ready. You can get good help from here.

Hope

0
source share

More articles:


All Articles