REST ARHITEKTUURIL BASEERUVATE VEEBITEENUSTE LOOMINE Harjutused

H 2.Loo Codesandbox-is HTML leht,
mis kuvab auto andmeid

tegin kood Code Sandbox saitis kus näidetakse auto sätted,
myJson: see on massiiv, mis sisaldab autoomadustega objekte.
document.getElementById(“app”).innerHTML =: See rida valib HTML-i elemendi ID-ga “app” ja määrab selle sisemise HTML-i sisu esitatud HTML-koodi stringile. Nii renderdatakse veebilehel andmed myJsoni massiivist.

Harjutus3.sessionStorage

Session Storage’isse salvestatakse andmed ainult konkreetse seansi jaoks. See, kus tegid sessionStorage.setItem() jne käske on üks seanss, ning teine vahekaart, mille 6.punkti juures avasid, oli teine seanss.

sessionStorage.setItem('color','enda lemmikvärv'). Selle käsuga lisati Session Storage’isse uued andmed.
sessionStorage.getItem('color') ning näed, et väljastatakse sessionStorage’ist sinu lemmikvärv.

Et näha, mis on Session Storage’isse salvestatud, mine Application>Session Storage>vastav domeen

harjutus4.localStorage

Local Storage’is säilitatakse andmed kõigis sessioonides antud konkreetses domeenis.

uus käsk localStorage.setItem('car','enda lemmikauto'). Selle käsuga lisati Local Storage’isse uued andmed.

Soorita käsk localStorage.getItem(car) ning näed, et localStoragesse väljastatakse sinu lemmikauto.

Harjutus 5.Küpsised

KIRJELDUS. xh on HTTP-klient, millel on sõbralik käsurea liides. See püüab saada loetavat väljundit ja hõlpsasti kasutatavaid valikuid. xh ühildub enamasti HTTPie-ga: vt http(1). Suvandit –curl saab päringu saatmise asemel kasutada käsu curl(1) tõlke printimiseks.

HTTP küpsis (veebiküpsis, brauseri küpsis) on väike andmeosa, mille server saadab brauserile. Brauser saab selle fragmendi endale salvestada ja iga järgneva päringuga serverisse saata. Eelkõige võimaldab see välja selgitada, kas samast brauserist on saabunud mitu päringut (näiteks kasutaja autentimiseks). Küpsiste abil saate salvestada mis tahes olekuteavet, HTTP-protokoll ei saa seda iseseisvalt teha.

Küpsiseid kasutatakse sageli:

Seansi haldamine (sisselogimised, virtuaalsed ostukorvid)
Isiklikud eelistused
Jälgimine

millist infot, kellele ja kui kauaks Twitter sinu brauserisse üritas sokutada.

seda saab näha arendaja tööriistas: tee lahti Application leht ja valige Cookies , te näete cookies loetelu

Teave küpsiste kohta: Parempoolsele paanile ilmub tabel küpsiste kohta käiva teabega. Väljad Expires/Max-Age näitavad, kui kaua küpsiseid säilitatakse. Väljad Domeen ja Tee näitavad, kellele need täpselt mõeldud on.

Harjutus 1 API

1. Paigalda Node.js
2. Loo töölauale kaust rest-api
3. Käivita koodiredaktor (nt VS Code, WebStorm vms) ja ava see kaust projektina
4. Loo kausta fail index.js järgneva sisuga:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());        // Avoid CORS errors in browsers
app.use(express.json()) // Populate req.body

const widgets = [
    { id: 1, name: "Cizzbor", price: 29.99 },
    { id: 2, name: "Woowo", price: 26.99 },
    { id: 3, name: "Crazlinger", price: 59.99 },
]

app.get('/widgets', (req, res) => {
    res.send(widgets)
})

app.get('/widgets/:id', (req, res) => {
    if (typeof widgets[req.params.id - 1] === 'undefined') {
        return res.status(404).send({ error: "Widget not found" })
    }
    res.send(widgets[req.params.id - 1])
})

app.post('/widgets', (req, res) => {
    if (!req.body.name || !req.body.price) {
        return res.status(400).send({ error: 'One or all params are missing' })
    }
    let newWidget = {
        id: widgets.length + 1,
        price: req.body.price,
        name: req.body.name
    }
    widgets.push(newWidget)
    res.status(201).location('localhost:8080/widgets/' + (widgets.length - 1)).send(
        newWidget
    )
})

app.listen(8080, () => {
    console.log(`API up at: http://localhost:8080`)
})Code language: JavaScript (javascript)

Nüüd kirjutan cmd-s järgmise:

1. npm init -y // package.json initsialiseerib node projekti
2. npm i express cors // kausta node_moodules installib express ja cors paketti
3. node . //käivitab index.js faili

Node.js