Laravel 从api到vue视图缓慢获取数据的问题
我对从laravel api到vue view的数据获取速度非常慢有异议,我做了以下教程:Laravel 从api到vue视图缓慢获取数据的问题,laravel,api,vue.js,Laravel,Api,Vue.js,我对从laravel api到vue view的数据获取速度非常慢有异议,我做了以下教程: import axios from 'axios'; const client = axios.create({ baseURL: '/api', }); export default { all(params) { return client.get('users', params); }, find(id) { return clie
import axios from 'axios';
const client = axios.create({
baseURL: '/api',
});
export default {
all(params) {
return client.get('users', params);
},
find(id) {
return client.get(`users/${id}`);
},
update(id, data) {
return client.put(`users/${id}`, data);
},
delete(id) {
return client.delete(`users/${id}`);
},
};
<script>
import api from "../api/users";
export default {
data() {
return {
message: null,
loaded: false,
saving: false,
user: {
id: null,
name: "",
email: ""
}
};
},
methods: {
onDelete() {
this.saving = true;
api.delete(this.user.id).then(response => {
this.message = "User Deleted";
setTimeout(() => this.$router.push({ name: "users.index" }), 1000);
});
},
onSubmit(event) {
this.saving = true;
api
.update(this.user.id, {
name: this.user.name,
email: this.user.email
})
.then(response => {
this.message = "User updated";
setTimeout(() => (this.message = null), 10000);
this.user = response.data.data;
})
.catch(error => {
console.log(error);
})
.then(_ => (this.saving = false));
}
},
created() {
api.find(this.$route.params.id).then(response => {
this.loaded = true;
this.user = response.data.data;
});
}
};
</script>
从api加载数据的速度非常慢,我首先看到视图中的空输入,然后在短时间内看到数据,如果我从laravel打开api数据,我会立即看到数据,所以我的问题是如何加快加载速度?或者可能是我做错了什么?每当我在Vue中使用API时,我通常在打开Vue然后像这样传入之前进行大多数API调用
<vue-component :user="'{!! $user_data !!}'"></vue-component>
这也是一个关于Axios以及如何在Vue中使用HTTP请求的好教程
希望这能回答你的问题,祝你好运 这在生产构建中也会发生吗?我在开发模式下也有类似的问题,我想这是网页包开发服务器的限制。不,这是开发模式,我使用npm run watch或npm run dev或npm run prod,我使用homestead server,当我有homestead时,如何在生产中检查它?或者你知道一些免费或便宜的serwer for laravel和vue?我尝试了netifly,但它与laravel不起作用
export default {
mounted() {
api.find(this.$route.params.id).then(response => {
this.loaded = true;
this.user = response.data.data;
});
}
}