How To Import Data From Mysql Database To Vuejs Template

Data selection is one of the basic requirements when creating a dynamic website.

Mainly information is fetched from the database on page refresh but without folio refresh crave to send AJAX request.

I am using the Axios package to send the AJAX request.

In this tutorial, I evidence how you can fetch records from MySQL database using Vue.js and PHP with the Axios package.

Fetch records from MySQL Database with Vue.js and PHP

Table structure
Configuration
Download & Include
HTML
PHP
Script
Demo
Decision

1. Table structure

I am using users table in the example.

CREATE TABLE `users` (   `id` int(11) NOT NULL Primary Fundamental AUTO_INCREMENT,   `username` varchar(100) NOT NULL,   `name` varchar(100) Non NULL,   `e-mail` varchar(100) Not Zilch ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file for the database configuration.

Completed Code

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

iii. Download & Include

Download Axios package from GitHub. or you can likewise utilise CDN (https://unpkg.com/axios/dist/axios.min.js).
Now, include axios.min.js with vue.js in the <head> section.

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

4. HTML

Create ii buttons and a textbox.

On the starting time button define @click='allRecords()' and on the second define @click='recordByID()' events.

Add v-model='userid' in the textbox.

Use v-for='user in users' on <tr> to listing records.

The first button is used to transport a Get request without a parameter.
The 2nd push button is used to ship a Get asking with parameters.

Completed Code

<div id='myapp'>     <!-- Select All records -->   <input type='push' @click='allRecords()' value='Select All users'>   <br><br>    <!-- Select record by ID -->   <input type='text' v-model='userid' placeholder="Enter Userid betwixt 1 - 24">   <input type='button' @click='recordByID()' value='Select user by ID'>   <br><br>    <!-- List records -->   <table border='1' width='80%' style='border-collapse: collapse;'>     <tr>       <th>Username</th>       <th>Name</th>       <th>Email</thursday>     </tr>      <tr v-for='user in users'>       <td>{{ user.username }}</td>       <td>{{ user.name }}</td>       <td>{{ user.electronic mail }}</td>     </tr>   </tabular array>   </div>

5. PHP

Create a new ajaxfile.php.

Fetch records from the users tabular array and initialize $response Array.

Assign " id =".$_GET['userid'] to $where if $_GET['userid'] is passed.

Return $response in JSON response.

Completed Code

<?php include "config.php";  $condition = "ane"; if(isset($_GET['userid'])){    $condition = " id=".$_GET['userid']; } $userData = mysqli_query($con,"select * from users WHERE ".$condition);  $response = array();  while($row = mysqli_fetch_assoc($userData)){     $response[] = $row; }  echo json_encode($response); exit;

six. Script

Syntax – Axios GET asking without parameter –

axios.get('path') .then(function(response){    // Handle response }).catch(role(error){    // Fault handling });

Syntax – Axios GET request with parameter –

axios.become('path',{   params:{      parameter1: value,      parameter2: value,      ....    } }) .then(part(response){    // Handle response }).take hold of(office(error){    // Error handling });

axios.go('path?variable1=value1&variable2=value2&...') .and then(function(response){    // Handle response }).catch(function(error){    // Error handling });

Define ii variable users and userid.

Define 2 methods –

allRecords – Send AJAX asking to fetch all records and assign response.data to app.users. Here, app.users pointing to defined information variable.
recordByID – Pass the textbox value this.userid in params: { userid: this.userid }. Assign response.information in app.users on successful callback.

Completed Lawmaking

var app = new Vue({   el: '#myapp',   data: {     users: "",     userid: 0   },   methods: {     allRecords: role(){        axios.go('ajaxfile.php')       .then(part (response) {          app.users = response.data;       })       .catch(role (error) {          panel.log(error);       });     },     recordByID: function(){       if(this.userid > 0){           axios.become('ajaxfile.php', {            params: {              userid: this.userid            }         })         .then(function (response) {            app.users = response.information;         })         .catch(function (error) {            console.log(error);         });       }     }   } })

7. Demo

View Demo

8. Decision

Use params selection to pass information to AJAX asking or you can directly pass it with the path.

If you found this tutorial helpful then don't forget to share.

Are you desire to get implementation help, or change or extend the functionality of this script? Submit paid service asking.