Ich arbeite an einem Like/Dislike-System für Laravel/VueJS.
Mein System funktioniert, aber ich möchte Spammer vermeiden.
Like-Button:
<a v-on:click="like(10, $event)">
<i class="fas fa-heart"></i>
</a>
10 ist die Beitrags-ID, sie wird in Laravel Blade generiert...
So versuche ich Spammer zu vermeiden:
const app = new Vue({
el: '#app',
data() {
return {
allowed: true,
};
},
methods: {
like: function (id, event) {
if (this.allowed) {
axios.post('/posts/' + id + '/like', {
post_id: id,
})
.then((response) => {
this.allowed = false; //Set allowed to false, to avoid spammers.
..... code which changes fa-heart, changes class names, texts etc ....
// send notification to user
Vue.toasted.show('Bla bla bla successfuly liked post', {
duration: 2000,
onComplete: (function () {
this.allowed = true //After notification ended, user gets permission to like/dislike again.
})
});
Aber hier fehlt etwas, oder ich mache etwas falsch. Wenn ich sehr, sehr schnell auf ein ähnliches Symbol klicke und die Anfragen überprüfe, sendet Axios 3-4-5 Anfragen (je nachdem, wie schnell Sie klicken)
Erst nach 3-5 Anfragen data.allowed 才会变成 false. Warum? Ich möchte:
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
this.allowed = false；会一直被调用，直到 API 调用完成，这样您就可以在这段时间内发送更多垃圾邮件。 验证if(this.allowed)后立即将其设置为false。if (this.allowed) { this.allowed = false; // Then do the call }like: function (id, event) { // first, check if the `like` can be sent to server if (!this.allowed) return; // remember that we are sending request, not allowed to `like` again this.allowed = false; var self = this; // you need this to remember real this axios.post('/posts/' + id + '/like', { post_id: id, }).then((response) => { ..... code .... // send notification to user Vue.toasted.show('Bla bla bla successfuly liked post', { duration: 2000, onComplete: function () { //After notification ended, user gets permission to like/dislike again. self.allowed = true; } ); }).catch(function() { // maybe you also need this catch, in case network error occurs self.allowed = true; }) ....