SvelteJS / Sapper

teek, raamistik – framework

npx degit “sveltejs/sapper-template#rollup” . –force // 2 маленьких тире. Force – принудительная установка в корне

npm run dev // запуск сервера

npm install bootsrap // скачать бустрап

npm install jquery // скачать jquery

Eesmärk:

1. Samm: Projekti seadistamine ja installatsioon

  1. Uue Sapperi projekti initsialiseerimine:
    • Käivitage käsk:
npx degit "sveltejs/sapper-template#rollup" my-sapper-app
cd my-sapper-app
npm install
  • See käsk loob Sapperi projekti malliga koos Rollupi konfiguratsiooniga.

Rakenduse käivitamine kontrollimiseks:

  • Käivitage käsk:
npm run dev

2. Samm: API seadistamine serveriga suhtlemiseks

  1. Loo fail src/api.js:
    • See fail sisaldab funktsioone HTTP-päringute saatmiseks:
const base = 'https://your-api-domain.com/';

async function send({ method, path, data, token }) {
    const fetch = process.browser ? window.fetch : require('node-fetch').default;
    const opts = { method, headers: {} };

    if (data) {
        opts.headers['Content-Type'] = 'application/json';
        opts.body = JSON.stringify(data);
    }

    if (token) {
        opts.headers['Authorization'] = `Bearer ${token}`;
    }

    return fetch(`${base}/${path}`, opts)
        .then((r) => r.json())
        .catch((err) => { throw err; });
}

export function get(path, token) {
    return send({ method: 'GET', path, token });
}

export function post(path, data, token) {
    return send({ method: 'POST', path, data, token });
}

3. Samm: Serveripoolse registreerimise töötlemise seadistamine

  1. Nõutavate paketide installatsioon:
    • Käivitage käsk:
npm install polka compression express-session session-file-store body-parser

Neid pakette kasutatakse serverirakenduse ja sessioonihalduse jaoks.

Faili src/server.js redigeerimine:

  • Konfigureerige server sessioonide toetamiseks:
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import session from 'express-session';
import sessionFileStore from 'session-file-store';
import { json } from 'body-parser';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const FileStore = sessionFileStore(session);

polka()
    .use(
        compression({ threshold: 0 }),
        json(),
        session({
            secret: 'your-secret-key',
            resave: true,
            saveUninitialized: true,
            cookie: { maxAge: 31536000 },
            store: new FileStore({ path: `.sessions` })
        }),
        sapper.middleware({
            session: (req) => ({
                user: req.session && req.session.user
            })
        })
    )
    .listen(PORT, (err) => {
        if (err) console.log('error', err);
    });

4. Samm: Registreerimisruuteri seadistamine

  1. Loo kaust src/routes/auth ja fail src/routes/auth/register.js:
    • Konfigureerige POST-päringu töötleja registreerimiseks:
import * as api from '../../api.js';

export function post(req, res) {
    const { username, name, password } = req.body;

    api.post('users/register', { username, name, password })
        .then((response) => {
            if (response.user) {
                req.session.user = response.user;
            }
            res.setHeader('Content-Type', 'application/json');
            res.end(JSON.stringify(response));
        })
        .catch((err) => {
            res.statusCode = 500;
            res.end(JSON.stringify({ error: 'Registreerimine ebaõnnestus' }));
        });
}

5. Samm: Klientpoolse registreerimisvormi loomine

  1. Loo fail src/routes/register.svelte:
    • Rakenda komponent registreerimisvormi kuvamiseks:
<script>
    import { post } from '../api.js';
    let username = '';
    let name = '';
    let password = '';
    let error = null;

    async function submit(event) {
        event.preventDefault();
        try {
            const response = await post('auth/register', { username, name, password });
            if (response.user) {
                // Suunamine peale edukat registreerimist
                location.href = '/';
            } else {
                error = response.error || 'Registreerimine ebaõnnestus';
            }
        } catch (err) {
            error = 'Võrgu viga';
        }
    }
</script>

<form on:submit={submit}>
    <input type="text" placeholder="Kasutajanimi" bind:value={username} required>
    <input type="text" placeholder="Nimi" bind:value={name} required>
    <input type="password" placeholder="Parool" bind:value={password} required>
    <button type="submit">Registreeri</button>
    {#if error}
        <p class="error">{error}</p>
    {/if}
</form>

6. Samm: Testimine ja silumine

  1. Käivitage rakendus ja testige registreerimisprotsessi.
  2. Lisage kliendipoolne vormi valideerimine (parooli pikkuse kontroll, kasutajanime kordumatuse kontroll jms).
  3. Kontrollige, et sessioonid töötavad ja kasutaja andmed salvestatakse õigesti.

Lisalähenemised

  • Rakendage sisselogimise ja väljalogimise ruuterid (login ja logout).
  • Konfigureerige volitatud kasutajate jaoks suunatud ruuterid.
  • Lisage vormide välimuse parandamiseks stiilid.

Nende sammude abil saate luua rakenduse põhilise kasutajate registreerimise ja haldamise funktsionaalsusega.