Статья обновлена ​​24 июля 2019 г., 1150 + 8GMT

В последней версии v0. 2.6 (21 ноября 2019 г.) используется Vuetify 2. См. Эта статья для v0.2 ( наша v0.1 переработана, улучшена и упрощена).

Эта статья зарезервирована для обновлений v0.1.

Компонент в настоящее время используется в производстве и будет постоянно улучшаться на основе отзывов пользователей.

Сообщество с открытым исходным кодом предлагает множество веб-компонентов и приложений CRUD. Так зачем строить еще один? Что ж, я хотел бы иметь компонент, в котором я мог бы быстро создавать настраиваемые панели администратора для обработки реальных случаев использования, и vue-crud-x был создан на основе этой потребности.

Помимо обычной разбивки на страницы, сортировки и простых фильтров и форм, ниже приведены несколько уникальных функций и принципов дизайна, которые выделяют vue-crud-x среди других:

  • Новинка! SSR, сгенерированные статические страницы и примеры входа в социальные сети
  • Возможность выполнять вложенные операции CRUD, например, выбирать сообщение из списка сообщений, а затем выбирать комментарий из списка комментариев к выбранному сообщению для редактирования.
  • Автоматическое создание формы и поиска из данных JSON
  • Настраиваемый пользовательский интерфейс таблицы, фильтры поиска, макет формы, проверка
  • Обработка токенов аутентификации, пользовательской информации, разрешений
  • Используйте прямой вызов (например, Firestore) или API (REST, GraphQL) к одному или нескольким типам хранилищ данных (MySQL, MongoDB, Redis, ElasticSearch и т. Д.)
  • Пагинация, поиск, сортировка, встроенное редактирование (кеш, оптимистичный ответ, запрос повторной выборки на клиенте Apollo GraphQL)
  • Экспорт в CSV, загрузка файла / изображения, i18n
  • Несколько CRUD работают на одной странице
  • Социальный вход, Nuxt SSR и сгенерированный
  • Пример веб-компонента lit-element (https://medium.zenika.com/using-lit-element-with-vue-js-fa873df4f2a4)

Философия дизайна

  • Возможность быстро создать панель администратора с помощью компонента
  • Легко поддерживать с минимальным количеством шаблонного кода
  • Гибкость, позволяющая обрабатывать как можно больше вариантов использования

Недостатки

  • Платой за гибкость является необходимость дополнительной работы по кодированию для настраиваемых макетов и грубых операций со стороны разработчика.

Это может выглядеть как шаг назад, но если требуется настраиваемый макет или операция с данными, вам все равно нужно будет написать код.

Начиная

Мы быстро рассмотрим, как запустить демонстрацию на вашем локальном компьютере с помощью проекта example-rest. Возможно, вам придется разобраться в следующих темах:

  • VueJS, Vue-router и Vuex
  • Vuetify
  • NodeJS, ES6, асинхронное ожидание, ExpressJS
  1. Перейдите в каталог example-rest
  2. Выполните следующие команды
npm i
npm run build-rest
npm run init-db
npm run start

Просмотрите веб-приложение на http://127.0.0.1:8080, вы увидите следующее:

Войдите, используя «тест» в качестве имени пользователя и пароля, щелкните значок меню в верхнем левом углу и выберите «Книги», вы увидите страницу, как показано ниже.

Если щелкнуть значок увеличительного стекла в правом верхнем углу, откроется фильтр поиска, как показано ниже.

Встроенный режим редактирования

В режиме встроенного редактирования функции CRUD могут выполняться в табличном представлении. Однако вы не можете выполнять вложенный CRUD при использовании встроенного редактирования.

Некоторые важные примечания, о которых следует помнить

В настоящее время поле «id» требуется как уникальный идентификатор и должно быть определено в вашем хранилище данных. Разрешение на определение этого поля пользователем будет сделано в будущем, если это возможно.

Пошаговое руководство по коду настройки

Приведенный ниже фрагмент кода взят из example-rest / src / pages / Book.vue.

В нем показано, как использовать vue-crud-x и настраивать фильтры и формы поиска с помощью scoped-slots и props.

Это также родительская таблица в случае использования вложенного CRUD, где 1 книга (родительская) имеет много страниц (дочерних).

В части v-autocomplete показано, как реализовать функцию автозаполнения производственного уровня с помощью rxJ, которая включает устранение неполадок и получение только последнего запроса.

Выбор и отмена выбора элементов автозаполнения показывает, как связывать и не связывать элементы в отношении «многие ко многим» (M-N).

слоты с ограниченным объемом

  • slot = "filter" - здесь вы настраиваете фильтр поиска.
  • slot = ”form” - это место, где вы настраиваете форму. В нашем вложенном сценарии использования crud есть метод gotoPages (), который показывает, как переходить к страницам (дочерней таблице) выбранной книги.
  • slot = "table" - это место, где вы можете заменить таблицу собственным компонентом пользовательского интерфейса.

реквизит

  • storeName содержит имя модуля хранилища Vuex, которое компонент vue-crud-x будет использовать
  • parentId, если не null, означает, что для компонента vue-crud-x существует родительская таблица
  • ref позволяет вашему компоненту получить доступ к компоненту vue-crud-x
  • @ form-open прослушивает событие «form-open» от компонента crud и позволяет вам написать код, который будет действовать в соответствии с ним.
  • bookDefs - это объект данных со свойствами для установки и настройки компонента vue-crud-x. Основными свойствами являются crudTable, crudFilter и crudForm, crudOps, они описаны ниже.

crudOps

Он содержит грубые операции для компонента vue-crud-x, доступные действия: export (), find (), findOne (), update (), create (), delete ().

crudFilter

Он содержит поля, которые будут отфильтрованы, и компонент пользовательского интерфейса, используемый для каждого фильтра.

crudForm

Он содержит поля для формы ввода, свойства должны совпадать или быть подмножеством того, что считывается из операции findOne ().

crudTable

Конфигурация для таблицы компонентов vue-crud-x, заголовков, встроенных правок, подтверждений, стилей и т. Д.

Дочерняя таблица, встроенное редактирование и экспорт.

Приведенный ниже фрагмент кода взят из example-rest / src / pages / Page.vue.

Он показывает, как реализовать дочернюю таблицу вложенного экспорта CRUD и CSV / JSON, а также конфигурацию для встроенного редактирования.

В нашем случае этот компонент отображает страницы (дочерние) выбранной книги (родительские).

Переданный parentId указывает, что это дочерняя таблица.

Свойство pageDefs.crudTable.showGoBack имеет значение true, чтобы указать, что вы хотите, чтобы кнопка вернулась к родительской таблице. Вы также можете реализовать свой собственный код, который будет вызывать this. $ Router.back ().

// ВСТРОЕННОЕ РЕДАКТИРОВАНИЕ - НАЧАЛО и // ВСТРОЕННОЕ РЕДАКТИРОВАНИЕ - КОНЕЦ показывают части кода для настройки встроенного редактирования.

Функция pageDefs.crudOps.export () показывает, как экспортировать данные в CSV / JSON.

Проекты в репозитории

В этом репозитории есть примеры 4 проектов, которые иллюстрируют полные варианты использования, включая бэкэнд.

Проекты перечислены ниже и содержат любые дополнительные примеры поддерживающих технологий, таких как рендеринг на стороне сервера, реактивное программирование и т. Д.

пример отдыха

  • rxJS, автозаполнение
  • Web-сокеты
  • 2FA с использованием Google Authenticator
  • GraphQL

пример-firebase

  • Google Firebase, Firestore, аутентификация, Recaptcha
  • Захват изображения с веб-камеры и загрузка в облачное хранилище
  • Использование и взаимодействие нескольких компонентов vue-crud-x на одной странице

example-nuxt

  • Серверный рендеринг (SSR)
  • Сгенерированные статические страницы
  • Социальный вход

бэкэнд

  • objectionJS (ORM), Sqlite, mongoDB, GraphQL
  • Хранилище ключей и значений (& Redis)
  • OpenAPI
  • Социальный вход

Заключительные слова

Я надеюсь, что эта статья окажется для вас полезной, vue-crud-x постоянно совершенствуется, и участники могут помочь сделать ее лучше и решить больше производственных сценариев.

Если есть какие-то функции, которые я мог пропустить, вы можете поднять вопрос на Github.

Если у вас есть какие-либо вопросы, вы можете связаться по электронной почте или в телеграмме @aaronjxz, если они не могут быть решены здесь.

Спасибо за прочтение этой довольно длинной статьи и удачного кодирования!

Дополнительная статья - Настройка для «примера» проекта

Ниже приведены дополнительные сведения о настройке, которые помогут запустить пример проекта, в котором Firebase используется в качестве серверной части.

Регистрация в Firebase

  1. Создайте новую учетную запись Google или используйте существующую учетную запись Google
  2. Перейдите в Google Firebase и зарегистрируйтесь на firebase, вам может потребоваться ввести данные своей кредитной карты для доступа к их службам.
  3. Создайте пользователя (https://firebase.google.com/docs/auth/web/password-auth), этот пользователь понадобится вам для входа в пример программы.
  4. Включите ваш firestore и включите чтение-запись в правилах

Получите свои учетные данные

На рисунке ниже показано, где получить учетные данные firebase.

Ваши учетные данные должны выглядеть как JSON ниже…

<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "..."
  };
  firebase.initializeApp(config);
</script>

Используйте информацию в var config, сохраните ее в файле с именем cfg.json.

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

  1. party Сборник и образец документа

2. примечание. Сборник и образец документа.

Отношение

Одна сторона (например, сторона в судебном процессе) может иметь ноль или более заметок (например, заметок по делу)
Одна заметка принадлежит только одна партия

Родительский ключ для образца документа примечания коллекции, показанный выше, является «стороной» и относится к полю «имя» в документе коллекции сторона.

Создать индексы

См. Рисунок ниже по указателям, которые нужно создать для коллекции примечаний.

Google Recaptcha

Если вы хотите использовать Recaptcha в процессе входа в систему, вы можете подписаться на свой собственный ключ сайта Recaptcha из Google Recaptcha.

ПРИМЕЧАНИЕ. Recaptcha игнорируется, когда клиент определяет, что хост, обслуживающий страницу, - 127.0.0.1 или localhost, поэтому вам не нужен ключ сайта Recaptcha в среде разработки.

Загрузка файла (эта документация находится в стадии разработки)

Компонент ImageUpload.vue теперь можно добавить в грубую форму для загрузки изображений в хранилище Firebase и сохранения пути к существующей записи.

После нажатия кнопки загрузки проверьте хранилище firebase на наличие изображения.