Svelte JS ja Sapper

Decoded

GitHub

Pivotal Tracker

PHPShtorm

Meie projekti käivitamiseks peate selle käsu terminali sisestama:

npm run dev
npm i bootstrap
npm i jquery
npm i rollup-plugin-copy

Minge faili nav.svelte. Ja kirjutage:

<li><a aria-current="{segment === 'register' ? 'page' : undefined}" href="register">register</a></li>

Ja loo uus faili “register.svelte”

<script>
	import { goto, stores } from '@sapper/app';
	import { post } from 'utils.js';
	const { session } = stores();

	let username = '';
	let name = '';
	let password = '';
	let error = null;

	async function submit(event) {
		const response = await post(`auth/register`, { username, name, password });

		// TODO handle network errors
		error = response.error;

		if (response.user) {
			$session.user = response.user;
			goto('/');
		}
	}
</script>

<svelte:head>
	<title>Sign up • Conduit</title>
</svelte:head>

<div class="auth-page">
	<div class="container page">
		<div class="row">
			<div class="col-md-6 offset-md-3 col-xs-12">
				<h1 class="text-xs-center">Sign up</h1>
				<p class="text-xs-center">
					<a href="/login">Have an account?</a>
				</p>

				{#if error}
					<div class="alert-danger" role="alert">{error}</div>
				{/if}

				<form on:submit|preventDefault={submit}>
					<fieldset class="form-group">
						<input class="form-control form-control-lg" type="text" required placeholder="Your Name" bind:value={username}>
					</fieldset>
					<fieldset class="form-group">
						<input class="form-control form-control-lg" type="text" required placeholder="Name" bind:value={name}>
					</fieldset>
					<fieldset class="form-group">
						<input class="form-control form-control-lg" type="password" required placeholder="Password" bind:value={password}>
						{#if password.length > 1 && password.length < 6}<sup> <div class="alert alert-danger" role="alert">Password too short</div></sup>{/if}
					</fieldset>
					<button class="btn btn-lg btn-primary pull-xs-right" disabled="{password.length < 6}">
						Sign up
					</button>
				</form>
			</div>
		</div>
	</div>
</div>

Jargmine, loo uus faili utils.js

export function post(endpoint, data) {
    return fetch(endpoint, {
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify(data || {}),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then((r) => r.json());
}

Lisamine template.html

<link rel="stylesheet" href="vendor/bootstrap/bootstrap.css">
<script scr="vendor/jquery/jquery.win.js"></script>

Loomine register.js (src/auth/register.js)

import * as api from 'api.js';

export function post(req, res) {
    const user = req.body;

    api.post('users', user ).then(response => {
        if (response.user) {
            req.session.user = response.user;
        }

        res.setHeader('Content-Type', 'application/json');

        res.end(JSON.stringify(response));
    });
}

Loomine api.js (src/node_modules/api.js)

const base = 'https://js.kristjankivikangur21.thkit.ee/';

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}`;
    }

    console.log(`${base}/${path}`)
    console.log(opts)
    return fetch(`${base}/${path}`, opts)
        .then((r) => r.text())
        .then((json) => {
            try {
                return JSON.parse(json);
            } catch (err) {
                return json;
            }
        });
}

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

export function del(path, token) {
    return send({ method: 'DELETE', path, token });
}

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

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

Muudamine server.js (src/server.js)

import sirv from 'sirv';
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';
const { json } = require('body-parser');

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


polka() // You can also use Express
	.use(
		compression({ threshold: 0 }),
		json(),
		session({
			secret: 'darjam', //muudamine ristsõna
			resave: true,
			saveUninitialized: true,
			cookie: {
				maxAge: 31536000
			},
			store: new FileStore({
				path: `.sessions`
			})
		}),
		sirv('static', { dev }),
		sapper.middleware({
			session: req => ({
				user: req.session && req.session.user,
				token: req.session && req.session.token
			})
		})
	)
	.listen(PORT, err => {
		if (err) console.log('error', err);
	});

Projekti lõppvaade