Veri Sağlayıcıları

Olobase Admin'nin temel amacı, uzak kaynakları belirli bir API'den yönetmektir. Herhangi bir standartlaştırılmış CRUD işlemi için arka uç API'niz ile iletişim kurması gerektiğinde, sağlayıcınızda kaynak verilerinin getirilmesinden veya güncellenmesinden sorumlu olacak uyarlanmış yöntemi çağırır.

- packages
    - admin
        - providers
            - data
                jsonServer.js

// Fetching books
let { data, total } = await provider.getList("books", { page: 1, perPage: 10 });
console.log(data);

// Fetching one book
let { data } = await provider.getOne("books", { id: 1 });
console.log(book)

// Create new book
await provider.create("books", { data: { title: "My title" } })

// Update title book
await provider.update("books", { id: book.id, data: { title: "New title" } });

// Delete book
await provider.delete("books", { id: book.id });

Olobase Admin'in herhangi bir API sunucusuyla uyumluluğunu sağlamak için bir veri sağlayıcının tüm getirme yöntemleri standartlaştırılmıştır. Bu, REST, GraphQL ve hatta SOAP olsun, herhangi bir değişim protokolünün her bir arka uç türü için her türden farklı sağlayıcıya izin veren adaptör modelidir.

Olobase Admin'e uzak kaynak verilerini alma yeteneği kazandırmak için, sonraki bölümde açıklandığı gibi constructor metoduna belirli bir veri sağlayıcıyı enjekte edilmesi gerekir. Bu veri sağlayıcı varsayılan olarak JsonServerProvider sağlayıcısıdır.

API Kontratı

Herhangi bir bağdaştırıcı modeli yaklaşımında her zaman olduğu gibi, Olobase Admin ile iletişime izin vermek için tüm veri sağlayıcılarının belirli bir sözleşmeye uyması gerekir. Sonraki nesne, uygulanması gereken minimum sözleşmeyi temsil eder:

const dataProvider = {
  getList:    (resource, params) => Promise,
  getOne:     (resource, params) => Promise,
  getMany:    (resource, params) => Promise,
  create:     (resource, params) => Promise,
  update:     (resource, params) => Promise,
  updateMany: (resource, params) => Promise,
  delete:     (resource, params) => Promise,
  deleteMany: (resource, params) => Promise,
  copy:       (resource, params) => Promise,
  copyMany:   (resource, params) => Promise,
}

Desteklenen API Operasyon Metotları

Bir Veri Sağlayıcının Ayarlanması

Veri sağlayıcıların kullanımı oldukça basitdir. İlk constructor argümanı olarak basit bir API URL'sini veya seçtiğiniz özel bir HTTP istemcisini alabilirler. Bazı başlıkları tüm yönetici uygulamasında paylaşmanız gerekiyorsa tam nesneyi kullanın; özellikle kimlik doğrulamayla ilgili başlıklar için kullanışlıdır.

src/plugins/admin.js

import {
  jsonServerDataProvider,
  jwtAuthProvider,
} from "olobase-admin/src/providers";
import { en, tr } from "olobase-admin/src/locales";
import config from "@/_config";

let admin = new OlobaseAdmin(import.meta.env);
/**
 * Install admin plugin
 */
export default {
  install: (app, http, resources) => {
    // console.error(app.config.globalProperties)
    admin.setOptions({
      app,
      router,
      resources,
      store,
      i18n,
      dashboard: "dashboard",
      downloadUrl: "/files/findOneById/",
      readFileUrl: "/files/readOneById/",
      title: "Demo",
      routes,
      locales: { en, tr },
      dataProvider: jsonServerDataProvider(http),
      authProvider: jwtAuthProvider(http),
      http,
      canAction: null,
      // canAction: ({ resource, action, can }) => {
      //   if (can(["admin"])) {
      //     return true;
      //   }
      //   // any other custom actions on given resource and action...
      // },
      options: config,
    });
    admin.init();
    OlobaseAdmin.install(app); // install layouts & components
    app.provide("i18n", i18n);
    app.provide("router", router);
    app.provide("admin", admin); // make injectable
    app.component("PageNotFound", PageNotFound);
  },
};

Kendi Veri Sağlayıcınızı Yazmak

Kendi veri sağlayıcınızı yazmak oldukça basitdir. JsonServerProvider ı kopyalarak metot çağrı imzalarını dikkate alın. Daha önce bahsedildiği gibi her sağlayıcı yöntemi 2 argüman alır:

• resource : ilgili kaynağın dize adını temsil eder ve her çağrı için kaynak API URL tabanı olmalıdır.
• params : her API çağrısı türüne uyarlanmış belirli bir nesne.

Method Çağrı İmzaları

Aşağıdaki tablo, her sağlayıcı yöntemi için ikinci parametrede hangi parametrelerin gönderilebileciğini listeler.

Her kaynak deposu modülündeki Olobase Admin'in bazı geçerli çağrı örnekleri:

dataProvider.getList("books", {
  pagination: { page: 1, perPage: 15 },
  sort: [{ by: "publication_date", desc: true }, { by: "title", desc: false }],
  filter: { author: "Cassandra" },
  include: ["media", "reviews"],
  fields: { books: ["isbn", "title"], reviews: ["status", "author"] }
});
dataProvider.getOne("books", { id: 1 });
dataProvider.getMany("books", { ids: [1, 2, 3] });
dataProvider.create("books", { data: { title: "Lorem ipsum" } });
dataProvider.update("books", { id: 1, data: { title: "New title" } });
dataProvider.updateMany("books", { ids: [1, 2, 3], data: { commentable: true } });
dataProvider.delete("books", { id: 1 });
dataProvider.deleteMany("books", { ids: [1, 2, 3] });

Hataların İşlenmesi

Herhangi bir sunucu tarafı hatası durumunda, yani yanıt durumu 2xx aralığının dışında olduğunda, HTTP durum kodunun yanı sıra en azından açıklayıcı bir hata mesajı içeren belirli bir Object ile bir ret sözü döndürmeniz yeterlidir. Bu durum, belirli bir durum koduna göre belirli bir kimlik doğrulama işlemi yapmanıza izin vermek için kimlik doğrulama sağlayıcısına iletilir.

Çoklu hata durumunda errors, sunucudan boş bir yanıt veya sunucu hatası gelmesi durumunda ise genel error yanıtına geri döneriz.

try {
  let response = await this.admin.http('post', url, data);
} catch (e) {
    if (
      && e.response 
      && e.response.status === 400 
      && e.response["data"] 
      && e.response["data"]["data"]
      && e.response["data"]["data"]["error"]
      ) {
      this.admin.message("error", e.response.data.data.error);
    }
}

Beklenen hata nesnesi formatı:

Store

Özel CRUD sayfalarınızdaki veya kimliği doğrulanmış herhangi bir özel sayfanızdaki her kaynak için tüm veri sağlayıcı yöntemlerini doğrudan Vuex mağazasından kullanabilirsiniz. Biri mapActions Vuex yardımcısıyla, diğeri ise gönderimi kullanabileceğiniz global $store örneğiyle olmak üzere 2 farklı yönteminiz var.

Takip eden kod, sağlayıcılarınızdan veri almanın her iki yolunu da bir örnek altında gösterir:

<template>
  <v-row>
    <v-col v-for="item in data" :key="item.id">
      {{ item.name }}
    </v-col>
  </v-row>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      data: [],
    }
  },
  async mounted() {
    /**
     * Use the global vuex store instance.
     * You need to provide the name of the resource followed by the provider method you want to call.
     * Each provider methods needs a `params` argument which is the same object described above.
     */
    this.data = await this.$store.dispatch("publishers/getList", {
      pagination: {
        page: 1,
        perPage: 5,
      },
    });

    /**
     * Use the registered global method which use global `api` store module.
     * Then you need to provide a object argument of this format : `{ resource, params }`
     */
    this.data = await this.getList({
      resource: "publishers",
      params: {
        pagination: {
          page: 1,
          perPage: 5,
        },
      },
    });
  },
  methods: {
    ...mapActions({
      getList: "api/getList",
    }),
  },
};
</script>