我在获取更新mysql数据库的表单时遇到问题。目前我没有收到任何错误，Vuetify数据表运行正常(添加、更新和删除用户(。数据只是没有持久化到数据库中，并且(显然(在刷新页面时会消失。
我正在使用Vue、Vuetify、axios、MySQL，并且目前只在本地服务器上(Wamp(。
这是main.js:
import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import router from './router';
import GoogleSignInButton from 'vue-google-signin-button-directive';
Vue.config.productionTip = false
new Vue({
GoogleSignInButton,
vuetify,
router,
render: h => h(App)
}).$mount('#app')
我的app.vue中只有导航组件、路由器标签和一些全局样式：
<template>
<v-app>
<Nav />
<v-main class="ml-14 mt-14 px-5 pt-0">
<v-container fluid app class="full-height">
<v-row justify="start" align="start" class="full-height">
<router-view></router-view>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
import Nav from "./components/Nav";
export default {
name: "App",
components: {
Nav,
},
data: () => ({
}),
};
</script>
<style lang="scss">
#inspire,
.full-width {
width: 100%;
}
.full-height {
height: 100%;
}
.capitalize {
text-transform: capitalize;
}
</style>
以下是/components/Users.vue:的脚本
import axios from "axios";
export default {
data: () => ({
dialog: false,
headers: [
{
text: "First Name",
align: "start", //Aligns the items to the beginning of the column. Can change to center or end.
value: "firstname",
},
{ text: "Last Name", value: "lastname" },
{ text: "School", value: "school" },
{ text: "Email", value: "email" },
{ text: "Phone Number", value: "phone" },
{ text: "Primary View", value: "primary_view" },
{ text: "Tutor Role", value: "tutor_role" },
{ text: "Principal Role", value: "principal_role" },
{ text: "Admin Role", value: "admin_role" },
{ text: "Actions", value: "actions", sortable: false },
],
users: [],
schools: [
"School 1",
"School 2",
"School 3",
],
primary_view: ["Tutor", "Principal", "Admin"],
tutor_role: true,
principal_role: false,
admin_role: false,
editedIndex: -1,
editedItem: {
firstname: "",
lastName: "",
school: "",
email: "",
phone: "",
primary_view: "Tutor",
tutor_role: "true",
principal_role: "false",
admin_role: "false",
},
defaultItem: {
firstname: "",
lastName: "",
school: "",
email: "",
phone: "",
primary_view: "Tutor",
tutor_role: "true",
principal_role: "false",
admin_role: "false",
},
}),
computed: {
formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item";
},
},
watch: {
dialog(val) {
val || this.close();
},
},
created() {
this.initialize();
},
methods: {
allRecords: function() {
axios
.post("db/users.php", {
request: 1,
})
.then((response) => {
console.log(response.data);
this.users = response.data;
})
.catch((error) => {
console.log(error);
});
},
initialize() {
this.allRecords();
},
editItem(item) {
this.editedIndex = this.users.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
deleteItem(item) {
const index = this.users.indexOf(item);
confirm("Are you sure you want to delete this item?") &&
this.users.splice(index, 1);
console.log("You have deleted a row.");
axios
.delete("db/ajaxfile.php", {
request: 4,
})
.then(function(response) {
console.log(response.data);
this.users = response.data;
})
.catch(function(error) {
console.log(error);
});
},
close() {
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
save() {
if (this.editedIndex > -1) {
console.log("You have edited the data.");
axios
.put("db/ajaxfile.php", {
request: 3,
firstname: this.editedItem.firstname,
lastname: this.editedItem.lastname,
school: this.editedItem.school,
email: this.editedItem.email,
phone: this.editedItem.phone,
primary_view: this.editedItem.primary_view,
tutor_role: this.editedItem.tutor_role,
principal_role: this.editedItem.principal_role,
admin_role: this.editedItem.admin_role,
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
Object.assign(this.users[this.editedIndex], this.editedItem);
} else {
console.log("You have created a new row.");
axios
.post("db/ajaxfile.php", {
request: 2,
firstname: this.editedItem.firstname,
lastname: this.editedItem.lastname,
school: this.editedItem.school,
email: this.editedItem.email,
phone: this.editedItem.phone,
primary_view: this.editedItem.primary_view,
tutor_role: this.editedItem.tutor_role,
principal_role: this.editedItem.principal_role,
admin_role: this.editedItem.admin_role,
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
this.users.push(this.editedItem);
}
this.close();
},
},
};
以下是处理数据库请求的ajaxfile.php文件(有一个config.php文件连接到数据库(：
<?php
include "config.php";
$data = json_decode(file_get_contents("php://input"));
$request = $data->request;
// Fetch All records
if($request == 1){
$userData = mysqli_query($con,"select * from users order by lastname asc");
$response = array();
while($row = mysqli_fetch_assoc($userData)){
$response[] = $row;
}
echo json_encode($response);
exit;
}
// Add record
if($request == 2){
$firstname = $data->firstname;
$lastname = $data->lastname;
$school = $data->school;
$email = $data->email;
$phone = $data->phone;
$primary_view = $data->primary_view;
$tutor_role = $data->tutor_role;
$principal_role = $data->principal_role;
$admin_role = $data->admin_role;
$userData = mysqli_query($con,"SELECT * FROM users WHERE email='".$email."'");
if(mysqli_num_rows($userData) == 0){
mysqli_query($con,"INSERT INTO users(firstname,lastname,school,email,phone,primary_view,tutor_role,principal_role,admin_role) VALUES('".$firstname."','".$lastname."','".$school."','".$email."','".$phone."','".$primary_view."','".$tutor_role."','".$principal_role."','".$admin_role."')");
echo "Insert was successful.";
}else{
echo "Email already exists.";
}
exit;
}
// Update record
if($request == 3){
//$id = $data->id;
$firstname = $data->firstname;
$lastname = $data->lastname;
$school = $data->school;
$email = $data->email;
$phone = $data->phone;
$primary_view = $data->primary_view;
$tutor_role = $data->tutor_role;
$principal_role = $data->principal_role;
$admin_role = $data->admin_role;
mysqli_query($con,"UPDATE users SET firstname='".$firstname."',lastname='".$lastname."',school='".$school."',email='".$email."',phone='".$phone."',primary_view='".$primary_view."',tutor_role='".$tutor_role."',principal_role='".$principal_role."',admin_role='".$admin_role."' WHERE id=".$id);
echo "Update was successful.";
exit;
}
// Delete record
if($request == 4){
//$id = $data->id;
mysqli_query($con,"DELETE FROM users WHERE id=".$id);
echo "Delete was successful.";
exit;
}
这是config.php：
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "project_db"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
当我尝试添加一个虚拟用户时，控制台中不会出现任何错误。网络下的标题为：
General:
Request URL: http://vbsd/db/ajaxfile.php
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:80
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Connection: Keep-Alive
Content-Length: 22
Content-Type: text/html; charset=UTF-8
Date: Sat, 18 Jul 2020 18:54:50 GMT
Keep-Alive: timeout=5, max=100
Server: Apache/2.4.39 (Win64) PHP/7.3.5
X-Powered-By: PHP/7.3.5
Request Headers:
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 184
Content-Type: application/json;charset=UTF-8
Host: vbsd
Origin: http://vbsd
Referer: http://vbsd/stats
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
Request Payload
{request: 2, firstname: "aaa", lastname: "aaa", school: "Central", email: "aaa", phone: "222",…}
admin_role: "false"
email: "aaa"
firstname: "aaa"
lastname: "aaa"
phone: "222"
primary_view: "Tutor"
principal_role: "false"
request: 2
school: "Central"
tutor_role: "true"
我觉得我错过了一些显而易见的东西，但我一直想不出是什么。如有任何帮助或指导，我们将不胜感激！
我看到您使用了PUT、DELETE、POST请求，但没有GET来获取数据库？换句话说，在数据库进行的每一次更改中都缺少fetchData方法。
假设每次您在.then中收到response时，您都应该允许您的应用程序fetchData()在每次操作中通过GET从数据库mysql进行，类似于AJAX中的操作，如果您不想刷新页面。
p/S类似console.log("You have edited the data.");的console.logs在执行axios方法之前不会证明任何东西，控制台应该放在.then下
.then(function(response) {
console.log("You have REALLY updated the data in database.");
console.log(response);
})
最后，如果您希望使用POST来获取所有更新的记录，您只需执行以下操作：
.then(function(response) {
console.log(response);
this.allRecords(); //fetchTask again
})