백엔드 질문좀 드릴게요
본문
if($action == 'read'){
$sql = $conn->query("SELECT * FROM users");
$users = array();
while($row = $sql->fetch_assoc()){
array_push($users, $row);
}
$result = $users;
}
if($action == 'create'){
$name = $_POST['name'];
$depositD = $_POST['depositD'];
$phone = $_POST['phone'];
$money = $_POST['money'];
$item = $_POST['item'];
$sql = $conn->query("INSERT INTO users (name,depositD,phone,money,item) VALUES('$name','$depositD','$phone','$money','$item')");
if($sql){
$result['message'] = "user added successfully!";
}
else{
$result['error'] = true;
$result['message'] = "failed to add user!";
}
}
create는 정상작동을 하는데 read는 정삭 작동을 하지 않습니다 궁금합니다ㅠㅠ
http://gohigh.dothome.co.kr/process.php?action=create
정상작동 하는데
http://gohigh.dothome.co.kr/process.php?action=read
작동을 하지 않네요
답변 3
vue.js는 잘 모르지만,
서버에서 보내는 것은 list인데
while($row = $sql->fetch_assoc()){
array_push($users, $row);
}
$result = $users;
디스플레이 쪽은 loop로 되어 있지 않네요.
<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>
먼저 $action이 read 냐 create 냐를 판별할려면
if if 문 보다
if elseif를 사용하세요.
$action == 'read' 블럭
array_push($users, $row) 이 부분에서
$row가 배열이기 때문에 예를 들어 name값을 얻고자 한다면
$row['name'] 로 하셔야 합니다.
$result 출력하는 부분 소스는 어떻게 되어 있나요?
<!--디스플레이 레코드-->
<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>
<script>
var app = new Vue({
el: "#app ",
data: {
errorMsg: "",
successMsg: "",
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
users: [],
newUser: {
name: "",
depositD: "",
phone: "",
item: "",
money: ""
},
currentUser: {}
},
mounted: function() {
this.getAllUsers();
},
methods: {
getAllUsers() {
axios.get("http://gohigh.dothome.co.kr/process.php?action=read").then(function(response) {
if (response.data.error) {
app.errorMsg = response.data.message;
} else {
app.users = response.data.users;
}
});
},
addUser() {
var formData = app.toFormData(app.newUser);
axios.post("http://gohigh.dothome.co.kr/process.php?action=create", formData).then(function(response) {
app.newUser = {
name: "",
depositD: "",
phone: "",
item: "",
money: ""
};
if (response.data.error) {
app.errorMsg = response.data.message;
} else {
app.successMsg = response.data.message;
app.getAllUsers();
}
});
},
updateUser() {
var formData = app.toFormData(app.currentUser);
axios.post("http://gohigh.dothome.co.kr/process.php?action=update", formData).then(function(response) {
app.currentUser = {};
if (response.data.error) {
app.errorMsg = response.data.message;
} else {
app.successMsg = response.data.message;
app.getAllUsers();
}
});
},
deleteUser() {
var formData = app.toFormData(app.currentUser);
axios.post("http://gohigh.dothome.co.kr/process.php?action=delete", formData).then(function(response) {
app.currentUser = {};
if (response.data.error) {
app.errorMsg = response.data.message;
} else {
app.successMsg = response.data.message;
app.getAllUsers();
}
});
},
toFormData(obj) {
var fd = new FormData();
for (var i in obj) {
fd.append(i, obj[i]);
}
return fd;
},
selectUser(user) {
app.currentUser = user;
},
clearMsg() {
app.errorMsg = "";
app.successMsg = "";
}
}
});
</script>
