Day 372

This week in my coding class we are going to have a systems check on how to leverage M.V.C. This is the Model-View-Controller method which is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software’s business logic and display. So what better way to prepare than by explaining how some of this stuff works. Routers are the Controllers in MVC, and determine how our applications respond to requests. Typically in the src file of our code we will have another file titled routes which contain our code to route a user around the web application we are creating. In the example my class gave for a messages app we would have a rootRouter.js file inside of the routes folder which would contain some code like this. (We are using the express framework to spin up servers to test that our code is working)

import express from "express"
import messagesRouter from "./messageRouter.js"

const rootRouter = new express.Router()

rootRouter.use("/messages", messagesRouter)

export default rootRouter

We would also have another file in the routes folder called messageRouter.js that would look like this.

// src/routes/messagesRouter.js

import express from "express"

const messagesRouter = new express.Router()

const messages = `I am number one </br>
highway to the DANGER ZONE </br>
the answer is 42 </br>
I LOVE CATS SO MUCH </br>
you miss every shot you dont take :) </br>
(ノ^_^)ノ┻━┻ ┬─┬ ノ( ^_^ノ) </br>
Hello World </br>
o.o </br>
Blub blub blub blub I'm a fish </br>
The above statement is false </br>
The statement below is true </br>
Can I insert a <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">link</a>? </br>
Thanks, that link was really helpful!`

messagesRouter.get('/', (req, res) => {
    res.contentType("text.html").send(messages)
})

export default messagesRouter

my app.js file which is located in the src folder of my code contains this.

import rootRouter from "./routes/rootRouter.js"
import express from "express"
import logger from "morgan"
import bodyParser from "body-parser"
import path from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const app = express()

app.use(logger("dev"))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(express.static(path.join(__dirname, '../public')))

app.use(rootRouter)
app.listen(3000, "0.0.0.0", () => {
  console.log("Server is listening...")
})

export default app

So when I run yarn dev to spin up a server and go to localhost:3000/messages in my browser I see this.

I am number one
highway to the DANGER ZONE
the answer is 42
I LOVE CATS SO MUCH
you miss every shot you dont take :)
(ノ^_^)ノ┻━┻ ┬─┬ ノ( ^_^ノ)
Hello World
o.o
Blub blub blub blub I’m a fish
The above statement is false
The statement below is true
Can I insert a link?
Thanks, that link was really helpful!

Hope that helps you figure out a bit of how the MVC model works. Definitely takes some getting use to but when an app becomes incredibly complex I’m sure being able to break the code down like this will be super beneficial so you can both test things and see when things are going wrong without breaking every other part of your app.

3/29/23

Conor Jay Chepenik