==============================================================================
index.html
==============================================================================
<html>
<head>
<title>뷰와 Axios 그리고 Mysql연동</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/42e2ecb8e0.js" crossorigin="anonymous"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="getData">프레임워크 목록 가져오기</button>
<div class="container-fluid">
<div class="row bg-dark">
<div class="col-lg-12">
<p class="text-center text-light display-4 pt-2" style="font-size: 25px">
웹 어플리케이션 vue, PHP, mysqli
</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-3">
<div class="col-lg-6">
<h3 class="text-info">회원리스트</h3>
</div>
<div class="col-lg-6">
<button class="btn btn-info float-right" >
<i class="fas fa-user"></i> 추가
</button>
<button class="btn btn-info float-right" v-on:click="getAllUsers">디비테스트로드</button>
</div>
</div>
<hr class="bg-info" />
<div class="alert alert-danger" v-if="errorMsg">{{ errorMsg }}</div>
<div class="alert alert-success" v-if="successMsg">{{ successMsg }} </div>
<!--디스플레이 레코드-->
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center bg-info text-light">
<th>ID</th>
<th>이름</th>
<th>이메일</th>
<th>핸드폰</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<tr class="text-center" v-for="user in users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
<td>
<a href="#" class="text-success" @click="showEditModal=true; selectUser(user);"><i class="fas fa-edit"></i></a>
</td>
<td>
<a href="#" class="text-danger" @click="showDeleteModal=true; selectUser(user);"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data:
{
errorMsg: "",
successMsg: "",
users: [],
},
methods: {
getData: function() {
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log(response);
});
},
getAllUsers()
{
var vm = this;
axios.get("http://localhost/vue/process.php?action=read").then(function(response) {
if (response.data.error) {
vm.errorMsg = response.data.message;
console.log(app.errorMsg);
} else {
vm.users = response.data.users;
console.log(response.data.users);
console.log(app.users);
}
});
}
}
});
</script>
</body>
</html>
==============================================================================
process.php
==============================================================================
<?php
$conn = new mysqli("localhost", "root", "qwer", "crud_vue");
if($conn->connect_error){
die("Connection Failed!".$conn->connect_error);
}
//echo("Success");
$result = array('error'=>false);
$action = '';
if(isset($_GET['action'])){
$action = $_GET['action'];
}
if($action == 'read'){
$sql = $conn->query("SELECT * FROM tb_member");
$users = array();
while($row = $sql->fetch_assoc()){
array_push($users, $row);
}
$result['users'] = $users;
}
$conn->close();
echo json_encode($result);
?>
'Vue.js' 카테고리의 다른 글
| vue.js mysql 연동하기 5 / 처음에 DB 조회 마운트에 올리기 (0) | 2023.06.14 |
|---|---|
| vue.js mysql 연동하기 4 / 테이블연동하기 통신시 CORS 에러해결하기 (policy: No 'Access-Control-Allow-Origin') (0) | 2023.06.14 |
| vue.js mysql 연동하기 2 / DB및 테이블 생성하기 (0) | 2023.06.14 |
| vue.js mysql 연동하기 1 (0) | 2023.06.14 |
| Vue.js 06-08 (0) | 2023.06.09 |