https://vuejs.org/
Axios is a promise-based HTTP Client for node.js and the browser. https://axios-http.com/docs/intro using Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js https://axios-http.com/docs/post_example
CREATE TABLE `employee` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`position` varchar(100) NOT NULL,
`office` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`salary` int(11) NOT NULL,
`photo` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `employee` (`id`, `name`, `position`, `office`, `age`, `salary`, `photo`) VALUES
(1, 'Tiger Wood', 'Accountant', 'Tokyo', 36, 5689, '01.jpg'),
(2, 'Mark Oto Ednalan', 'Chief Executive Officer (CEO)', 'London', 56, 5648, '02.jpg'),
(3, 'Jacob thompson', 'Junior Technical Author', 'San Francisco', 23, 5689, '03.jpg'),
(4, 'cylde Ednalan', 'Software Engineer', 'Olongapo', 23, 54654, '04.jpg'),
(5, 'Rhona Davidson', 'Software Engineer', 'San Francisco', 26, 5465, '05.jpg'),
(6, 'Quinn Flynn', 'Integration Specialist', 'New York', 53, 56465, '06.jpg'),
(8, 'Tiger Nixon', 'Software Engineer', 'London', 45, 456, '07.jpg'),
(9, 'Airi Satou updated', 'Pre-Sales Support updated', 'New York', 25, 4568, '08.jpg'),
(10, 'Angelica Ramos updated', 'Sales Assistant updated', 'New York', 45, 456, '09.jpg'),
(11, 'Ashton updated', 'Senior Javascript Developer', 'Olongapo', 45, 54565, '01.jpg'),
(12, 'Bradley Greer', 'Regional Director', 'San Francisco', 27, 5485, '02.jpg'),
(13, 'Brenden Wagner', 'Javascript Developer', 'San Francisco', 38, 65468, '03.jpg'),
(14, 'Brielle Williamson', 'Personnel Lead', 'Olongapo', 56, 354685, '04.jpg'),
(15, 'Bruno Nash', 'Customer Support', 'New York', 36, 65465, '05.jpg'),
(16, 'cairocoders', 'Sales Assistant', 'Sydney', 45, 56465, '06.jpg'),
(17, 'Zorita Serrano', 'Support Engineer', 'San Francisco', 38, 6548, '07.jpg'),
(18, 'Zenaida Frank', 'Chief Operating Officer (COO)', 'San Francisco', 39, 545, '08.jpg'),
(19, 'Sakura Yamamoto', 'Support Engineer', 'Tokyo', 48, 5468, '05.jpg'),
(20, 'Serge Baldwin', 'Data Coordinator', 'Singapore', 85, 5646, '05.jpg'),
(21, 'Shad Decker', 'Regional Director', 'Tokyo', 45, 4545, '05.jpg');
ALTER TABLE `employee`
ADD PRIMARY KEY (`id`);
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
fetchdata.php
//fetchdata.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js PHP fetchAll Data from Mysql Database</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="fetchAlldiv">
<br />
<h3 align="center">Vue.js PHP fetchAll Data from Mysql Database</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<h3 class="panel-title"> Employee Records</h3>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr v-for="row in allData">
<td>{{ row.name }}</td>
<td>{{ row.position }}</td>
<td>{{ row.office }}</td>
<td><button type="button" name="edit" class="btn btn-primary btn-xs edit">Edit</button></td>
<td><button type="button" name="delete" class="btn btn-danger btn-xs delete">Delete</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script src="js_fetchdata.js"></script>
</body>
</html>
js_fetchdata.js
//js_fetchdata.js
var application = new Vue({
el:'#fetchAlldiv',
data:{
allData:'',
},
methods:{
fetchAllData:function(){ //show records
axios.post('fetchall.php', {
action:'fetchall'
}).then(function(response){
application.allData = response.data;
});
}
},
created:function(){
this.fetchAllData();
}
});
fetchall.php
//fetchall.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
$received_data = json_decode(file_get_contents("php://input"));
$data = array();
if($received_data->action == 'fetchall') //axios.post('fetchall.php', { action:'fetchall'
{
$query = "
SELECT * FROM employee
ORDER BY id DESC
";
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
