12. [vuejs-10] projesi: [dao] eklentisi, HTTP asenkron istekleri

[vuejs-10] projesinin dizin yapısı şöyledir:

[vuejs-10] projesi, uzak bir sunucuya HTTP isteği gönderen bir bileşeni göstermektedir. Kullanılan mimari şöyledir:

[Vue.js] bileşeni, vergi hesaplama sunucusuyla iletişim kurmak için [dao] katmanını kullanır.

12.1. Bağımlılıkların kurulumu

[vuejs-10] uygulaması, vergi hesaplama sunucusuna asenkron istekler göndermek için [axios] kütüphanesini kullanır. Bu bağımlılığı yüklememiz gerekir:

• [4-5]'te, [axios] kütüphanesinin yüklenmesinden sonra [package.json] dosyasına eklenen satır [1-3] ;

12.2. [Dao] sınıfı

[Dao] sınıfı, [La classe Dao] paragrafında geliştirilen sınıftır. Hatırlatma amacıyla burada tekrar veriyoruz:

'use strict';

// ithalatlar
import qs from 'qs'

// sınıf [Dao]
class Dao {

  // yapıcı
  constructor(axios) {
    this.axios = axios;
    // oturum çerezi
    this.sessionCookieName = "PHPSESSID";
    this.sessionCookie = '';
  }

  // oturum başlatma
  async  initSession() {
    // istek seçenekleri HHTP [get /main.php?action=init-session&type=json]
    const options = {
      method: "GET",
      // URL parametreleri
      params: {
        action: 'init-session',
        type: 'json'
      }
    };
    // HTTP sorgusunun yürütülmesi
    return await this.getRemoteData(options);
  }

  async  authentifierUtilisateur(user, password) {
    // HHTP isteğinin seçenekleri [post /main.php?action=authentifier-utilisateur]
    const options = {
      method: "POST",
      headers: {
        'Content-type': 'application/x-www-form-urlencoded',
      },
      // POST'in gövdesi
      data: qs.stringify({
        user: user,
        password: password
      }),
      // URL'in parametreleri
      params: {
        action: 'authentifier-utilisateur'
      }
    };
    // HTTP isteğinin yürütülmesi
    return await this.getRemoteData(options);
  }

  async getAdminData() {
    // HHTP sorgusunun seçenekleri  [get /main.php?action=get-admindata]
    const options = {
      method: "GET",
      // URL parametreleri
      params: {
        action: 'get-admindata'
      }
    };
    // HTTP sorgusunun yürütülmesi
    const data = await this.getRemoteData(options);
    // sonuç
    return data;
  }

  async  getRemoteData(options) {
    // oturum çerezi için
    if (!options.headers) {
      options.headers = {};
    }
    options.headers.Cookie = this.sessionCookie;
    // HTTP isteğinin yürütülmesi
    let response;
    try {
      // asenkron istek
      response = await this.axios.request('main.php', options);
    } catch (error) {
      // [error] parametresi bir istisna örneğidir - çeşitli biçimlerde olabilir
      if (error.response) {
        // sunucunun yanıtı [error.response]'tedir
        response = error.response;
      } else {
        // hata yeniden gönderiliyor
        throw error;
      }
    }
    // response, sunucudan gelen HTTP yanıtının tamamıdır (HTTP başlıkları + yanıtın kendisi)
    // varsa oturum çerezi alınır
    const setCookie = response.headers['set-cookie'];
    if (setCookie) {
      // setCookie bir dizidir
      // bu dizide oturum çerezi aranır
      let trouvé = false;
      let i = 0;
      while (!trouvé && i < setCookie.length) {
        // oturum çerezi aranır
        const results = RegExp('^(' + this.sessionCookieName + '.+?);').exec(setCookie[i]);
        if (results) {
          // oturum çerezi kaydedilir
          // eslint-disable-next-line require-atomic-updates
          this.sessionCookie = results[1];
          // bulundu
          trouvé = true;
        } else {
          // sonraki öğe
          i++;
        }
      }
    }
    // sunucu yanıtı şurada: [response.data]
    return response.data;
  }
}

// sınıfın dışa aktarımı
export default Dao;

[vuejs-10] projesi, yalnızca 18-30. satırlardaki [initSession] asenkron yöntemini kullanır. [Dao] sınıfının, 10. satırda [axios] parametresiyle örneklendiğini hatırlatırız; bu parametre, çağıran kod tarafından başlatılır. Bu çağıran kod, burada [./main.js] komut dosyası olacaktır.

12.3. [pluginDao] eklentisi

[pluginDao] eklentisi şöyledir:

export default {
  install(Vue, dao) {
    // Vue sınıfına [$dao] özelliği ekleniyor
    Object.defineProperty(Vue.prototype, '$dao', {
      // Vue.$dao referanslandığında, 2. parametre [dao] olarak döndürülür
      get: () => dao,
    })
  }
}

[event-bus] eklentisi için verilen açıklamayı hatırlarsak, [pluginDao] eklentisinin, [Vue] sınıfında/fonksiyonunda [$dao] adlı yeni bir özellik oluşturduğunu görürüz. Bu özelliğin değeri (bunun henüz kanıtlanması gerekiyor), [./Dao] komut dosyası tarafından dışa aktarılan nesne, yani önceki [Dao] sınıfı olacaktır.

12.4. Ana komut dosyası [main.js]

[main.js] ana komut dosyasının kodu şöyledir:

// ithalatlar
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';

// eklentiler
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// katman [dao]
import Dao from './Dao';
// axios yapılandırması
axios.defaults.timeout = 2000;
axios.defaults.baseURL = 'http://localhost/php7/scripts-web/impots/version-14';
axios.defaults.withCredentials = true;
// katman örneği [dao]
const dao = new Dao(axios);

// [dao] eklentisi
import pluginDao from './plugins/dao'
Vue.use(pluginDao, dao)

// yapılandırma
Vue.config.productionTip = false

// [App] projesinin örneği
new Vue({
  render: h => h(App),
}).$mount('#uygulama')

[main.js] komut dosyası:

• 14-21. satırlarda [dao] katmanını başlatır;
• 24-25. satırlarda [pluginDao] eklentisini entegre eder;
• 15. satır: [Dao] sınıfı içe aktarılır;
• 17-18. satırlar: HTTP sorgularını gerçekleştiren [axios] nesnesi yapılandırılır. Bu nesne 4. satırda içe aktarılır;
  • satır 17: 2 saniyelik bir [timeout] tanımlanır;
  • satır 18: vergi hesaplama sunucusuna ait URL;
  • 19. satır: sunucuyla çerez alışverişi yapabilmek için;
• 24-25. satırlar: [pluginDao] eklentisinin kullanımı
  • 24. satır: eklentinin içe aktarılması;
  • 25. satır: eklentinin entegrasyonu. [Vue.use] yönteminin ikinci parametresinin, 21. satırda tanımlanan [dao] katmanının referansı olduğu görülmektedir. Bu nedenle, [Vue.$dao] özelliği, [Vue] sınıfının/fonksiyonunun tüm örneklerinde, yani tüm [Vue.js] bileşenlerinde [dao] katmanını işaret edecektir;

12.5. [App.vue] ana görünümü

[App] ana görünümünün kodu şöyledir:

<template>
  <div class="container">
    <b-card>
      <!-- mesaj -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-10] : plugin [dao], requêtes HTTP asynchrones</h4>
      </b-alert>
      <!-- vergi hesaplama sunucusuna asenkron istek gönderen bileşen-->
      <Component1 @error="doSomethingWithError" @endWaiting="endWaiting" @beginWaiting="beginWaiting" />
      <!-- olası bir hatanın görüntülenmesi -->
      <b-alert show
               variant="danger"
               v-if="showError">Evénement [error] intercepté par [App]. Valeur reçue = {{error}}</b-alert>
      <!-- dönme simgesi içeren bekleme mesajı -->
      <b-alert show v-if="showWaiting" variant="light">
        <strong>Requête au serveur de calcul d'impôt en cours...</strong>
        <b-spinner variant="primary" label="Spinning"></b-spinner>
      </b-alert>
    </b-card>
  </div>
</template>

<script>
  import Component1 from "./components/Component1";
  export default {
    name: "app",
    // bileşenin durumu
    data() {
      return {
        // bekleme dönen simgesini kontrol eder
        showWaiting: false,
        // hata mesajının görüntülenmesini kontrol eder
        showError: false,
        // yakalanan hata
        error: {}
      };
    },
    // kullanılan bileşenler
    components: {
      Component1
    },
    // olay yönetimi yöntemleri
    methods: {
      // bekleme başlangıcı
      beginWaiting() {
        // bekleme durumu görüntülenir
        this.showWaiting = true;
        // hata mesajı gizlenir
        this.showError = false;
      },
      // bekleme sonu
      endWaiting() {
        // bekleme gizlenir
        this.showWaiting = false;
      },
      // hata yönetimi
      doSomethingWithError(error) {
        // hata oluştuğu kaydedilir
        this.error = error;
        // hata mesajı görüntüleniyor
        this.showError = true;
      }
    }
  };
</script>

Açıklamalar

• 9. satır: [Component1], HTTP asenkron isteğini gerçekleştiren bileşendir. Üç olay gönderebilir:
  • [beginWaiting]: İstek yapılmak üzere. Kullanıcıya bir bekleme mesajı gösterilmelidir;
  • [endWaiting]: İstek tamamlandı. Bekleme sonlandırılmalıdır;
  • [error]: İstek başarısız oldu. Bir hata mesajı görüntülenmelidir;
• 10-13. satırlar: Olası hata mesajını görüntüleyen uyarı. Bu uyarı, 33. satırdaki [showError] boole değeri tarafından kontrol edilir. 35. satırdaki hatayı görüntüler;
• satır 14-18: Bekleme mesajını bir dönen simgeyle birlikte görüntüleyen uyarı. Bu uyarı, 47. satırdaki [showWaiting] boole değişkeni tarafından kontrol edilir;
• satır 45-50: [beginWaiting], [beginWaiting] olayının alınmasıyla yürütülen yöntemdir. Bu yöntem, bekleme mesajını görüntüler (47. satır) ve önceki bir işlem sonucunda hata mesajının görünür durumda olması durumunda bu mesajı gizler (49. satır);
• satır 52-55: [endWaiting], [endWaiting] olayı alındığında yürütülen yöntemdir. Bekleme mesajını gizler (satır 54);
• satır 57-62: [doSomethingWithError], [error] olayı alındığında yürütülen yöntemdir. Alınan hatayı kaydeder (satır 59) ve hata mesajını görüntüler (satır 61);

12.6. [Component1] bileşeni

[Component1] bileşeninin kodu şöyledir:

<template>
  <b-row>
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Valeur reçue du serveur = {{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "component1",
    // bileşen durumu
    data() {
      return {
        showMsg: false
      };
    },
    // olay yönetimi yöntemleri
    methods: {
      // sunucudan alınan verinin işlenmesi
      doSomethingWithData(data) {
        // alınan veriler kaydedilir
        this.data = data;
        // veriler görüntülenir
        this.showMsg = true;
      }
    },
    // bileşen az önce oluşturuldu
    created() {
      // sunucu ile oturum başlatılıyor - asenkron istek
      // [dao] katmanındaki yöntemler tarafından döndürülen söz kullanılıyor
      // işlemin başlangıcı bildiriliyor
      this.$emit("beginWaiting");
      // asenkron işlem başlatılıyor
      this.$dao
        // Vergi hesaplama sunucusuyla bir jSON oturumu başlatılır
        .initSession()
        // işlem başarılı olduğunda alınan veriyi işleyen yöntem
        .then(data => {
          // Alınan veriyi işler
          this.doSomethingWithData(data);
        })
        // hata durumunda hatayı işleyen yöntem
        .catch(error => {
          // hatayı üst bileşene bildirir
          this.$emit("error", error.message);
        }).finally(() => {
          // bekleme sona erdi
          this.$emit("endWaiting");
        })
    }
  };
</script>

Açıklamalar

• 4-6. satırlar: Bileşen, yalnızca HTTP isteğinin başarılı olması durumunda, vergi hesaplama sunucusu tarafından döndürülen değeri görüntüleyen tek bir uyarıdan oluşur. Bu uyarı, 17. satırdaki [showMsg] boole değeri tarafından kontrol edilir;
• satır 31-53: HTTP isteği, bileşen oluşturulur oluşturulmaz yapılır. Dolayısıyla, kod 31. satırdaki [created] yöntemine yerleştirilir;
• 35. satır: üst bileşene asenkron isteğin başlayacağı bildirilir;
• satır 37-39: [this.$dao.initSession] yöntemi yürütülür. Bu yöntem, vergi hesaplama sunucusuyla bir jSON oturumu başlatır. Bu yöntemin anlık sonucu bir [Promise]'tir;
• satır 41-44: Bu kod, sunucu hatasız bir şekilde sonucunu döndürdüğünde yürütülür. Sunucunun sonucu [data]'te bulunur. 43. satırda, [doSomethingWithData] yönteminden bu sonucu işlemesi istenir;
• satır 46-49: Bu kod, isteğin yürütülmesi sırasında bir hata oluşması durumunda çalışır. Satır 48’de, üst bileşene bir hata oluştuğu bildirilir ve [error.message] hata mesajı iletilir;
• 49-52. satırlar: Bu kod her durumda yürütülür. Üst bileşene, HTTP isteğinin tamamlandığı bildirilir;
• 23-28. satırlar: [doSomethingWithData] yöntemi, sunucu tarafından gönderilen [data] verisini işlemekle görevli yöntemdir. 25. satırda bu veriler kaydedilir ve 27. satırda görüntülenir;

12.7. Projenin çalıştırılması

Proje başlatıldığında, vergi hesaplama sunucusu çalışmıyorsa şu sonuç elde edilir:

[Laragon] sunucusunu başlatalım (bkz. https://tahe.developpez.com/tutoriels-cours/php7) ve yukarıdaki sayfayı yeniden yükleyelim. Sonuç şu şekilde olur:

Not: Burada, https://tahe.developpez.com/tutoriels-cours/php7 adresinde tanımlanan vergi hesaplama sunucusunun 14. sürümünü kullanıyoruz.