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');
const app = express();
app.use(express.static('static'));
app.use(bodyParser.json());
// vom stoca produsele în memoria serverului prin variabila products
let products = [];
app.get('/products', function(request, response) {
// întoarcem lista de produse
response.send(products);
});
app.post('/add-product', function(request, response) {
// adăugăm un produs nou în lista de produse
products.push(request.body);
// întoarcem lista de produse
response.send(products);
});
app.listen(3000, function() {
console.log('Server is running...');
});
Scriem în fișierul static/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>eShop</title>
</head>
<body>
<section>
<h2>Cart</h2>
<div class="cart">
<article class="product">
<h3>Last product</h3>
<h4>10$</h4>
<button>Remove</button>
</article>
</div>
</section>
<section>
<h2>Add new item</h2>
<div class="new-item">
<form class="new-item-form" action="">
<p>
<label for="product-name">Name</label>
<input type="text" name="name" id="product-name">
</p>
<p>
<label for="product-price">Price</label>
<input type="number" name="price" id="product-price">
</p>
<p>
<button type="submit">Add to cart</button>
</p>
</form>
</div>
</section>
<script src="static.js"></script>
</body>
</html>
Scriem în fișierul static.js
const refs = {
newItemForm: document.querySelector('.new-item-form'),
cart: document.querySelector('.cart')
};
// funcție ajutătoare pentru a face un request de tip GET
function getData(url) {
return fetch(url)
.then(function(response) {
if (response.status >= 200 && response.status < 300) {
return response.json();
}
throw response;
})
.catch(function(error) {
console.log('Error: ' + error.status + ' ' + error.statusText);
});
}
// funcție ajutătoare pentru a face un request de tip POST
// Vom face POST când vrem să trimitem date către server
function postData(url, data) {
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(function(response) {
if (response.status >= 200 && response.status < 300) {
return response.json();
}
throw response;
})
.catch(function(error) {
console.log('Error: ' + error.status + ' ' + error.statusText);
});
}
// funcția va afișa în pagină toate produsele
function renderProducts(products) {
refs.cart.innerHTML = '';
products.forEach(function(product) {
refs.cart.innerHTML +=
`<article class="product">
<h3>${ product.name }</h3>
<h4>${ product.price }$</h4>
<button>Remove</button>
</article>`;
})
}
// luăm lista de produse de pe server și apoi o afișăm în pagină
function getProducts() {
getData('/products').then(renderProducts);
}
// adăugăm un listener pe submit, altfel zis, când se dă click pe buton, browser-ul va apela această funcție
refs.newItemForm.addEventListener('submit', function(event) {
// nu vrem să facem submit la formular
event.preventDefault();
// ca sa scriem mai puțin cod, salvăm elements într-o constantă
const elements = event.target.elements;
// pregătim datele
const body = {
name: elements.name.value,
price: elements.price.value
};
// ștergem textul din input
elements.name.value = '';
elements.price.value = '';
// trimitem produsul nou către server, el ne va întoarce toate produsele, noi le afișăm în pagină
postData('/add-product', body).then(renderProducts);
});
// prima oară când deschidem pagina, vom trage lista de produse de pe server și o vom afișa în pagină
getProducts();
Pornim serverul: node .
Intrăm din browser pe localhost:3000
Cerințe
- Adăugați metoda de șterge produse
- Faceți sortare după preț / nume
- Calculați și afișați totalul
- Faceți calculul în browser (static.js)
- Faceți calculul pe server (index.js)
- Observați diferența?