Retrieve Data From MySQL Database using Vue.js PHP

Retrieve Data From MySQL Database using Vue.js PHP

Today, We want to share with you Retrieve Data From MySQL Database using Vue.js PHP.In this post we will show you How to Read Data From Database Using Vue and Axios, hear for Vue.js Fetch Data from MySQL Database using PHP we will give you demo and example for implement.In this post, we will learn about PHP with Vue.js & MySQL: REST API CRUD Tutorial with an example.

Retrieve Data From MySQL Database using Vue.js PHP

There are the Following The simple About Retrieve Data From MySQL Database using Vue.js PHP Full Information With Example and source code.

As I will cover this Post with live Working example to develop PHP with Vue.js & MySQL, so the how to use vue js in php for this example is following below.

  Insert Data Into Database using Vue.js with PHP Mysql

1. Database MySQL Table structure

CREATE TABLE `products` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `productname` varchar(100) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

config.php

<?php

$host = "localhost"; 
$product = "root"; 
$password = ""; 
$dbname = "pakainfo"; 

$con = mysqli_connect($host, $product, $password,$dbname);
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

Step 1: Include vuejs library

At first we need to include vuejs Latest library file.

axios.min.js with vue.js

https://unpkg.com/axios/dist/axios.min.js
<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Step 2: JavaScript/vuejs Source Code:

This file All the Data contains the following JavaScript/vuejs Source codes.

var app = new Vue({
  el: '#myapp',
  data: {
    products: "",
    productid: 0
  },
  methods: {
    allRecords: function(){

      axios.get('ajaxproductfile.php')
      .then(function (product_results) {
         app.products = product_results.data;
      })
      .catch(function (error) {
         console.log(error);
      });
    },
    recordByID: function(){
      if(this.productid > 0){
 
        axios.get('ajaxproductfile.php', {
           params: {
             productid: this.productid
           }
        })
        .then(function (product_results) {
           app.products = product_results.data;
        })
        .catch(function (error) {
           console.log(error);
        });
      }
    }
  }
})

Step 3: HTML Source Code:

This file contains the following HTML Markup Source codes.

  How to Configure Virtual Host in XAMPP

<div id='myapp'>
 
  <!-- Select All product records -->
  <input type='button' @click='allRecords()' value='Select All products'>
  <br><br>

  <!-- Select product record by ID -->
  <input type='text' v-model='productid' placeholder="Enter Userid between 1 - 24">
  <input type='button' @click='recordByID()' value='Select product by ID'>
  <br><br>

  <!-- List product records -->
  <table border='1' width='80%' style='border-collapse: collapse;'>
    <tr>
      <th>Product name</th>
      <th>Name</th>
      <th>Email</th>
    </tr>

    <tr v-for='product in products'>
      <td>{{ product.productname }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.email }}</td>
    </tr>
  </table>
 
</div>

Step 4: PHP Source Code

Following PHP Source codes are used for Fetching Data from a Third-party API with Vue.js and Axios.

<?php
//db Connection
include "config.php";

$condition = "1";
if(isset($_GET['userid'])){
   $condition = " id=".$_GET['userid'];
}
$productData = mysqli_query($con,"select * from users WHERE ".$condition);

$product_results = array();

while($row = mysqli_fetch_assoc($productData)){

   $product_results[] = $row;
}

echo json_encode($product_results);
exit;

Angular 6 CRUD Operations Application Tutorials

Read :

  Laravel 6 Custom Authentication System

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Retrieve Data From MySQL Database using Vue.js PHP.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.