Exerciții
Creăm un proiect nou: npm init
Adăugăm express în proiect: npm install express
Adăugăm body-parser: npm install body-parser
Scriem în fișierul index.js
const express = require('express');
const bodyParser = require('body-parser');
// rulam aplicatia
const app = express();
// setam directorul public ca si unul static
app.use(express.static('public'));
// folosim body parser pentru a primi datele de la utilizator ca si obiect
app.use(bodyParser.json());
// send static file manually
// app.get('/', function(req, res) {
// res.sendFile('./public/index.html');
// });
const db = {
articles: [
{
id: 1,
title: 'Hello world!',
date: (new Date('2018.01.20 13:15:56')).getTime(),
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sem metus, dapibus at nulla a, malesuada dapibus lectus. Quisque auctor laoreet consectetur. Suspendisse consectetur, nisl ac aliquam dapibus, mi justo porta arcu, ullamcorper sollicitudin nisl nunc eget nisl. Maecenas id risus vitae nunc bibendum vestibulum. Suspendisse commodo augue sed consequat vulputate. Morbi at ligula massa. Mauris pretium condimentum purus at dictum. Curabitur suscipit turpis lacus, ac tincidunt augue vehicula vitae. Curabitur molestie sit amet ligula interdum dictum. Morbi congue magna eget pulvinar lobortis. Vestibulum scelerisque ut lacus non porta. Nam ornare tincidunt lobortis.'
}
]
};
// intoarcem toate articolele
app.get('/articles', function(req, res) {
res.send(db.articles);
});
// intoarcem un singur articol
app.get('/article/:id', function(req, res) {
const article = db.articles.find(function(article) {
return article.id === +req.params.id;
});
res.send(article);
});
// adaugam un articol nou
app.post('/articles', function(req, res) {
db.articles.push({
id: db.articles[db.articles.length - 1].id + 1,
title: req.body.title,
date: (new Date()).getTime(),
content: req.body.content
});
res.send(db.articles);
});
// modificam un articol
app.put('/article/:id', function(req, res) {
db.articles = db.articles.map(function(article) {
if (article.id === +req.params.id) {
return req.body;
}
return article;
});
res.send(db.articles);
});
// stergem un articole
app.delete('/article/:id', function(req, res) {
db.articles = db.articles.filter(function(article) {
return article.id !== +req.params.id;
});
res.send(db.articles);
});
// verbe HTTP: GET, POST, PUT, PATCH, DELETE
// raspunsuri HTTP: 101 ... 5xx
// REST: Respectam protocolul HTTP
// pornim serverul
app.listen(3000, function(){
console.log('Server is running...');
});
Scriem în fișierul public/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Our Blog</title>
<style>
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.container {
display: flex;
}
.container section {
flex: 0 0 50%;
padding: 15px;
border: 1px solid;
}
article {
border-bottom: 1px solid;
}
</style>
</head>
<body>
<h1>Our Blog</h1>
<div class="container">
<section>
<h2>Add new article</h2>
<form action="/articles" method="post" id="new-article">
<p>
<label for="title">Title</label>
<input type="text" name="title" id="title">
</p>
<p>
<label for="content">Content</label>
<textarea name="content" id="content"></textarea>
</p>
<button type="submit">Save article</button>
</form>
</section>
<section>
<h2>Articles</h2>
<main id="articles">
</main>
</section>
</div>
<script src="static.js"></script>
</body>
</html>
Scriem în fișierul static.js
const refs = {
articles: document.querySelector('#articles'),
newArticle: document.querySelector('#new-article')
};
function loadArticles() {
// asa facem AJAX in 2018
fetch('/articles', {
method: 'GET'
}).then(function(resp) {
return resp.json();
}).then(function(data) {
renderArticles(data);
});
}
function renderArticles(articles) {
refs.articles.innerHTML = '';
articles.forEach(function (article) {
refs.articles.innerHTML += `
<article>
<h3>${ article.title }</h3>
<p>${ new Date(article.date) }</p>
<p>${ article.content }</p>
</article>
`;
})
}
function addNewArticle(article) {
fetch('/articles', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(article)
}).then(function(resp) {
return resp.json();
}).then(function(data) {
renderArticles(data);
});
}
refs.newArticle.addEventListener('submit', function(event) {
event.preventDefault();
const elements = event.target.elements;
const article = {
title: elements.title.value,
content: elements.content.value
}
addNewArticle(article);
})
loadArticles();
Pornim serverul: node .
Intrăm din browser pe localhost:3000