CODEWITHSUNDEEP
htmlnode.js
user7592671
user7592671

Reputation: 310

Node Js and populating html pages

I got given a node js project and I know nothing about node js. I have looked up various tutorials and have managed to create and html page for signing up and then logging in to the application. I am connected to a mongo db that stores the username and password information (so far only one table, only username and password stored)

After the user logs in I want to display the username on the "home" page, so would like for that to pull through, but I am not too clued up as to how to achieve this. I come from a predominantly c# background so a bit like a fish out of water for now.

I have tried to add a level of separation to different classes and this is more or less how my .js files are set up...

ApplicationName

-- Config folder

  -database.js (inside config folder)

  -passport.js (inside config folder)

- - Models folder

  -routes.js (inside models folder)

   -user.js (inside models folder)
   -user.js (inside models folder)

-- Views folder

  -Login.html (inside views folder)

   -signup.html (inside views folder)

   -Home.html (inside views folder)

   -Index.html (inside views folder)

server.js (directly under application)

my question is two-fold I guess.

first, How do I communicate with the html page in terms of setting values to labels or inputs etc from the .js file(s) in their various folders.

second, how do I communicate/share variables between .js files?

The examples I have been able to find online are mainly how to manipulate the html file directly from withing the server.js file, but since I have this separation I am not sure how this is achieved. Any help or point to tutorials / examples I may have missed would be really great.

Upvotes: 0

Views: 1351

Answers (1)

Alex
Alex

Reputation: 419

1.I use handlebars to do it

With it - you are able to place js variables in html ( also to display #each of them ),

here is www of handlebars: https://handlebarsjs.com/

2.To share variables you can use module.exports

EXAMPLE for 1:

get values from db :

router.get('/', (req, res)=>{
 Recipe.find({})
  .then(recipes=>{
    res.render('admin/recipes', {recipes: recipes});
 });
});

display them in the view:

{{#each recipes}}
  <tr>
    <td><img style="height:45px;" class="img-responsive" src="/uploads/{{file}}" alt=""></td>
    <td>{{title}}</td>
    <td>{{allowComments}}</td>
    <td>{{short}}</td>
    <td><a href="/admin/recipes/edit/{{id}}" class="btn btn-info">Edit</a></td>
    <td>
      <form action="/admin/recipes/{{id}}?_method=DELETE" method="post">
        <button type="submit" class="btn btn-danger">Delete</button>
      </form>
    </td>
  </tr>
{{/each}}

If you will have questions about handlebars or how to set it up - feel free to ask - I will do my best to help you.

EXAMPLE for 2:

const path = require('path');

module.exports = {
 uploadDir: path.join(__dirname, '../public/uploads/'),
 isEmpty: function(obj){
    for(let key in obj){
        if (obj.hasOwnProperty(key)) {
            return false;
        }
    }
    return true;
 }
};

You are able to request them from other file like this:

const{ isEmpty, uploadDir } = require('../../helpers/upload-helper');

Hope that will help you.

EDIT:

I think that yoi sholud also check this part of express documentation:

https://expressjs.com/en/4x/api.html#res.render

http://expressjs.com/en/guide/using-template-engines.html

Upvotes: 2

Related Questions