Meteor & Svelte - Создание полнофункциональных реактивных веб-приложений

Meteor & Svelte - Создание полнофункциональных реактивных веб-приложений —03: Коллекции

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Эпизоды

В последнем эпизоде мы начали реализацию первого клиентского веб-приложения Svelte внутри проекта Meteor. Данные, которые мы использовали в этом приложении (объекты задач), поступают из функции, которая была реализована непосредственно в клиентском приложении.

В этом приложении мы собираемся изменить это и представить концепцию коллекций. Используя Коллекции, вы можете легко управлять доступом к данным в вашем приложении Meteor как на стороне сервера, так и на стороне клиента.

Для хранения данных о наших проблемах мы создадим новую коллекцию и тем самым сохраним данные в сборке Meteor в базе данных MongoDB.

Создание коллекций задач

Чтобы создать новую коллекцию для наших данных о проблемах, мы сначала создадим новую подпапку api в папке импорта, а внутри этой вновь созданной папки создадим новый файл issues.js . Вставьте следующий код в issues.js:

import { Mongo } from 'meteor/mongo';
export const Issues = new Mongo.Collection('issues');

Здесь мы импортируем Mongo из пакета meteor / mongo, а затем вызываем Mongo.Collection ('issues'), чтобы создать новую коллекцию с именем issues . Эта коллекция будет совместно использоваться сервером и клиентом и поэтому будет экспортирована.

Импортировать сборник ошибок на сервере

Импорт коллекции задач на стороне сервера выполняется в server / main.js:

import '../imports/api/issues.js';

Это гарантирует, что коллекция будет доступна на стороне сервера и также будет создана в базе данных MongoDB.

Использование коллекции в компоненте приложения

Перейдем к клиентскому приложению и добавим еще два оператора импорта в App.svelte:

import { useTracker } from 'meteor/rdb:svelte-meteor-data';
import { Issues } from '../api/issues.js';

Мы снова проверяем, импортирована ли коллекция Issues. Кроме того, мы добавляем оператор импорта для useTracker, который импортируется из пакета meteor / rdb: svelte-meteor-data.

Теперь мы готовы удалить функцию getIssues и заменить ее следующим реактивным объявлением:

$: issues = useTracker(() => Issues.find({}).fetch());

Здесь мы используем функцию useTracker для получения данных из нашей коллекции задач. Используя синтаксис $: Svelte, мы также обеспечиваем использование здесь реактивного оператора. Это означает, что каждый раз useTracker обновляет значение issues (каждый раз, когда коллекция Issues изменяется на сервере) любой части пользовательского интерфейса, которая зависит от значение проблем также обновлено.

Наконец, мы готовы использовать $ issues вместо chro в каждом блоке:

{#each $issues as issue}
            <Issue 
                issue={issue} />
        {/each}

Опять же, ниже вы можете увидеть полный код обновления App.svelte:

<script>
    import { useTracker } from 'meteor/rdb:svelte-meteor-data';
    import Issue from './Issue.svelte';
    import { Issues } from '../api/issues.js';
    $: issues = useTracker(() => Issues.find({}).fetch());
    // function getIssues() {
    //     return [
    //         { 
    //             title: 'First Issue Title', 
    //             description: 'First Issue Description', 
    //             dueDate: '2021-01-01', 
    //             priority: 'Low'
    //         },
    //         {
    //             title: 'Second Issue Title', 
    //             description: 'Second Issue Description', 
    //             dueDate: '2021-01-01', 
    //             priority: 'Medium'
    //         },
    //         {
    //             title: 'Third Issue Title', 
    //             description: 'Third Issue Description', 
    //             dueDate: '2021-01-03', 
    //             priority: 'High'
    //         }
    //     ];
    // }
</script>
<div>
    <header>
        <h1>Issues:</h1>
    </header>
    <ul>
        {#each $issues as issue}
            <Issue 
                issue={issue} />
        {/each}
    </ul>
</div>

После всех обновлений нашего кода мы готовы снова запустить веб-сервис Meteor:

$ meteor

Однако доступ к веб-приложению в браузере покажет вам только пустой список проблем:

Таким образом, причина вполне очевидна. Коллекция проблем, которую мы создали и к которой мы получили доступ для получения данных о проблемах, все еще пуста, поэтому объекты проблем не обнаруживаются и не выводятся. Чтобы изменить это, нам нужно добавить данные в коллекцию. Мы можем сделать это с помощью клиентского терминала MongoDB, который можно запустить с помощью следующей команды:

$ meteor mongo

Запуск клиента MongoDB дает вам командную строку, которую вы можете использовать для прямого взаимодействия с базой данных MongoDB:

Введите следующую команду, чтобы напрямую вставить новый объект задачи в коллекцию базы данных:

> db.issues.insert({ title: 'First Issue Title', description: 'First Issue Description', dueDate: '2021-01-01', priority: 'Medium'})

После выполнения этой команды вы должны сразу увидеть обновленное в выводе браузера.

Это реактивное поведение приложения Meteor. После изменения данных пользовательский интерфейс веб-приложения также обновляется без необходимости вручную перезагружать сайт.

Meteor & Svelte - Создание полнофункциональных реактивных веб-приложений —03: Коллекции