🕸️
[BA] Web Programming
  • Introductie
  • Cursus
    • TypeScript
      • Waarom TypeScript?
      • Nieuw project
      • Wat is een tsconfig.json?
      • Input lezen
      • Type Systeem
        • Basic types
        • Arrays
        • Functions
        • Class
        • Interface
      • Conditionele blok
      • Loops
      • Array methods
      • Exceptions
      • Modules
      • Asynchroon Programmeren
        • Promises
        • Async/Await
        • Fetch
        • JSON
    • Frontend
      • DOM Manipulatie
      • VITE
      • Deployment met Surge
    • Backend
      • Express.js
        • Basis
        • Nodemon
        • Statische Bestanden
        • Request
        • Response
        • Router
      • MySQL
    • Fullstack
      • Van Form tot Database
      • CORS
  • Labos
    • 1. TS: Basis
      • Hello Name
      • BMI Calculator
      • Interest Calculator
      • Uren en Minuten
      • Wisselgeld
      • Name from Email
      • Text Box
    • 2. TS: Arrays & functions
      • Som van getallen
      • Math Fun
      • Array Sum
      • Puntenboek
      • Rot13
      • Pokemon Team
      • Todo List String
      • Tick Tac Toe
      • BMI Calculator Multi
    • 3. TS: Interfaces & classes
      • Recepten
      • Transportmiddelen
      • Movies
      • Filter Numbers
    • 4. TS: Async & fetch
      • Promise All
      • Slow Sum
      • Cocktails Promise All
      • Joke API
      • School API
      • Cocktails API
      • Unix Timestamp API
    • 5. TS: Modules & NPM
      • Math Module
      • Cowsay Module
      • Cat GPT
      • Rainbow Chalk
    • 6. Frontend: VITE & DOM
      • Verander achtergrond
      • Verander tekst
      • Verander divs
      • Verander kleuren
      • Verander kleuren random
    • 7. Frontend: APIs & DOM
      • Cocktail API met Vite
      • Weather API
      • Uitvinders
      • Rick and Morty
    • 8. Backend: Express & Requests
      • Hello Express
      • DadJoke Express
      • Reiskosten server
    • 9. Backend: MySQL & Routing
      • Reiskosten server
      • Taken server
      • Taken server met prioriteit
    • 10. Fullstack: Forms & Express & MySQL
      • Reiskosten app
      • Taken app
      • Pokémon app
Powered by GitBook

AP

On this page
  • Structuur
  • Aanmaken van een router
  1. Cursus
  2. Backend
  3. Express.js

Router

Tot op heden hebben we alle routes gedefinieerd in 1 bestand. Dit is prima voor kleine applicaties, maar als je applicatie groter wordt, kan het al snel onoverzichtelijk worden. Om dit te voorkomen, kan je routes definiëren in aparte bestanden. Dit kan je doen met het express.Router object.

Structuur

Een router is een mini-applicatie die je kan gebruiken om routes te definiëren net zoals je in een normale express applicatie zou doen. Je kan een router gebruiken om routes te definiëren voor een bepaald deel van je applicatie. Dit kan handig zijn om je code te structureren en overzichtelijk te houden.

Over het algemeen worden routes gedefinieerd in een aparte map, bv. routers. In deze map kan je dan een bestand maken voor elke resource die je wilt definiëren. Bijvoorbeeld, als je een blog applicatie hebt, kan je een bestand maken voor de routes van de blogposts, een bestand voor de routes van het gebruikersbeheer, een bestand voor de routes van de comments, etc.

Je bestandsstructuur zal er dan ongeveer zo uitzien:

.
├── index.ts
└── routers
    ├── posts.ts
    └── users.ts
    └── comments.ts

Die dan overeenkomen met de routes (en eventueel subroutes) die je wilt definiëren.

/posts
/users
/comments

Aanmaken van een router

Om een router aan te maken, gebruik je de express.Router functie. Deze functie retourneert een router object dat je kan gebruiken om routes te definiëren. We bouwen hieronder bijvoorbeeld een router voor de posts van een blog applicatie. We geven deze router een array van posts mee, zodat we deze kunnen gebruiken in de routes.

We maken een bestand posts.ts aan in de routers map en definiëren daar de routes voor de posts.

import express, {Router} from "express";

export const router = express.Router();

router.get("/", (req, res) => {
   res.json(posts);
});

router.get("/:id", (req, res) => {
   const id = parseInt(req.params.id);
   const post = posts.find(post => post.id === id);
   if (post) {
       res.json(post);
   } else {
       res.status(404).send("Post not found");
   }
});

router.post("/", (req, res) => {
   const newPost: Post = req.body;
   posts.push(newPost);
   res.json(newPost);
});

In je hoofdbestand kan je dan deze functie importeren en gebruiken om de routes te definiëren.

import {router} from "./routers/posts";
app.use("/posts", router);

Alle routes die je definieert in de posts router, zullen dan beginnen met /posts. Dus in het geval van het voorbeeld hierboven:

GET /posts
GET /posts/:id
POST /posts
PreviousResponseNextMySQL

Last updated 5 months ago