Skriva redovisningstexter i frontend

Vi ska bygga vidare på me-applikationen från kmom02. Vi lägger till en administrationsdel i vår applikation där inloggade användare kan skapa redovisningstexter i ett formulär. Vi tittar först kort på hur vi hanterar formulär i våra ‘Big Three’ ramverk och hur vi autentiserar klienterna med JWT mot vårt API.

#Förkunskaper

Du har gjort uppgiften Bygg ett me API till ramverk2.

#Introduktion

I följande stycken går vi igenom tekniker som kan vara användbara för att implementera uppgiften som är specificerad i stycket Krav.

#Formulär

Vi börjar som alltid med nya tekniker att titta i dokumentationen och titta på hur ramverkens skapare och utvecklare vill att vi ska använda tekniken.

• Angular formulär API och Guide

• React formulär

• Vue formulär och EventHantering

Vi ser att alla tre ramverk hanterar formulär på ett snarlikt sätt. Vi ser att alla hanterar datan i komponentens interna state. Och sedan använder vi ett submit event för att hantera att formuläret ska skickas. Sedan använder vi fetch eller ramverkets motsvarighet för att skicka formulär datan till API:t.

#JWT i headern

För att lägga till en header i fetch kan vi använda ett konfigurations objekt när vi anropar en URL.

fetch('URL', {
    method: 'POST',
    headers: new Headers({
        'x-access-token': 'JWT_TOKEN'
    })
}).then(function(response) {
    return response.json();
}).then(function(data) {
    console.log(data);
});

Med hjälp av Angulars HttpClient kan vi göra liknande.

this.http.post<Report>("URL", {
   headers: {
       'x-access-token': 'JWT_TOKEN'
   }
});

#Krav

1. Skapa en vy där användaren kan logga in, länka till vyn från första sidan.

2. När användaren är autentiserad ska det finnas nöjlighet att gå till en vy där användaren kan skapa redovisningstexter.

3. Committa alla filer och lägg till en tagg (2.0.*).

4. Pusha upp repot till GitHub, inklusive taggarna.

5. Publicera din applikation publikt och lägg den publika adressen i din inlämning på Canvas.

#Tips från coachen

Lycka till och hojta till i forumet om du behöver hjälp!

#Revision history