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

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

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

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 &amp;&amp; req.session.user
            })
        })
    )
    .listen(PORT, (err) => {
        if (err) console.log('error', err);
    });

4. Samm: Registreerimisruuteri seadistamine

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

Loo fail src/routes/register.svelte:
- Rakenda komponent registreerimisvormi kuvamiseks:

&lt;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';
        }
    }
&lt;/script>
 
&lt;form on:submit={submit}>
    &lt;input type="text" placeholder="Kasutajanimi" bind:value={username} required>
    &lt;input type="text" placeholder="Nimi" bind:value={name} required>
    &lt;input type="password" placeholder="Parool" bind:value={password} required>
    &lt;button type="submit">Registreeri&lt;/button>
    {#if error}
        &lt;p class="error">{error}&lt;/p>
    {/if}
&lt;/form>

SvelteJS / Sapper