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

vue.js GET, POST

VPS Starter Arubacloud
0 głosów
860 wizyt
pytanie zadane 4 listopada 2017 w JavaScript przez michal Mądrala (5,560 p.)

Witam, próbuję swoich sił z vue i mam problem z pobraniem danych które zwraca mi PHP w formacie json.

Mam napisany testowy komponent który wygląda tak:

<template>
  <div>
    <h1>This is first page</h1>
  </div>
</template>

<script>
export default {
  created: function () {
    this.$http.get('http://localhost/test/nowy.php').then(function (data) {
      console.log(data)
    })
  }
}
</script>

Natomiast w pliku main.js mam dodane resources:

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(VueResource)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Mam jeszcze pytanie czy vue jest takie upierdliwe, czy ja jestem przewrażliwiony że wyrzuca błędy nawet jeśli da się średnik na końcu linijki, a nie jest on konieczny, czy np. żąda wstawienia spacji gdzieś pomiędzy nazwę funkcji a nawiasy. Czy macie podobne odczucia, czy to tak ma być i trzeba się do wszystkich tych drobnostek stosować? 

Będę wdzięczny za wszelkie sugestie. 

4 odpowiedzi

+1 głos
odpowiedź 4 listopada 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

Po pierwsze to nie Vue jest takie upierdliwe a ESLint, którego zapewne masz zainstalowanego. Dba on o wszystkie dobre praktyki przy pisaniu kodu Javascript. Tutaj masz zasady, których ESLint pilnuje. Co do właściwego problemu to dajesz zły link. Czemu tak 'http://localhost/test/nowy.php' ? Część przed /test/nowy.php jest niepotrzebna, bo domyślnie Vue będzie szukać w danym projekcie. Musisz dać po prostu ścieżkę względem twojego pliku.

komentarz 4 listopada 2017 przez michal Mądrala (5,560 p.)
Dzięki za pomoc troszkę mi naświetliłeś sprawę, ale teraz widzę ze chyba jest jeszcze innego rodzaju problem. Mam to zrobione w ten sposób że ten plik php mam odpalany za pomocą xampp, i on działa na localhoscie, natomiast jak uruchamiam vue  poprzez npm run dev to uruchamia mi się na localhost, ale na porcie 8080. Teraz pytanie czy ma to znaczenie, i co w przypadku gdy będzie to wrzucone na hosting. Czy w tedy podać ścieżkę bezwzględną www.domena.pl/api/test.php , czy podać ścieżkę względną, a jeśli tak to czy ta ścieżka ma się odnosić do pliku z komponentem, czy do plików które zostaną wygenerowane po npm run build. Dodam tylko że jak próbowałem vue odpalić na localhost poprzez npm run dev i podałem w tym komponencie ścieżkę do pliku który  miałem wrzucony na hostiing to też nie zadziałało.
komentarz 5 listopada 2017 przez Ivan Maniak (60,650 p.)

npm run build wygeneruje Ci pliki (w folderze dist), które będą działać niezależnie gdzie je wrzucisz.
Jeżeli plik z HTML-em (i JSem = Vue) będzie na tym samym porcie, to wtedy nie musisz podawać całej ścieżki do /api, czyli jeżeli wrzucisz pliki Vue na serwer z PHPem to nie musisz podawać całej ścieżki tj. domena:port, a jedynie ścieżkę do pliku. Oczywiście nie musisz nie oznacza, że nie możesz :)

0 głosów
odpowiedź 5 listopada 2017 przez michal Mądrala (5,560 p.)
Czy ktoś może jeszcze coś podpowiedzieć  ?
0 głosów
odpowiedź 5 listopada 2017 przez Schizohatter Nałogowiec (39,600 p.)
edycja 5 listopada 2017 przez Schizohatter
Kolega na 99% instalował Vue przy pomocy CLI i template'u, który dołączył mu reguły Standard: https://standardjs.com/. Nie polecam, źle się pisze przy ich użyciu. Wystarczy, że zmienisz plik eslintrc.js na coś innego (możesz znaleźć jakiś zestaw reguł w necie, lub użyć mojego: https://github.com/soanvig/frontend-boilerplate/blob/master/.eslintrc.js (NOTE: niektóre reguły mogą nie działać, bo chyba template instaluje nowszą wersję ESLinta, w którym niektóre reguły się zmieniły, musiałbyś je poprawić ręcznie z dokumentacją. Z tego co wiem, to nie ma tego dużo).

Jeśli chodzi o problem z pobieraniem danych - to nie przedstawiłeś nic użytecznego, tylko dołączyłeś moduł do pobierania danych, ale nic z nim nie robisz. Czy jak wejdziesz w ten adres w browserze to działa? Czy są błędy w konsoli? Podejrzewam problem z CORS.
komentarz 5 listopada 2017 przez michal Mądrala (5,560 p.)
W pierwszym kodzie który podałem w przykładzie jest napisana funkcja która (nie pobiera) powinna pobierać dane. Nie wiem czy to miałeś na myśli.
komentarz 5 listopada 2017 przez Schizohatter Nałogowiec (39,600 p.)
Dodałem komentarz do tego.
komentarz 5 listopada 2017 przez Schizohatter Nałogowiec (39,600 p.)
Do tego vue-resource umożliwia jeszcze "error callback" jako drugi parametr funkcji. Wtedy tam wylądują ewentualne błędy. To też sprawdź.
0 głosów
odpowiedź 22 listopada 2017 przez michal Mądrala (5,560 p.)
Dalej borykam się z problemem pobrania danych z API, tym razem pojawia mi się w konsoli błąd : Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://localhost/test/user.php”. (brakujący nagłówek CORS „Access-Control-Allow-Origin”). Vue uruchamia mi się  na localhost:8080, a dane chce pobrać z pliku php który generuje jsona i mam go na xamppie na localhost/test/plik.php. Czy problemem jest ze są one na dwóch różnych portach? Jeśli tak to w jaki sposób mogę to rozwiązać. Dodam jeszcze ze próbowałem ten plik umieścić na hostingu i podawałem całą ścieżkę http://.....  i ten sam błąd.
komentarz 22 listopada 2017 przez niezalogowany

zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://localhost/test/user.php”. (brakujący nagłówek CORS „Access-Control-Allow-Origin”)

Masz dokładnie napisane, dlaczego nie działa.

komentarz 22 listopada 2017 przez michal Mądrala (5,560 p.)
edycja 22 listopada 2017 przez michal
Hehe dzięki za pomoc, nie trzeba filozofi zeby to zauważyć.

Podobne pytania

0 głosów
2 odpowiedzi 942 wizyt
pytanie zadane 20 grudnia 2018 w JavaScript przez ozimas Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 116 wizyt
pytanie zadane 31 października 2019 w JavaScript przez BT101 Stary wyjadacz (12,540 p.)
0 głosów
1 odpowiedź 176 wizyt
pytanie zadane 21 czerwca 2017 w JavaScript przez Bartlomiej Bywalec (2,480 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...