Shayna  Lowe

Shayna Lowe

1656686760

Créer Une Liste Déroulante Avec La Zone De Recherche Avec Vue-select

L'élément HTML <select> ne fournit pas de fonction de recherche.

Dans VueJS, vous pouvez utiliser le composant vue-select pour ajouter un élément de sélection personnalisable et réactif. Il nous permet de charger des options avec et sans AJAX.

Dans ce tutoriel, j'expliquerai les deux manières de charger les options dans vue-select.


1. Structure du tableau

Créer un countriestableau.

CREATE TABLE `countries` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuration

Créez un config.phppour la connexion à la base de données.

Code terminé

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3.HTML

J'utilise CDN pour inclure le script CSS et JS pour vue-select. Il est disponible sur GitHub . Vous pouvez l'installer dans votre projet.

Inclure vue-select.css dans la <head >section.

<link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">

J'utilise le package Axios pour envoyer une requête AJAX. J'ai stocké dans le répertoire du projet. Vous pouvez le télécharger  ici .

Inclure le script vue, vue-select et axios js à la fin de <body>. En outre, fichier inclus script.js. Dans ce fichier, écrivez le script Vue pour charger le vue-selectcomposant et récupérer les options.

<script src="https://unpkg.com/vue@latest"></script> 
<script src="https://unpkg.com/vue-select@latest"></script> 
<script src="axios-master/dist/axios.min.js"></script> 
<script src="script.js" ></script>

options et méthodes de vue-select – 

v-selecta les options suivantes que j'ai utilisées dans l'exemple -

  • :options – Charger la liste des options. Requiert une valeur de type tableau.
  • étiquette - Si :optionsa un tableau d'objets, vous devez spécifier le nom de la clé qui est utilisée pour le labelsinon l'étiquette de la liste ne s'affichera pas, par exemple - { id: 1, name: Yogesh }. Ici, utilisez namela clé pour l'étiquette.

NOTE – Ce n'est pas nécessaire pour les tableaux unidimensionnels, par exemple – [ yogesh, visual, sonarika ].

  • :reduce - si :optionsa un tableau d'objets. Dans ce cas, lorsque vous lisez la valeur de l'option sélectionnée, elle contient l'objet entier. Vous devez lire la clé requise à partir de l'objet.

Avec :reducevous pouvez retourner la valeur de la clé unique. par ex { id: 1, name: Yogesh }.

v-selectméthodes que j'ai utilisées dans l'exemple -

  • @search – Cet événement se déclenche lors de la mise à jour du texte de recherche. Utilisez ceci pour les options de chargement en utilisant AJAX.
  • @input - Cet événement se déclenche lors du changement d'état de la valeur. Vous pouvez utiliser cette méthode pour effectuer une action basée sur la sélection d'options.

HTML

Créer deux <v-select >-

  • Dans le 1er v-sélectionnez les options de chargement sans AJAX et
  • Dans le 2ème v-sélectionnez les options de chargement avec AJAX.

Passez le 1er v-select et users_optionsajoutez . De même , passez le 2e v-select, ajoutez , utilisez pour obtenir la clé d'option sélectionnée comme valeur.:optionsv-model="user"country_options:optionsv-model="country":reduce="country => country.id"id

Avec @searchles options de chargement à l'aide d'AJAX et avec @inputeffectuer une action sur la sélection d'options.

Code terminé

<!DOCTYPE html>
<html>
<head>
  <title>Make Dropdown with Search box with vue-select - Vue.js</title>

  <link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">
  <style type="text/css">

  #app {
      max-width: 500px;
      margin-top: 10px;
  }
  </style>
</head>
<body>

   <div id="app">

     <table width='100%' >
       <thead>
         <tr>
            <th width='10%'></th>
            <th width='60%'></th>
            <th width='30%'>Selected Value</th>
         </tr>
       </thead>
       <tbody>
         <tr>
            <td>Users</td>
            <td>
               <v-select 
                  v-model="user" 
                  :options="users_options">
               </v-select>
            </td>
            <td align='center' v-text="user"></td>
         </tr>
         <tr>
            <td>Countries</td>
            <td>
              <v-select label="name" 
                 v-model="country" 
                 :reduce="country => country.id" 
                 :options="country_options" 
                 @search="fetchOptions" 
                 @input="selectedOption" >
              </v-select>
            </td>
            <td align='center' v-text="country"></td>
         </tr>
       </tbody>

     </table>

   </div>

   <!-- Script -->
   <script src="https://unpkg.com/vue@latest"></script>
   <script src="https://unpkg.com/vue-select@latest"></script>
   <script src="axios-master/dist/axios.min.js"></script>

   <script src="script.js" ></script>
</body>
</html>

4.AJAX

Créer ajaxfile.phpun fichier.

Vérifiez si $_GET['search']est défini ou non. S'il est défini, attribuez $_GET['search']-le à la $searchvariable.

Récupérez les enregistrements de la countriestable et utilisez- $searchles pour effectuer une recherche sur le nameterrain.

Boucle sur les enregistrements récupérés. Initialisez $return_arrle tableau avec les touches idet . namePasse $iden 'id'clé et $nameen 'name'clé.

REMARQUE – Vous pouvez modifier les noms de clé en fonction de vos besoins.

Renvoie $return_arrun tableau au format JSON.

Code terminé

<?php

// configuration
include 'config.php';

$search = "";
if(isset($_GET['search'])){
   $search = mysqli_real_escape_string($con,$_GET['search']);
}

// Fetch records
$query = 'SELECT * FROM countries where name like "%'.$search.'%" ';
$result = mysqli_query($con,$query);

$response_arr = array();

while($datarow = mysqli_fetch_assoc($result)){

   $id = $datarow['id'];
   $name = $datarow['name'];

   $response_arr[] = array(
     "id"=> $id,
     "name" => $name
   );

}

echo json_encode($response_arr);
exit;

5. Scénario

Créer script.jsun fichier.

Enregistrez le v-selectcomposant.

Création de 4 variables de données –

  • user – Variable de modèle du 1er v-select. Utilisez pour récupérer la valeur de l'option sélectionnée.
  • country – Variable de modèle du 2ème v-select. Utilisez pour récupérer la valeur de l'option sélectionnée.
  • users_options – Noms d'utilisateurs stockés dans le tableau. Cette utilisation pour le chargement des options pour le 1er v-select.
  • country_options – Un tableau vide. Cette utilisation pour le chargement des options pour le 2ème v-select.

Création de 2 méthodes –

fetchOptions - Cette option se déclenche sur le déclencheur d' @searchévénement. Il a 2 paramètres -

  • recherche – Le texte d'entrée actuel.
  • chargement - Paramètre booléen pour basculer l'état de chargement.

Envoyez une requête AJAX GET à l'aide d'Axios. Passer searchen paramètre { search: search }. En cas de rappel réussi, assignez response.datadans country_options.

selectedOption - Il a 1 paramètre qui stocke la valeur de l'option sélectionnée. J'affiche simplement la valeur en utilisant console.log(). Vous pouvez l'utiliser pour effectuer une action basée sur la valeur.

Code terminé

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
   el: '#app',
   data: {
     user: "",
     country: 0,
     users_options: [
       "Yogesh singh",
       "Sunil singh",
       "Sonarika bhadoria",
       "Akilesh sahu",
       "Mayank patidar"
     ],
     country_options: []
   },
   methods: {
      fetchOptions: function(search,loading){

        var el = this;

        // AJAX request
        axios.get('ajaxfile.php', {
           params: {
              search: search, 
           }
        })
        .then(function (response) {

           // Update options
           el.country_options = response.data; 

        });

      },
      selectedOption: function(value){
         console.log("value : " + value);
      }
   }
})

6. Démo

Voir la démo


7. Conclusion

Utilisez :optionspour charger la liste des options dans la boîte de sélection. Avec @inputévénement, vous pouvez exécuter votre action en fonction de l'option sélectionnée.

Source: https://makitweb.com

#vue #vuejs

What is GEEK

Buddha Community

Créer Une Liste Déroulante Avec La Zone De Recherche Avec Vue-select
Shayna  Lowe

Shayna Lowe

1656686760

Créer Une Liste Déroulante Avec La Zone De Recherche Avec Vue-select

L'élément HTML <select> ne fournit pas de fonction de recherche.

Dans VueJS, vous pouvez utiliser le composant vue-select pour ajouter un élément de sélection personnalisable et réactif. Il nous permet de charger des options avec et sans AJAX.

Dans ce tutoriel, j'expliquerai les deux manières de charger les options dans vue-select.


1. Structure du tableau

Créer un countriestableau.

CREATE TABLE `countries` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuration

Créez un config.phppour la connexion à la base de données.

Code terminé

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3.HTML

J'utilise CDN pour inclure le script CSS et JS pour vue-select. Il est disponible sur GitHub . Vous pouvez l'installer dans votre projet.

Inclure vue-select.css dans la <head >section.

<link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">

J'utilise le package Axios pour envoyer une requête AJAX. J'ai stocké dans le répertoire du projet. Vous pouvez le télécharger  ici .

Inclure le script vue, vue-select et axios js à la fin de <body>. En outre, fichier inclus script.js. Dans ce fichier, écrivez le script Vue pour charger le vue-selectcomposant et récupérer les options.

<script src="https://unpkg.com/vue@latest"></script> 
<script src="https://unpkg.com/vue-select@latest"></script> 
<script src="axios-master/dist/axios.min.js"></script> 
<script src="script.js" ></script>

options et méthodes de vue-select – 

v-selecta les options suivantes que j'ai utilisées dans l'exemple -

  • :options – Charger la liste des options. Requiert une valeur de type tableau.
  • étiquette - Si :optionsa un tableau d'objets, vous devez spécifier le nom de la clé qui est utilisée pour le labelsinon l'étiquette de la liste ne s'affichera pas, par exemple - { id: 1, name: Yogesh }. Ici, utilisez namela clé pour l'étiquette.

NOTE – Ce n'est pas nécessaire pour les tableaux unidimensionnels, par exemple – [ yogesh, visual, sonarika ].

  • :reduce - si :optionsa un tableau d'objets. Dans ce cas, lorsque vous lisez la valeur de l'option sélectionnée, elle contient l'objet entier. Vous devez lire la clé requise à partir de l'objet.

Avec :reducevous pouvez retourner la valeur de la clé unique. par ex { id: 1, name: Yogesh }.

v-selectméthodes que j'ai utilisées dans l'exemple -

  • @search – Cet événement se déclenche lors de la mise à jour du texte de recherche. Utilisez ceci pour les options de chargement en utilisant AJAX.
  • @input - Cet événement se déclenche lors du changement d'état de la valeur. Vous pouvez utiliser cette méthode pour effectuer une action basée sur la sélection d'options.

HTML

Créer deux <v-select >-

  • Dans le 1er v-sélectionnez les options de chargement sans AJAX et
  • Dans le 2ème v-sélectionnez les options de chargement avec AJAX.

Passez le 1er v-select et users_optionsajoutez . De même , passez le 2e v-select, ajoutez , utilisez pour obtenir la clé d'option sélectionnée comme valeur.:optionsv-model="user"country_options:optionsv-model="country":reduce="country => country.id"id

Avec @searchles options de chargement à l'aide d'AJAX et avec @inputeffectuer une action sur la sélection d'options.

Code terminé

<!DOCTYPE html>
<html>
<head>
  <title>Make Dropdown with Search box with vue-select - Vue.js</title>

  <link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">
  <style type="text/css">

  #app {
      max-width: 500px;
      margin-top: 10px;
  }
  </style>
</head>
<body>

   <div id="app">

     <table width='100%' >
       <thead>
         <tr>
            <th width='10%'></th>
            <th width='60%'></th>
            <th width='30%'>Selected Value</th>
         </tr>
       </thead>
       <tbody>
         <tr>
            <td>Users</td>
            <td>
               <v-select 
                  v-model="user" 
                  :options="users_options">
               </v-select>
            </td>
            <td align='center' v-text="user"></td>
         </tr>
         <tr>
            <td>Countries</td>
            <td>
              <v-select label="name" 
                 v-model="country" 
                 :reduce="country => country.id" 
                 :options="country_options" 
                 @search="fetchOptions" 
                 @input="selectedOption" >
              </v-select>
            </td>
            <td align='center' v-text="country"></td>
         </tr>
       </tbody>

     </table>

   </div>

   <!-- Script -->
   <script src="https://unpkg.com/vue@latest"></script>
   <script src="https://unpkg.com/vue-select@latest"></script>
   <script src="axios-master/dist/axios.min.js"></script>

   <script src="script.js" ></script>
</body>
</html>

4.AJAX

Créer ajaxfile.phpun fichier.

Vérifiez si $_GET['search']est défini ou non. S'il est défini, attribuez $_GET['search']-le à la $searchvariable.

Récupérez les enregistrements de la countriestable et utilisez- $searchles pour effectuer une recherche sur le nameterrain.

Boucle sur les enregistrements récupérés. Initialisez $return_arrle tableau avec les touches idet . namePasse $iden 'id'clé et $nameen 'name'clé.

REMARQUE – Vous pouvez modifier les noms de clé en fonction de vos besoins.

Renvoie $return_arrun tableau au format JSON.

Code terminé

<?php

// configuration
include 'config.php';

$search = "";
if(isset($_GET['search'])){
   $search = mysqli_real_escape_string($con,$_GET['search']);
}

// Fetch records
$query = 'SELECT * FROM countries where name like "%'.$search.'%" ';
$result = mysqli_query($con,$query);

$response_arr = array();

while($datarow = mysqli_fetch_assoc($result)){

   $id = $datarow['id'];
   $name = $datarow['name'];

   $response_arr[] = array(
     "id"=> $id,
     "name" => $name
   );

}

echo json_encode($response_arr);
exit;

5. Scénario

Créer script.jsun fichier.

Enregistrez le v-selectcomposant.

Création de 4 variables de données –

  • user – Variable de modèle du 1er v-select. Utilisez pour récupérer la valeur de l'option sélectionnée.
  • country – Variable de modèle du 2ème v-select. Utilisez pour récupérer la valeur de l'option sélectionnée.
  • users_options – Noms d'utilisateurs stockés dans le tableau. Cette utilisation pour le chargement des options pour le 1er v-select.
  • country_options – Un tableau vide. Cette utilisation pour le chargement des options pour le 2ème v-select.

Création de 2 méthodes –

fetchOptions - Cette option se déclenche sur le déclencheur d' @searchévénement. Il a 2 paramètres -

  • recherche – Le texte d'entrée actuel.
  • chargement - Paramètre booléen pour basculer l'état de chargement.

Envoyez une requête AJAX GET à l'aide d'Axios. Passer searchen paramètre { search: search }. En cas de rappel réussi, assignez response.datadans country_options.

selectedOption - Il a 1 paramètre qui stocke la valeur de l'option sélectionnée. J'affiche simplement la valeur en utilisant console.log(). Vous pouvez l'utiliser pour effectuer une action basée sur la valeur.

Code terminé

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
   el: '#app',
   data: {
     user: "",
     country: 0,
     users_options: [
       "Yogesh singh",
       "Sunil singh",
       "Sonarika bhadoria",
       "Akilesh sahu",
       "Mayank patidar"
     ],
     country_options: []
   },
   methods: {
      fetchOptions: function(search,loading){

        var el = this;

        // AJAX request
        axios.get('ajaxfile.php', {
           params: {
              search: search, 
           }
        })
        .then(function (response) {

           // Update options
           el.country_options = response.data; 

        });

      },
      selectedOption: function(value){
         console.log("value : " + value);
      }
   }
})

6. Démo

Voir la démo


7. Conclusion

Utilisez :optionspour charger la liste des options dans la boîte de sélection. Avec @inputévénement, vous pouvez exécuter votre action en fonction de l'option sélectionnée.

Source: https://makitweb.com

#vue #vuejs

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Avav Smith

Avav Smith

1578417846

Collection of 14 Vue Select Component for Vue.js App

Vue select component can handle multiple selections. It’s enabled with the multiple property. Like with the single selection, you can pull out the new value by accessing event. target. value in the onChange callback.

1. Vue GridMultiselect

Simple multi-select component with items displayed in a table like UI.

Vue GridMultiselect

Demo

Download


2. vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.

Vue Select is a feature rich select/dropdown/typeahead component.

Features

  • Tagging
  • Filtering / Searching
  • Vuex Support
  • AJAX Support
  • SSR Support
  • ~20kb Total / ~5kb CSS / ~15kb JS
  • Select Single/Multiple Options
  • Customizable with slots and SCSS variables
  • Tested with Bootstrap 3/4, Bulma, Foundation
  • +95% Test Coverage
  • Zero dependencies

vue-select

Demo

Download


3. @desislavsd/vue-select

Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

Features

  • Uses v-model
  • Single / Multiple selection
  • Tagging + custom key triggers
  • List Filtering / Searching
  • Support for async list source
  • Out of the box AJAX support using fetch
  • Debounce AJAX requests
  • Transparent access to input attributes
  • Highly customizable
  • Zero dependencies

esislavsd/vue-select

Demo

Download


4. v-super-select

An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling.

v-super-select

Demo

Download


5. vue-dynamic-select

A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select

Download


6. @alfsnd/vue-bootstrap-select

A vue version of bootstrap select

alfsnd/vue-bootstrap-select

Demo

Download


7. vue-selectize

Vanila Vue.js component that mimics Selectize behaviour (no need jquery dependency)

vue-selectize

Demo

Download


8. vue2-selectize

A Selectize wrapper for VueJS 2.

vue2-selectize

Demo

Download


9. v-suggest

A Vue2 plugin for input content suggestions, support keyboard to quick pick.

v-suggest

Demo

Download


10. vue-multi-select

This component gives you a multi/single select with the power of Vuejs components.

vue-multi-select

Demo

Download


11. v-cascade

A lovely component of cascade selector with vue.js (Support both of PC and Mobile)

v-cascade

Demo

Download


12. stf vue select VUE2

stf vue select - most flexible and customized select

For detailed explanation on how things work, checkout the DEMO

stf vue select VUE2

Demo

Download


13. Advanced Vue.js Chained Select

Using Vue.js to chain mulitiple select inputs together.

Advanced Vue.js Chained Select

Demo


14. Vue Select2

A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.

Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery, while providing the same awesome data-binding features you expect from Vue. Vue-select has no JavaScript dependencies other than Vue, and is designed to mimic Select2.

Vue Select2

Demo

Download


Thank for read!

#vue-select #vue-select-component #vue-js #select-component

Teresa  Bosco

Teresa Bosco

1598685221

Vue File Upload Using vue-dropzone Tutorial

In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is  highly customizable. The  vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.

Dropzone.js is an open-source library providing drag-and-drop file uploads with image previews. DropzoneJS is lightweight, doesn’t depend on any other library (like jQuery), and is highly customizable.

The vue-dropzone is a vue component implemented on top of Dropzone.js.

First, install the Vue using Vue CLI.

Step 1: Install Vue.js using Vue CLI.

Go to your terminal and hit the following command.

npm install -g @vue/cli
         or
yarn global add @vue/cli

If you face any error, try running the command as an administrator.

Now, we need to generate the necessary scaffold. So type the following command.

vue create vuedropzone

It will install the scaffold.

Open the project in your favorite editor. Mine is Visual Studio Code.

cd vuedropzone
code .

Step 2: Install vue-dropzone.

I am using the Yarn package manager. So let’s install using Yarn. You can use NPM, also. It does not matter.

yarn add vue2-dropzone

or

npm install vue2-dropzone

Okay, now we need to add one css file with the above package. Now, vue cli uses css loader, so we can directly import in the src >>  main.js entry file.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

import 'vue2-dropzone/dist/vue2Dropzone.css'

If importing css is not working for you, then you need to install that CSS file manually.

Copy this vue2Dropzone.css file’s content.

Create one file inside the src  >>  assets folder, create one css file called vuedropzone.css and paste the content there.

Import this css file inside src  >>  App.vue file.

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, it should include in our application.

Step 3: Upload an Image.

Our primary boilerplate has one ready-made component called HelloWorld.vue inside src  >>  components folder. Now, create one more file called FileUpload.vue.

Add the following code to FileUpload.vue file.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="upload" :options="config"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "https://appdividend.com"
    }
  }),
  components: {
    vueDropzone
  }
};
</script>

Here, our API endpoint is https://appdividend.com. It is the point where we will hit the POST route and store our image, but it is my blog’s homepage, so it will not work anyway. But let me import this file into App.vue component and see what happens.

// App.vue

<template>
  <div id="app">
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue'

export default {
  name: 'app',
  components: {
    FileUpload
  }
}
</script>

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, start the development server using the following command. It will open up URL: http://localhost:8080.

npm run serve

Now, after uploading the image, we can see that the image upload is failed due to the wrong POST request endpoint.

Step 4: Create Laravel API for the endpoint.

Install the Laravel.

After that, we configure the database in the .env file and use MySQL database.

We need to create one model and migration file to store the image. So let us install the following command inside the Laravel project.

php artisan make:model Image -m

It will create both the Image model and create_images_table.php migrations file.

Now, open the migrations file and add the schema to it.

// create_images_table.php

public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('image_name');
            $table->timestamps();
        });
    }

Now, migrate the database table using the following command.

php artisan migrate

It creates the table in the database.

Now, we need to add a laravel-cors package to prevent cross-site-allow-origin errors. Go to the Laravel root and enter the following command to install it.

composer require barryvdh/laravel-cors

Configure it in the config  >>  app.php file.

Barryvdh\Cors\ServiceProvider::class,

Add the middleware inside app >>  Http  >>  Kernel.php file.

// Kernel.php

protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
        \Barryvdh\Cors\HandleCors::class,
];

Step 5: Define the API route and method to store the image.

First, create an ImageController.php file using the following command.

php artisan make:controller ImageController

Define the store method. Also, create one images folder inside the public directory because we will store an image inside it.

Right now, I have written the store function that handles one image at a time. So do not upload multiple photos at a time; otherwise, it will break.

// ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image;

class ImageController extends Controller
{
    public function store(Request $request)
    {
       if($request->file('file'))
       {
          $image = $request->file('file');
          $name = time().$image->getClientOriginalName();
          $image->move(public_path().'/images/', $name); 
        }

       $image= new Image();
       $image->image_name = $name;
       $image->save();

       return response()->json(['success' => 'You have successfully uploaded an image'], 200);
     }
}

Go to the routes   >>  api.php file and add the following route.

// api.php

Route::post('image', 'ImageController@store');

Step 6: Edit FileUpload.vue component.

We need to add the correct Post request API endpoint in FileUpload.vue component.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="drop1" :options="config" @vdropzone-complete="afterComplete"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "http://localhost:8000/api/image",
      
    }
  }),
  components: {
    vueDropzone
  },
  methods: {
    afterComplete(file) {
      console.log(file);
    }
  }
};
</script>

Now, save the file and try to upload an image. If everything is okay, then you will be able to save the image on the Laravel web server as well as save the name in the database as well.

You can also verify on the server side by checking the database entry and the images folder in which we have saved the image.

Step 7: More vue-dropzone configuration.

The only required options are url, but there are many more you can use.

For example, let’s say you want:

  • A maximum of 4 files
  • 2 MB max file size
  • Sent in chunks of 500 bytes
  • Set a custom thumbnail size of 150px
  • Make the uploaded items cancelable and removable (by default, they’re not)
export default {
  data: () => ({
    dropOptions: {
      url: "https://httpbin.org/post",
      maxFilesize: 5, // MB
      maxFiles: 5,
      chunking: true,
      chunkSize: 400, // Bytes
      thumbnailWidth: 100, // px
      thumbnailHeight: 100,
      addRemoveLinks: true
    }
  })
  // ...
}

Happy Coding !!!

Originally published at https://appdividend.com 

#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli

HI Python

HI Python

1640973720

Beyonic API Python Example Using Flask, Django, FastAPI

Beyonic API Python Examples.

The beyonic APIs Docs Reference: https://apidocs.beyonic.com/

Discuss Beyonic API on slack

The Beyonic API is a representational state transfer, REST based application programming interface that lets you extend the Beyonic dashboard features into your application and systems, allowing you to build amazing payment experiences.

With the Beyonic API you can:

  • Receive and send money and prepaid airtime.
  • List currencies and networks supported by the Beyonic API.
  • Check whether a bank is supported by the Beyonic API.
  • View your account transactions history.
  • Add, retrieve, list, and update contacts to your Beyonic account.
  • Use webhooks to send notifications to URLs on your server that when specific events occur in your Beyonic account (e.g. payments).

Getting Help

For usage, general questions, and discussions the best place to go to is Beyhive Slack Community, also feel free to clone and edit this repository to meet your project, application or system requirements.

To start using the Beyonic Python API, you need to start by downloading the Beyonic API official Python client library and setting your secret key.

Install the Beyonic API Python Official client library

>>> pip install beyonic

Setting your secrete key.

To set the secrete key install the python-dotenv modeule, Python-dotenv is a Python module that allows you to specify environment variables in traditional UNIX-like “.env” (dot-env) file within your Python project directory, it helps us work with SECRETS and KEYS without exposing them to the outside world, and keep them safe during development too.

Installing python-dotenv modeule

>>> pip install python-dotenv

Creating a .env file to keep our secrete keys.

>>> touch .env

Inside your .env file specify the Beyonic API Token .

.env file

BEYONIC_ACCESS_KEY = "enter your API "

You will get your API Token by clicking your user name on the bottom left of the left sidebar menu in the Beyonic web portal and selecting ‘Manage my account’ from the dropdown menu. The API Token is shown at the very bottom of the page.

getExamples.py

import os 
import beyonic
from dotenv import load_dotenv 

load_dotenv()

myapi = os.environ['BEYONIC_ACCESS_KEY']

beyonic.api_key = myapi 

# Listing account: Working. 
accounts = beyonic.Account.list() 
print(accounts)


#Listing currencies: Not working yet.
'''
supported_currencies = beyonic.Currency.list()
print(supported_currencies)

Supported currencies are: USD, UGX, KES, BXC, GHS, TZS, RWF, ZMW, MWK, BIF, EUR, XAF, GNF, XOF, XOF
'''

#Listing networks: Not working yet.
"""
networks = beyonic.Network.list()
print(networks)
"""

#Listing transactions: Working. 
transactions = beyonic.Transaction.list()
print(transactions) 

#Listing contact: Working. 
mycontacts = beyonic.Contact.list() 
print(mycontacts) 


#Listing events: Not working yet.
'''
events = beyonic.Event.list()
print(events)

Error: AttributeError: module 'beyonic' has no attribute 'Event'
'''

Docker file

FROM python:3.8-slim-buster

COPY . .

COPY ./requirements.txt ./requirements.txt

WORKDIR .

RUN pip install -r requirements.txt

CMD [ "python3", "getExamples.py" ]

Build docker image called demo

>>> docker build -t bey .

Run docker image called demo

>>>docker run -t -i bey 

Now, I’ll create a Docker compose file to run a Docker container using the Docker image we just created.


version: "3.6"
services:
  app:
    build: .
    command: python getExamples.py
    volumes:
      - .:/pythonBeyonicExamples

Now we are going to run the following command from the same directory where the docker-compose.yml file is located. The docker compose up command will start and run the entire app.


docker compose up

Output

NB: The screenshot below might differ according to your account deatils and your transcations in deatils.

docker compose up preview

To stop the container running on daemon mode use the below command.

docker compose stop

Output

docker compose preview

Contributing to this repository. All contributions, bug reports, bug fixes, enhancements, and ideas are welcome, You can get in touch with me on twitter @HarunMbaabu.

Download Details:
Author: HarunMbaabu
Source Code: https://github.com/HarunMbaabu/BeyonicAPI-Python-Examples
License: 

#api #python #flask #django #fastapi