• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

laravel & vue.js

0 głosów
144 wizyt
pytanie zadane 2 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,460 p.)

Witam, w celach naukowych napisałem prosty kod do oceniania i obserwowania artykułów, wszystko działa jednak teraz nie wiem jak ogarnąć tego drugą część. Mam taki kod:

<template>
    <div class="menagment-view-article-vjs">
        <i id="followArticle" @click="followArticle" title="Obserwuj" class="icon-star-1 icon-menagment-view-article"></i>
        <i id="likeUp" @click="likeUpArticle" title="Podoba mi się" class="icon-thumbs-up icon-menagment-view-article"></i>
        <i id="likeDown" @click="likeDownArticle" title="Nie podoba mi się" class="icon-thumbs-down icon-menagment-view-article"></i>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                follow: {
                    id_article: '1',
                    type: 'Article',
                },
                likeUp: {
                    id_article: '1',
                    type: 'Article',
                    opinion: '1',
                },
                likeDown: {
                    id_article: '1',
                    type: 'Article',
                    opinion: '0',
                },
                errors: []
            }
        },
        methods: {
            followArticle()
            {
                axios.post('/follows', {
                    id_article: this.follow.id_article,
                    type: this.follow.type,
                })
                    .then(response => {
                        this.reset();
                    });
            },
            likeUpArticle(){
                axios.post('/opinions', {
                    id_article: this.likeUp.id_article,
                    type: this.likeUp.type,
                    opinion: this.likeUp.opinion,
                })
                    .then(response => {
                        this.reset();
                    });
            },
            likeDownArticle(){
                axios.post('/opinions', {
                    id_article: this.likeDown.id_article,
                    type: this.likeDown.type,
                    opinion: this.likeDown.opinion,
                })
                    .then(response => {
                        this.reset();
                    });
            },
            reset()
            {
                this.follow.id_article = '';
                this.follow.type = '';
                this.likeUp.id_article = '';
                this.likeUp.type = '';
                this.likeUp.opinion = '';
                this.likeDown.id_article = '';
                this.likeDown.type = '';
                this.likeDown.opinion = '';
            },
        }
    }
</script>

<style scoped>

</style>

udaje się likować i obserwować artykuły i o to chodziło. Teraz chciałbym aby kiedy już użytkownik kliknie gwiazdkę "obserwuj" i zacznie obserwować dany artykuł ta zmieniła się na pełną oraz po ponownym kliknięciu użytkownik mógł przestać obserwować ten artykuł, podobnie z ocenami. W jaki sposób można to osiągnąć?

1 odpowiedź

+2 głosów
odpowiedź 2 czerwca 2018 przez BT101 Stary wyjadacz (10,590 p.)
wybrane 2 czerwca 2018 przez mi-20
 
Najlepsza

W data ustaw sobie jakąś zmienną typu boolean i nadaj jej na początku false. Na sukces tego backend calla przestawiaj ją na true i za pomocą tej zmiennej boolean binduj style, które "wypełnią" ci gwiazdke.

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

Jeśli chodzi o przestanie obserwowania po ponownym kliknięciu to również możesz użyć tej zmiennej boolean i jeśli jest ustawiona na true, czyli user już kliknął ten element to wysyłasz request pod inny URL, na inny endpoint. Wystarczy zwykły if. (czy tam na ten sam url ale metodę DELETE nie POST, zależnie od twojego API)

Dodatkowo jak robisz jakiś call, który pobiera cały artykuł to backend powinien wystawiać również informacje, że user obserwuje i jeśli obserwuje to również zmienić tą zmienną boolean na true tak aby user bo przeładowaniu miał dalej gwiazdkę "zapełnioną" a także żeby miał opcje usunięcia obserwacji.
 
A btw nie używaj <i> do ikonek bo ten tag z tego co się orientuje to kiedyś był używany do pochylenia tekstu obecnie jest bodajże zdeprecjonowany, na pewno nie ma nic wspólnego z ikonkami. Lepiej dać ikonkę jako span a podobno najlepiej jako svg. Chociaż w tym wypadku gdzie ta ikonka jest konieczna do działania to może lepiej by było użyć img z altem.

PS: ciekawe, że ci to działa bo jak ja ostatnio robiłem Axios -> PHP REST API to musiałem używać 

let params = new URLSearchParams();
params.append('nick', this.loginNickMail);
axios.post('/api/auth/doLogin.php', params, axiosConfig)

bo w innym wypadku w PHP nie widział POSTów :D

komentarz 2 czerwca 2018 przez mi-20 Stary wyjadacz (10,460 p.)

ok, dzięki, zrozumiałem. Jeszcze tylko dwa szybkie pytania:

1.możesz mi na napisać (kawałek kodu) jak dodać  zmienną typu boolean w data i jak ją potem zamienić,

2. jak pobrać właśnie klikanego artykułu, no bo obecnie ustawiłem sobie stałem id ale tak nie może być, można by chyba zrobić coś takiego. W .blade.php dać

<view-article :article="{{$article}}"><view-article>
<span id="followArticle" @click="followArticle(article.id)" title="Obserwuj" class="icon-star-1 icon-menagment-view-article"></span>

tylko jak to id odebrać?

komentarz 2 czerwca 2018 przez BT101 Stary wyjadacz (10,590 p.)

Nie wiem jaką konkretnie masz architekturę aplikacji i jaką masz wiedzę na temat vue ale tak:

jak masz strone kategorii (czyli tam gdzie wyświetlasz listę artykułów) wyświetlasz listę artykułów prawdopodobnie używając dyrektywy v-for. Do każdego artykułu w pętli wyświetlasz router link. Binduj sobie tego linka czyli coś takiego:

<router-link :to="{ name: 'article', params: { id: n.id }}">

Przeniesie cię to do URLa, który musisz uchwycić w swoim routingu

{
       path: '/article/:id',
       name: 'article',
       component: article
},

oczywiście wcześniej musisz zaimportować komponent article (nie będę ci tłumaczył tutaj całego vue).

Wtedy w komponencie article w data() możesz "zebrać" z URLa to ID a następnie zrobić backend calla, GETa, który przekaże id:

data() {
    return {
        articles: [],
        errors: [],
        articleId: this.$route.params.id
    }
},
async created() {
    try {
        const response = await axios.get(`/api/article/getOne.php?id=`+this.articleId, axiosConfig);
        this.articles = response.data.records;
        console.log(this.articles);
    } catch (e) {
        this.errors.push(e);
        console.log(this.errors);
    }
}

następnie już po stronie backendu zbierasz sobie ten przekazany id w pliku, który callnąłeś jak masz OOP to np. tak:

if(isset($_GET['id'])) {
    $article = new article($db);
    $article->id = $_GET['id'];
}

chociaż u Ciebie będzie to wyglądało troche inaczej bo używasz laravela i masz tam jakiś routing. Jak już zbierzesz ten id w ten sposób $_GET['id']; to podstawiasz go do zapytania SQL. Użyj PDO żeby uniknąć SQL injection, ale laravel chyba domyślnie używa PDO.

A co do pierwszego pytania to po prostu:

data () {
    return {
        myBool: false 
    }
}

no a później sobie zmieniasz użwając this.myBool tak samo jak w twojej funkcji reset.. To są już bardzo podstawy Vue2JS więc zastanawiam się czy nie łatwiej by Ci było przerobić jakiś porządny tutorial ale co ja tam wiem.. Pozdrawiam:)

 

Podobne pytania

0 głosów
0 odpowiedzi 126 wizyt
pytanie zadane 28 maja 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,460 p.)
+1 głos
3 odpowiedzi 671 wizyt
pytanie zadane 27 grudnia 2017 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,460 p.)
0 głosów
1 odpowiedź 55 wizyt
pytanie zadane 27 maja w PHP, Symfony, Zend przez mi-20 Stary wyjadacz (10,460 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

66,319 zapytań

113,057 odpowiedzi

239,193 komentarzy

46,585 pasjonatów

Przeglądających: 145
Pasjonatów: 2 Gości: 143

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...