abc-notepedia

# Model View Controller (MVC)

Seperation of Concerns

create folders

  • /models
  • /views
  • /controller

=> model and view usually never interact with each other -> presentaion and logic of data is totally seperated

mvc

put all the logic in seperate files, eg.

# Controller

route

const path = require('path');

const express = require('express');

const productsController = require('../controllers/products');

const router = express.Router();

// /admin/add-product => GET
router.get('/add-product', productsController.getAddProduct);

// /admin/add-product => POST
router.post('/add-product', productsController.postAddProduct);

module.exports = router;

const products = [];

exports.getAddProduct = (req, res, next) => {
  res.render('add-product', {
    pageTitle: 'Add new product',
    path: '/admin/add-product',
    formsCss: true,
    productCSS: true,
    activeAddProduct: true,
  });
};

exports.postAddProduct = (req, res, next) => {
  products.push({ title: req.body.title });
  res.redirect('/');
};

# Models

costructor function or class

example: /models/product.js

const products = [];
module.exports = class Product {
  constructor(t) {
    this.title = t;
  }

  save() {
    products.push(this);
  }

  static fetchAll() {
    return products;
  }
};

const Product = require('../models/product');

exports.getAddProduct = (req, res, next) => {
  res.render('add-product', {
    pageTitle: 'Add new product',
    path: '/admin/add-product',
  });
};

exports.postAddProduct = (req, res, next) => {
  const product = new Product(req.body.title);
  product.save();
  res.redirect('/');
};

exports.getProducts = (req, res, next) => {
  const products = Product.fetchAll();
  res.render('shop', {
    prods: products,
    pageTitle: 'Shop',
    path: '/',
  });
};

  • More on MVC: https://developer.mozilla.org/en-US/docs/Glossary/MVC

  • https://www.youtube.com/watch?v=DUg2SWWK18I

  • https://www.youtube.com/watch?v=pCvZtjoRq1I

mvc_structure

# Express development environment (opens new window)

A handy tool for creating skeleton Express web apps that follow the MVC pattern (opens new window).

The application generator is optional

Installing the Express Application Generator (opens new window)

https://expressjs.com/en/starter/generator.html

← .ENV →