➰With out Express.js
📃 server.js
const http = require("http");
const fs = require("fs");
const _ = require("lodash");
const server = http.createServer((req, res) => {
// lodash
// _.random(from, to)
const num = _.random(0, 20);
console.log(num);
//_.once(funciton)
const greet = _.once(() => {
console.log("hello");
});
greet();
// set header content type
// write res
// end res
res.setHeader("Content-Type", "text/html");
// routing
let path = "./views/";
switch (req.url) {
case "/":
path += "index.html";
res.statusCode = 200;
break;
case "/about":
path += "about.html";
res.statusCode = 200;
break;
case "/about-me": // Moved Permanently
res.statusCode = 301;
res.setHeader("Location", "/about");
res.end();
break;
default:
path += "404.html";
res.statusCode = 404;
break;
}
//send an html file
fs.readFile(path, (err, data) => {
if (err) {
console.log(err);
res.end();
} else {
// res.write(data);
res.end(data);
}
});
});
// create server first argument => callback function requsest가 들어올 떄 마다 실행되는 함수이다.
// res header setting
// --save => save to local dependencies for oldversion node js
server.listen(3000, "localhost", () => {
console.log("listening for requests on port 3000");
});➰With Express.js
📃 app.js
const express = require("express");
// express app
const app = express();
// listen for requests
app.listen(3000);
app.get("/", (req, res) => {
// res.write('')
// res.send("<p>home page</p>");
res.sendFile("./views/index.html", { root: __dirname });
// res.end();
});
app.get("/about", (req, res) => {
// res.send("<p>about page</p>");
res.sendFile("./views/about.html", { root: __dirname });
});
// redirects
app.get("/about-us", (req, res) => {
res.redirect("/about");
});
// 404 page
app.use((req, res) => {
// 모든 requset에 적용 그러나 위에서 부터 아래로 적용 하므로 / /about /about-us 가 아닌 모든 URL에 적용된다.
// res.statusCode = 404;
res.status(404).sendFile("./views/404.html", { root: __dirname });
});
➰With Template Engine(ejs)
❔ What is Template Engine
📃 app.js
const express = require("express");
const app = express();
// register view engine
// set ejs view engine
// ejs automaticly checks views folder
🚗 app.set("view engine", "ejs");
// app.set('views', 'myviews');
app.listen(3000);
app.get("/", (req, res) => {
const blogs = [
{ title: "asdfsdf", snippet: "slekfjselkfj" },
{ title: "sdfsfsef", snippet: "sefseafsdf" },
{ title: "wefsef", snippet: "sdfsefasefse" },
];
res.render("index", { title: "Home", blogs });
});
app.get("/about", (req, res) => {
res.render("about", { title: "About" });
});
app.get("/blogs/create", (req, res) => {
res.render("create", { title: "Create a new Blog" });
});
app.use((req, res) => {
res.status(404).render("404", { title: "404" });
});📋Memo(app.js)
🚗 app.set("view engine", "ejs");
1. ejs automaticly checks views folder
📁views ➡ 📁partials ➡📃 head.ejs
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Ninja | <%= title %></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
body{
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
font-family: 'Noto Serif', serif;
max-width: 1200px;
}
p, h1, h2, h3, a, ul{
margin: 0;
padding: 0;
text-decoration: none;
color: #222;
}
/* nav & footer styles */
nav{
display: flex;
justify-content: space-between;
margin-bottom: 60px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
text-transform: uppercase;
}
nav ul{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
nav li{
list-style-type: none;
margin-left: 20px;
}
nav h1{
font-size: 3em;
}
nav p, nav a{
color: #777;
font-weight: 300;
}
footer{
color: #777;
text-align: center;
margin: 80px auto 20px;
}
h2{
margin-bottom: 40px;
}
h3{
text-transform: capitalize;
margin-bottom: 8px;
}
.content{
margin-left: 20px;
}
/* index styles */
/* details styles */
/* create styles */
.create-blog form{
max-width: 400px;
margin: 0 auto;
}
.create-blog input,
.create-blog textarea{
display: block;
width: 100%;
margin: 10px 0;
padding: 8px;
}
.create-blog label{
display: block;
margin-top: 24px;
}
textarea{
height: 120px;
}
.create-blog button{
margin-top: 20px;
background: crimson;
color: white;
padding: 6px;
border: 0;
font-size: 1.2em;
cursor: pointer;
}
</style>
</head>📁views ➡ 📁partials ➡📃 nav.ejs
<nav>
<div class="site-title">
<a href="/">
<h1>Blog Ninja</h1>
</a>
<p>A Net Ninja Site</p>
</div>
<ul>
<li><a href="/">Blogs</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blogs/create">New Blog</a></li>
</ul>
</nav>📁views ➡ 📁partials ➡📃 nav.ejs
<footer>
Copyright © Blog Ninja 2021
</footer>📁views ➡ 📃 index.ejs
<!DOCTYPE html>
<html lang="en">
<%- include('./partials/head.ejs') %>
<body>
<%- include('./partials/nav.ejs') %>
<div class="blogs content">
<h2>All Blogs</h2>
<% if(blogs.length > 0) { %>
<% blogs.forEach(blog => { %>
<h3 class="title"><%= blog.title %> </h3>
<p class="snippet"><%= blog.snippet %> </p>
<% }) %>
<% } else { %>
<p>There are no blogs to display...</p>
<% } %>
</div>
<%- include('./partials/footer.ejs') %>
</body>
</html>📁views ➡ 📃 about.ejs
<!DOCTYPE html>
<html lang="en">
<%- include('./partials/head.ejs') %>
<body>
<%- include('./partials/nav.ejs') %>
<div class="blogs content">
<h2>About Us</h2>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<%- include('./partials/footer.ejs') %>
</body>
</html>📁views ➡ 📃 create.ejs
<!DOCTYPE html>
<html lang="en">
<%- include('./partials/head.ejs') %>
<body>
<%- include('./partials/nav.ejs') %>
<div class="create-blog content">
<form>
<label for="title">Blog title</label>
<input type="text" id="title" required>
<label for="snippet">Blog snippet</label>
<input type="text" id="snippet">
<label for="body">Blog body</label>
<textarea id="body"required></textarea>
<button>Submit</button>
</form>
</div>
<%- include('./partials/footer.ejs') %>
</body>
</html>📁views ➡ 📃 404.ejs
<!DOCTYPE html>
<html lang="en">
<%- include('./partials/head.ejs') %>
<body>
<%- include('./partials/nav.ejs') %>
<div class="not-found content">
OOPS, page not found :)
</div>
<%- include('./partials/footer.ejs') %>
</body>
</html>
https://github.com/Coaspe