项目作者: Zuzze

项目描述 :
Templating engine examples for online shop for pug, handlebars and ejs.
高级语言: HTML
项目地址: git://github.com/Zuzze/nodejs-templates.git
创建时间: 2020-11-23T19:59:15Z
项目社区:https://github.com/Zuzze/nodejs-templates

开源协议:

下载


Node.js Complete Guide

This repository is based on 40+ hours complete Node.js course by Academind including tools to work with node.js from basic to advanced.

npm (Node Package Manager)

A tool to add external packages and manage nodejs apps.

npm scripts

To add custom scripts to make dev workflow easier there are two ways:

  1. Script with reserved word: run with npm <script_name> e.g. npm start
  2. Your own custom script name: run with npm run <script_name> e.g. npm run my-script-name

Installing npm packages

If project is new and node_modules folder not included: npm install initializes the project.

Adding new package - Three options:
a) Global (all projects): npm install -g
b) Dev only (not needed in prod): npm install —save-dev
c) Prod only: npm install —save

nodemon

Enables “hot reloading” so you don’t have to restart the server everry time you make a change in your code

Express & Bodyparser

Init express server

  1. const express = require("express");
  2. const app = express();
  3. const bodyParser = require("body-parser");
  4. const app = express()
  5. app.use(bodyparser.urlencoded({extended: false})

Types of requests

  • app.use() (All http methods)
  • app.get() (Only GET)
  • app.post() (Only POST)

Public folder

if you want to expose client to some files (e.g. CSS) in your node.js app, you have to put them into public folder

NOTE: when referring to public folder, use “/“ as route, not “/public/“ as node sees public files are in the root

Templating engines

Tools to mix dynamic content (JS) into template (HTML). The final page response will be always pure HTML. Define template engines with express using app.set("view engine", "handlebars") and return template by res.render(...).

1. Pug

No end tags, indentation important

  1. main
  2. if prods.length > 0
  3. ...
  4. else
  5. ...

Variable

  1. title #{pageTitle}

Can extract main layout by

  1. extends layouts/main-layout.pug

2. Handlebars

Uses {{…}} to separate JS, uses # to start and / to end. Can extract main layout into separate file

  1. <main>
  2. {{#if hasProducts }}
  3. ...
  4. {{ else }}
  5. ...
  6. {{/if }}
  7. </main>

Variable

  1. <title>{{ pageTitle }}</title>

Can extract main layout into main-layout.handlebars and define in app.js (not in template)

  1. app.engine(
  2. "handlebars",
  3. expressHbs({
  4. layoutsDir: "views/layouts",
  5. defaultLayout: "main-layout",
  6. extname: "handlebars"
  7. })
  8. );

You must define body (where content goes) in main-layout.handlebars template:

  1. {{{ body }}}

3. EJS

JS wrapped inside <% ... %>.

  1. <main>
  2. <% if (prods.length > 0) { %>
  3. ...
  4. <% } else { %>
  5. ...
  6. <% } %>
  7. </main>

Variable

  1. <title><%= pageTitle %></title>

Can extract main layout into separate files (head.ejs, navigation.ejs, end.js), import into template by

  1. <%- include('includes/head.ejs') %>