Skip to content

Latest commit

 

History

History
183 lines (128 loc) · 8.35 KB

README_ru.md

File metadata and controls

183 lines (128 loc) · 8.35 KB
Raw

Рецепт как собрать Grid и Crud функционал вокруг ресурса в приложении Vue.js версии 2

English version

Содержание

Цель

Данный рецепт показывает план по которому можно легко собрать следующий функционал:

  1. Предположим что на backend-е вы имеете некий ресурс, доступный к просмотру и управлению через Rest Api

  2. Назовем этот ресурс моделью, как привычно называют на backend-е объекты, отображающие строки в таблице базы данных

  3. Теперь вам нужен функционал для просмотра списка таких моделей и CRUD для них

  4. Следуя этому рецепту вы получите быстрый старт для запуска следующего функционала вокруг управления моделью:

    • Страница списка моделей со следующими функциями:
      • на странице показываются только модели, соответствующие условиям фильтрации, сортировки и нужной страницы пагинации
      • с сервера грузятся только нужные ❗ ,для показа текущей страницы, ресурсы, т.е. мы не грузим перед работой все ресурсы из API
      • когда условия для показа моделей текущей страницы меняются (фильтрация или сортировка), то следует новый запрос к API за нужными ресурсами
      • строка сортировки позволяет для каждого столбца возможность сортировки по нему
      • строка фильтрации ограничивает показываемые записи, с возможностью валидации данных в фильтре
      • информационная подсказка по кол-ву показанных и найденных моделей
      • пагинатор для перехода на нужную страницу (данные кешируются, если уже грузили данные для этой страницы, то не перезагружаем)
    • Технически состояние модуля для обслуживания нашего модуля хранится в отдельном модуле у VUEX
    • Функционал CRUD обеспечивает показ формы редактирования модели и ее удаления
    • Все легко меняется под нужные требования

Демо

Данный функционал по умолчанию будет выглядеть так: получившийся функционал grid и crud для ресурса

Установка демо

Клонируйте репозиторий

git clone [email protected]:mgrechanik/vue.js-2-recipe-of-grid-and-crud-functionality-for-resources.git

Выполните

npm install

Запускаем RestAPI с базой для нашего приложения

json-server --watch ./db/crud_db.json

Это даст нам два ресурса по следующим адресам:

  Resources
  http://localhost:3000/omegas
  http://localhost:3000/profiles

Если у вас адреса будут другие , настройте их в _moduleSettings.js у каждого модуля, подробности ниже.

Запускайте приложение

npm run serve

Теперь вы будете видеть соответствующие grid-ы с crud функционалом

Объяснение по сборке

В деталях сборки вы можете ознакомиться в рабочем demo примере.

Основные моменты такие:

  1. Функционал относительно vuex части модуля располагается в src/store/имяМодуля.js.

Функционал компонентов модуля располагается в src/components/crud/имяМодуля/.

  1. В сборке присутствует модуль omega - это базовый модуль, от которой наследуется весь функционал.

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

  1. Модуль profile в сборке - как раз пример как можно создать свой собственный модуль, отнаследовав ее от соответствующего функционала omega.

Список шагов, необходимых для создания своего модуля

Допустим, мы назовем нашу модель zeta , и соответствующий модуль также.

  1. копируем components/crud/profile в components/crud/zeta

  2. Часть, касаемая vuex модуля (каталог src/store)

    • profile.js копируем в zeta.js
      • В zeta.js
        • меняем на свои колонки фильтровки и сортировки (те, по которым в новой модели требуется)
    • добавляем в store/index.js
    	import zeta from './zeta'
	import * as ZETA_SETTINGS from '@/components/crud/zeta/_moduleSettings';

	zeta.state.settings = ZETA_SETTINGS;

	modules: {
		omega,
		profile,
		zeta
	}
	```

  3. меняем в каталоге components/crud/zeta

  • _moduleSettings.js

    • настройки для данной модели (подробно объяснены в самом файле)

  • EditForm.vue

  - свои колонки
    - шаблон
	- 
	data: function() {
			return {
				model: {
  • FilterRow.vue
    - шаблон
	
	-
	data: function() {
		return {
			filter: {

  • GridView.vue

    • шаблон

  • TitleAndSortRow.vue

   - шаблон
   -
	data: function() {
		return {
			sort: {
  • Инициализацию добавить
    • в App.vue
      this.$store.dispatch("zeta/initializeAction", this.$store);    
  this.$store.dispatch("zeta/setPageAction", 1);
    • или во вьюхе у роутера
  1. Добавляем эти компоненты на нужные страницы, пример как в роутере подключили, смотри в Демо.

Возможности по расширению

По модулю profile вы можете видеть что создавая свой модуль на основе базового - omega - мы в основном решали задачи по:

  • настройке модуля в _moduleSettings
  • настройке колонок
  • изменению шаблонов в компонентах

Логику в компонентах менять не потребовалось, но в этом также нет проблем, компоненты наследуются по правилам Vue с соответствующими возможностями переопределения, также ничто не мешает использовать свои собственные компоненты.