SvelteJS/Sapper project

barBankDeniss

teeb/raamistik

sapperi raamatukogu loomine:

npx degit “sveltejs/sapper-template#rollup” . —force
—force tähendab, et raamatukogu on installeeritud juurkataloogi

Sapper server installeerimine
npm i

Serveri käivitamine
npm run dev

Kuidas projekt töötab

Vajuta Sign up

Vajuta Sign in

Proovime dekodeerida

Vajuta log out

Valisin neljas videot overview

Pivotaltracker

Github

Üksikasjalikud juhised muudatuste rakendamise kohta

Sammud:

1. Avage fail src/components/Nav.svelte.
2. Lisage $session.token, et kontrollida $session.tokeni olemasolu.
3. Lisage ülevaate ja väljumise navigatsioonielemendid

Kasutaja andmete hankimine (src/routes/auth/getMyData.js)

Sammud:

1. Looge fail src/routes/auth/getMyData.js.
2. Sisestada kood.

Tehinguandmete hankimine (src/routes/auth/getTransactions.js)

Sammud:

1. Looge fail src/routes/auth/getTransactions.js.
2. Sisestada kood.

Sisselogimisfunktsioon (src/routes/auth/login.js)

Sammud:

1. Avage fail src/routes/auth/login.js.
2. Lisage kasutaja muutuja, mis määrab req.body väärtuse, et saada kasutaja poolt sisestatud andmed.

Sisselogimislehe muutmine (src/routes/login.svelte)

Sammud:

1. Avage fail src/routes/login.svelte.
2. Muutke ümbersuunamist /overview, kui kasutaja on edukalt sisse loginud.

Muutus userilt tokenile.

Lisage fail overview.svelte

Sammud:

1. Looge fail src/routes/overview.svelte.
2. Sisestada kood.

<script context="module">
    export async function preload({ params }, { token }) {
        if (!token) {
            this.redirect(302, `/login`);
        }
    }
</script>
<script>
    import {post} from "utils.js";
    async function getMyData(){
        return await post(`auth/getMyData`).then(r => {
            r.funds = r.accounts.reduce((funds, account) => funds + account.balance, 0)
            return r
        })
    }
    async function getTransactions(){
        return await post(`auth/getTransactions`)
    }
</script>
{#if process.browser}
    {#await getMyData()}
        loading...
    {:then my}
        <section>
            <p style="font-size:xx-large">{my.name}</p>
        </section>
        <section>
            My funds
            <p style="font-size:xx-large; color: {my.funds >= 0 ? 'green' : 'red'}">{my.funds}</p>
        </section>
        <section>
            <ul>
                {#each my.accounts as account}
                    <li>{account.number} {account.name}</li>
                {/each}
            </ul>
        </section>
        <section>
            {#await getTransactions()}
                Loading...
            {:then transactions}
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>SenderName</th>
                        <th>Amount</th>
                        <th>CreateAt</th>
                        <th>Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#each transactions as transaction}
                        <tr>
                            <td><b>{transaction.senderName}</b><br>{transaction.explanation}</td>
                            {#if transaction.amount > 0}
                                <td class="text-success">{transaction.amount} {transaction.currency}</td>
                            {:else}
                                <td class="text-danger">{transaction.amount} {transaction.currency}</td>
                            {/if}
                            <td>{transaction.createAt}</td>
                            <td>{transaction.status}<br>{transaction.statusDetail}</td>
                        </tr>
                    {/each}
                    </tbody>
                </table>
                <div>https://jwt.io suuname ning sisestame token phpStormist pärast Bearer andme</div>
            {/await}
        </section>
    {/await}
{/if}

Nende muudatuste hulka kuuluvad:

1. Navigatsioonimenüü lisamine, mis näitab linke ainult sisselogitud kasutajatele.
2. API-kutsete loomine kasutajate andmete ja tehingute saamiseks.
3. Sessioonihalduse sisselogimisfunktsiooni täiustamine.
4. Ülevaate lehekülje loomine, mis kuvab pärast edukat sisselogimist kasutaja põhiteavet.