Kyberturvallisuuden ongelmat: Tietovuodot
Joulua edeltävä kiire on täydessä vauhdissa. Ihmiset etsivät lahjoja läheisilleen ja ovat yhä useammin valmiita "ryntäämään" verkkokauppoihin.
![Codest](https://thecodest.co/app/uploads/2024/05/v8a9890-min.jpeg)
Remix on täysimittainen web-kehys, joka keskittyy webin perusteisiin ja moderniin UX:ään.
Kyllä, tämä on jälleen yksi JS kehys, mutta pysy vain hieman kauemmin, koska tämä kehys on tehty Michael Jackson ja Ryan Florence fiksut kaverit takana React Reititin. Toivottavasti tämä sai huomionne, joten katsotaanpa, mitä hyvää on Remix-kehys.
Remix on palvelinpuolen kehys, joka on rakennettu päälle Web Fetch API ja React Reititin, jokaisella remixin reitillä on kolme ensisijaista vientituotetta a kuormaaja
, an toiminta
ja oletusarvo komponentti
vienti. . kuormaaja
funktiota kutsutaan palvelimella ennen renderöintiä tietojen toimittamiseksi reitille. toiminta
toiminto vastaa tietojen mutaatiosta, oletusvienti on komponentti, joka renderöidään kyseisellä reitillä. Osoite kuormaaja
ja toiminta
funktiot suoritetaan vain palvelinpuolella ja niiden on palautettava arvoksi Vastaus objekti, oletus
vienti suoritetaan sekä palvelin- että asiakaspuolella.
Uuden Remixin alustaminen projekti:
npx create-remix@latest
TÄRKEÄÄ: Valitse "Vain perusasiat" ja sitten "Remix App Server", kun sinua pyydetään.
cd [mikä tahansa nimesi projektille]
npm run dev
```
Avaa http://localhost:3000. create-remix
komennolla saat aloituspohjan, jonka rakenne on seuraava:
sovellus
kansio sisältää kaikki sovellusreitit ja koodi.app/entry.client.jsx
on ensimmäinen selaimessa suoritettava koodinpätkä, jota käytetään selaimen hydratoi
React-komponentit.app/entry.server.jsx
on ensimmäinen osa koodia, joka suoritetaan, kun pyyntö saapuu palvelimelle, tämä tiedosto renderöi React-sovelluksemme merkkijonoksi/virraksi ja lähettää sen vastauksena asiakkaalle.app/root.jsx
on juurikomponentin paikka.app/routes/
on paikka, jonne kaikki reittimoduulisi menevät, remix käyttää tiedostojärjestelmään perustuvaa reititystä.julkinen
kansioon laitetaan staattiset aineistosi (kuvat/fonit/jne).remix.config.js
voidaan asettaa remix-konfiguraatio.Tarkistetaan login.jsx
reittiesimerkki Remix-sovelluksen sisällä:
import { redirect, json, Form, useActionData, useTransition } from 'remix';
import { isLoggedIn, verifyLogin } from '../auth';
export const loader = async ({ request }) => {
if (await isLoggedIn(request)) {
return redirect('/dashboard');
}
return json({ success: true });
};
export const action = async ({ request }) => {
const formData = await request.formData();
const values = {
email: formData.get('email') ?? '',
password: formData.get('password') ?? '',
};
const errors = await verifyLogin(values);
if (errors) {
return json({ errors }, { status: 400 });
}
return redirect('/dashboard');
};
export default function LoginRoute() {
const actionData = useActionData();
const transition = useTransition();
const isSubmitting = transition.state === 'submitting';
return (
Email
{actionData?.errors?.email &&
{actionData.errors.email}
}
<div>
<label htmlFor="password">Password</label>
<input id="password" name="password" type="password" />
{actionData?.errors?.password && (
<div>{actionData.errors.password}</div>
)}
</div>
<div>
<button type="submit" disabled={isSubmitting}>
{`Login ${isSubmitting ? '...' : ''}`}
</button>
</div>
</Form>
);
}
```
Ensimmäinen asia, joka tässä tapahtuu, on kuormaaja
funktio, joka tarkistaa, onko käyttäjä jo kirjautunut sisään tunnuksella isLoggedIn
toiminto ja uudelleenohjaus
hänet /dashboard
reittiä, jos ei, se yksinkertaisesti palauttaa { success: true }
vastaus, kirjautumissivu renderöidään.
The LoginRoute
renderöi lomakkeen, jossa on sähköpostiosoite ja salasana sekä lähetä-painike, kuten näet, lomakkeessa ei ole yhtään valtio
muuttujia eikä onSubmit
tapahtumankäsittelijä komponentissamme, se johtuu siitä, että remixissä jokainen reitti voi viedä komponentin toiminta
ja kun lomake lähetetään POST
metodia kutsutaan ja se käsittelee kyseisen tapahtuman.
Kun lomake lähetetään toiminta
funktio saa
FormData alkaen Pyyntö kohde const formData = await request.formData()
, niin olemme rakentamassa arvot
objekti, jolla on sähköpostiosoite ja salasanaominaisuudet, on formData.get('email')
etsii lomakkeemme sisältä ensimmäistä vastaavaa kenttää, jossa on merkkijono name="email"
ominaisuus ja palauttaa sen arvon. Tarkistamme, ovatko valtakirjat oikeat, ja käytämme verifyLogin
funktiota, tässä voit käyttää mitä tahansa suosikkisi JS-skeeman validointikirjastoa ja tehdä nouto
mukautettuun backendiin tarkistamaan, ovatko kirjautumistiedot oikein, jos näin on, me uudelleenohjaus
käyttäjä /dashboard
reittiä, muuten palautamme json
vastaus, jossa on virheet-objekti ja HTTP-tilakoodi 400
... useActionData
koukku palauttaa tämän virheobjektin, jos sellainen on olemassa, ja me ehdollisesti renderöimme virheilmoituksen kuten seuraavassa {actionData?.errors?.email && <div>{actionData.errors.email}</div>}
.
The useTransition
koukku kertoo meille kaiken sivun siirtymätilasta, ja koukku isSubmitting
muuttujan tarkistamme, kun lähetys tapahtuu, jos on olemassa me disable
lähetä-painiketta ja näytä Kirjaudu sisään....
sen sijaan, että Kirjaudu sisään
, voisimme sen sijaan näyttää käyttäjälle latauspinnerin tai jonkin muun merkin.
The json
funktio on vain oikotie luotaessa application/json
vastausobjektit. Osoite useLoaderData
koukku palauttaa reitin JSON-parsittua dataa. kuormaaja
... useActionData
palauttaa reitin toiminta
analysoidut tiedot.
Jokainen reitti voi myös viedä meta
funktio, joka vastaa metatunnisteiden asettamisesta Html-dokumenttiisi, tällä tavalla voit asettaa otsikko
ja kuvaus
jokaiselle reitille ja lisää haluamasi Open Graph- tai muut metatunnisteet.
export const meta = () => {
const title = 'Mahtava sivuni';
const description = 'Super mahtava sivu';
return {
charset: 'utf-8',
title,
description,
keywords: 'Remix,Awesome',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
'twitter:creator': '@awesome',
'twitter:site': '@awesome',
'twitter:title': otsikko,
'twitter:description': kuvaus,
};
};
export default function AwesomeRoute() {
return
Mahtava reitti
;
}
```
Olemme vasta käsitelleet jäävuoren huippua Remixistä, on niin paljon muuta tiedettävää, tässä on muutamia hyödyllisiä linkkejä:
Mikä on hienoa Remix on saamalla paremmin sen kanssa saat paremmin web perusteet, kuten olet nähnyt monet tämän artikkelin linkit viittaavat siihen, että Mozillan asiakirjat, tätä tarkoitetaan sillä, että Remix on keskittynyt webin perusteisiin, se käyttää web-rajapintoja, kuten Response- ja Request-objekteja, tarjotakseen käyttäjille loistavan UX:n. Lisäksi voit silti käyttää kaikkia React tavallisia tekniikoita ja suosikkikirjastoja.
Emme puhuneet kaikista Remixin tarjoamista hienoista ominaisuuksista tässä artikkelissa, kuten Sisäkkäiset reitit, Virherajat, Remix pinot mutta silti tämän artikkelin pitäisi antaa sinulle hyvä käsitys Remixin filosofiasta.