Embedded Files
config.php
config.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "db1";
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
?>
getAll.php
getAll.php
<?php
include "config.php";
// FETCH ALL
$query = "SELECT * FROM users WHERE 1";
$userData = mysqli_query($con, $query);
$response = array();
while($row = mysqli_fetch_assoc($userData)){
$response[] = $row;
}
echo json_encode($response);
exit;
?>
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id='myapp'>
<h1 style="text-align: center;">One to one method</h1>
<!-- Select All records -->
<input type='button' @click='getAll()' value='Get all users'>
<br><br>
<!-- ADD User -->
<input type='text' v-model='username' placeholder="username..."><br>
<input type='text' v-model='name' placeholder="name..."><br>
<input type='text' v-model='email' placeholder="email..."><br>
<input type='button' @click='addUser()' value='Add User'><br><br><br><br>
<!-- UPDATE User -->
<input type='text' v-model='update_username' placeholder=""><br>
<input type='text' v-model='update_name' placeholder=""><br>
<input type='text' v-model='update_email' placeholder=""><br>
<input type='button' @click='updateUser()' value='Update User'><br><br><br>
<!-- List records -->
<table border='1' width='80%' style='border-collapse: collapse;'>
<tr>
<th>#</th>
<th>Id</th>
<th>Username</th>
<th>Name</th>
<th>Email</th>
<th>Delete</th>
<th>Update</th>
</tr>
<tr v-for='(user, idx) in users' :keys="user.email">
<td>{{ idx + 1 }}</td>
<td>{{ user.id }}</td>
<td>{{ user.username }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td v-on:click.prevent="delUser(user.id)">delete</td>
<td v-on:click.prevent="preUpdate(user)">pre-update</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#myapp',
data: {
users: [],
username:"",
name:"",
email:"",
update_id: "",
update_username:"",
update_name:"",
update_email:"",
},
methods: {
getAll(){
//alert('allUsers')
axios.post('getAll.php')
.then(function (response) {
app.users = response.data;
})
.catch(function (error) {
console.log(error);
});
},
delUser(id){
alert(id)
axios.post('delUser.php',{
id: id,
})
.then(function (response) {
app.getAll()
})
.catch(function (error) {
console.log(error);
});
},
addUser(){
axios.post('addUser.php',{
username: this.username,
name: this.name,
email: this.email
})
.then(function (response) {
app.getAll()
alert(response.data)
})
.catch(function (error) {
console.log(error);
});
},
preUpdate(user){
//alert('populating data...')
this.id = user.id
this.update_username = user.username
this.update_name = user.name
this.update_email = user.email
},
updateUser(){
axios.post('updateUser.php',{
id : this.id,
username : this.update_username,
name : this.update_name,
email : this.update_email,
})
.then(function (response) {
console.log({response})
app.getAll()
})
.catch(function (error) {
console.log(error);
});
},
}
})
</script>
</body>
</html>
Page updated
Report abuse