Frontend + Backend + Database

0

Siema, robię ze znajomym projekt, taki pseudo filmweb. Jestem odpowiedzialny za warstwę frontendową (Vue.js), on za backend (Java), trochę nie rozumiem jak te dwie warstwy mają współgrać.Ze swojej strony zrobiłem rejestrację i logowanie, które od razu idą do bazy danych za pomocą axios, resztę rzeczy również wydaje mi się ,że mógłbym zrobić bezpośrednio na froncie, jednak jaka jest wtedy funkcja backendu? Czy ktoś mógłby mi wytłumaczyć na jakiej zasadzie te dwie warstwy miałyby wspólnie współgrać i podac jakieś ewentualne przykłady? Jak skomunikować front z backiem etc?

3

Wszystko, co jest przesyłane na serwer i przetwarzane przez serwer to backend.
Jeśli zapisujesz coś w bazie, to odwołujesz się do mechanizmów po stronie serwera.

Natomiast w drugą stronę, to nawet jeżeli generowaniem strony zajmuje się JS, to skądś ten JS musi przecież pobierać dane.

0
Freja Draco napisał(a):

Wszystko, co jest przesyłane na serwer i przetwarzane przez serwer to backend.
Jeśli zapisujesz coś w bazie, to odwołujesz się do mechanizmów po stronie serwera.

Czyli jak komunikuję się z bazą danych używajać metody axios to i tak to jakby "przechodzi" przez warstwę backendową?

0

Pytanie: a bazę masz na serwerze czy w przeglądarce?

1

Hej, bardzo ciekawe pytanie nam tutaj zadałeś. Ale jednocześnie podałeś mało informacji.

Z tego co napisałeś wynika, że piszesz aplikację typu serverless czyli taką, która nie potrzebuje stałego backendu, a korzysta z bezpośredniego dostępu do jakiejś usługi bazodanowej np. Firestore (Firebase) albo DynamoDB (AWS), a do jakiś zadań które musi wykonać w tle np. wysłanie mailingu używa tzw. Cloud Functions (Firestore) albo Lambda Functions (AWS). W takim wypadku backend rzeczywiście nie jest do niczego potrzebny.

Proponuję, żebyś zainteresował się tym jak kiedyś robiło się strony, wtedy lepiej zrozumiesz co to jest frontend, backend i jak to się zmieniało na przestrzeni czasu.

W zamierzchłych czasach żeby zrobić stronę internetową musiałeś kupić jakiś hosting gdzie dostawałeś miejsce na serwerze z dostępem do bazy danych. Następnie musiałeś tam wgrać swoją aplikacją napisaną w PHP, Javie czy innym Pythonie, która odbierała requesty od klienta, odpytywała bazę danych, generowała html z odpowiedzią i odsyłała do klienta. Później pojawił się REST który działał w ten sposób, że backend wystawiał tylko metody GET, POST itd. i na podstawie tego co odebrał odpytywał bazę danych i odsyłał JSONa, na podstawie tego JSONa frontend generował HTML i robił to już po stronie klienta. Dzięki takiemu podejściu backend przestał już zajmować się generowaniem HTMLa i zajął się tylko metodą żądań HTTP. Obecnie w czasach chmur obliczeniowych można już pisać aplikacje serverless, które nie potrzebują backendu.

0

Czytałem ostatnio dyskusję
https://github.com/axios/axios/issues/1965
że axios się kończy (jak to w js), prawie pół tysiaka błędów i raczej rzadkie update'y, nie wiem czy warto inwestować w to swój czas.

2
Haskell napisał(a):

Obecnie w czasach chmur obliczeniowych można już pisać aplikacje serverless, które nie potrzebują backendu.

there is no cloud

2
Freja Draco napisał(a):

there is no cloud

Tak, to zawsze jest komputer, jeżeli nie twój, to wynajęty przez ciebie hosting, albo usługa w chmurze. Chmura to tak naprawdę buzzword w którym mieści się bardzo szeroki zakres usług internetowych od zwykłego hostingu, bazy danych, po jakieś funkcje analityczne, monitoring aplikacji itp. które można wykupić na określoną ilość żądań/operacji i określony czas. AWS najpopularniejsza chmura obliczeniowa oferuje obecnie ponad 90 przeróżnych usług wspierających tworzenie aplikacji internetowych. Zaletą chmur w stosunku do klasycznego backendu jest to, że nie musisz sam zajmować się serwerem. Usługi w chmurze prawidłowo używane skalują się w zależności od ruchu czyli używają mało zasobów (albo nie zużywają zasobów w ogóle) jeżeli jest mały ruch i przydzielają więcej zasobów w czasie gdy aplikację używa wiele osób. Umieszczając aplikację na własnym serwerze musisz sam martwić się o to czy obecna konfiguracja przyjmie zwiększony ruch oraz marnujesz zasoby (jednocześnie za nie płacąc) w czasie gdy aplikacji nikt nie używa.

1

Obecnie "chmurą" nazywany jest praktycznie każdy VPS, bo tak jet groźniej :)

2

Ale nie gadajcie, że nic się nie zmieniło. Przecież pytanie autora wątku wyraźnie pokazuje, że jednak obecne aplikacje webowe tworzy się nieco inaczej niż w zamierzchłych czasach dinozaurów. Nawet jeżeli dinozaur jest miłym smoczkiem z nickiem @Freja Draco, to nadal jest dinozaurem. Obecnie aplikacje w React rzeczywiście tworzy się po stronie klienta - zarządzają stanem, mają zaszytą logikę biznesową i mogą bezpośrednio łączyć się z endpointami - usługą bazodanową oraz usługą oferującą autentykację. Kiedyś nie było axios, es6 request oraz takich usług "chmurowych" jakie są oferowane teraz. Dopiero w 2006 pojawił się GWT i jquery, ale i tak nikomu wtedy nie przyszło do głowy, żeby budować apkę bez klasycznego backendu na wykupionym hostingu.

0

Bardziej pytałem o połączenie z rest api

0
Haskell napisał(a):

Dopiero w 2006 pojawił się GWT i jquery, ale i tak nikomu wtedy nie przyszło do głowy, żeby budować apkę bez klasycznego backendu na wykupionym hostingu.

No przecież były. Np. w okolicach roku 2000 powstawały multiwyszukiwarki odwołujące się się do serwerów Google, Altavisty, Yahoo i wrzucające obrobione wyniki w swoje okno wyników. Własnych serwerów nie miały.

0

Mam wrażenie, że odbiegamy od tematu, backend mamy zrobiony w javie, używamy pgadmin jako bazy danych, interesuje mnie komunikacja z serwerem za pomocą rest api, ktoś mógłby wytłumaczyć zasadę działania na przykładach? Byłbym bardzo wdzięczny

0

Poczytaj o metodach HTTP. Serwer który pisze kolega powinien móc obłsugiwać te metody, wystarczy je zaprogramować. Z kolei we frontendzie będziesz mógł korzystać z tej komunikacji i wysyłać tam pytania o jakieś dane, bádź przesyłać dane do zapisania w bazie. Gdy już dowiecie się z kolegą co umożliwiają te metody usiądź z kolegą i zaprojektujcie komunikację.

0
Haskell napisał(a):

Poczytaj o metodach HTTP. Serwer który pisze kolega powinien móc obłsugiwać te metody, wystarczy je zaprogramować. Z kolei we frontendzie będziesz mógł korzystać z tej komunikacji i wysyłać tam pytania o jakieś dane, bádź przesyłać dane do zapisania w bazie. Gdy już dowiecie się z kolegą co umożliwiają te metody usiądź z kolegą i zaprojektujcie komunikację.

Po stronie serwera jest już większość rzeczy zrobionych, problem jest u mnie, bo mogę bezpośrednio zapisywać i odczytywać dane z bazy danych (axios), ale nie wiem, czy to tak ma wyglądać, stąd pytanie o rest api.

1
Nindzia napisał(a):

Po stronie serwera jest już większość rzeczy zrobionych, problem jest u mnie, bo mogę bezpośrednio zapisywać i odczytywać dane z bazy danych (axios), ale nie wiem, czy to tak ma wyglądać, stąd pytanie o rest api.

Ale co jest konkretnie zrobione? Czy kolega zaimplementował już API, z którym możesz się połączyć? Nie wiem czy bezpośrednie zapisywanie do bazy będzie odpowiednie w tym przypadku. Może być tak, że w przyszłości będziesz miał aplikacje mobilne iOS, Android, klienta webowego, desktopowego itd. Jeżeli w każdej z tych aplikacji będziesz bezpośrednio odwoływał się do bazy może dojść do sytuacji, że poszczególne implementacje będą się różnić między sobą, poza tym będziesz musiał całą logikę zaprogramować kilkukrotnie w różnych językach programowania, co oznacza jeszcze więcej pracy. Z tego też powodu komunikowanie się z REST API może być lepszym pomysłem niż bezpośrednia komunikacja z bazą. Jeżeli chcesz to zrobić, to skontaktuj się z kolegą, który robi backend i dowiedz się co już zaimplementował.

0
Haskell napisał(a):
Nindzia napisał(a):

Po stronie serwera jest już większość rzeczy zrobionych, problem jest u mnie, bo mogę bezpośrednio zapisywać i odczytywać dane z bazy danych (axios), ale nie wiem, czy to tak ma wyglądać, stąd pytanie o rest api.

Ale co jest konkretnie zrobione? Czy kolega zaimplementował już API, z którym możesz się połączyć? Nie wiem czy bezpośrednie zapisywanie do bazy będzie odpowiednie w tym przypadku. Może być tak, że w przyszłości będziesz miał aplikacje mobilne iOS, Android, klienta webowego, desktopowego itd. Jeżeli w każdej z tych aplikacji będziesz bezpośrednio odwoływał się do bazy może dojść do sytuacji, że poszczególne implementacje będą się różnić między sobą, poza tym będziesz musiał całą logikę zaprogramować kilkukrotnie w różnych językach programowania, co oznacza jeszcze więcej pracy. Z tego też powodu komunikowanie się z REST API może być lepszym pomysłem niż bezpośrednia komunikacja z bazą. Jeżeli chcesz to zrobić, to skontaktuj się z kolegą, który robi backend i dowiedz się co już zaimplementował.

Rejestracja, logowanie, dodawanie itemów etc., zaimplementował api, ale problem jest w tym, że nie wiem do końca jak połączyć się z rest api.

0

Jeśli chodzi o bazę danych zdefiniowaną przez backend, to znajdują się tam endpointy, np. /users, /cds, itd., czy wykorzystując je w komunikacji z bazą danych (post/get) wykorzystuję rest api?

1
Nindzia napisał(a):

Rejestracja, logowanie, dodawanie itemów etc., zaimplementował api, ale problem jest w tym, że nie wiem do końca jak połączyć się z rest api.

Ok, a czy ta aplikacja gdzieś już jest wgrana lub czy potrafisz ją uruchomić u siebie lokalnie? Jeżeli ona już jest gdzieś postawiona lub postawisz ją lokalnie to łącznie wygląda tak samo jak łączenie się do czegokolwiek innego. Przykładowo żeby pobrać listę itemów piszesz u siebie:

const getItems = async () => {
  try {
    return await axios.get('https://backend.com/api/items/list/all');
  } catch (error) {
    console.error(error);
  }
}

Oczywiście adres 'https://backend.com/api/items/list/all' będzie inny w zależności od tego gdzie jest ten backend i jak kolega dokładnie zaimplementował interfejs REST.

0
Haskell napisał(a):
Nindzia napisał(a):

Rejestracja, logowanie, dodawanie itemów etc., zaimplementował api, ale problem jest w tym, że nie wiem do końca jak połączyć się z rest api.

Ok, a czy ta aplikacja gdzieś już jest wgrana lub czy potrafisz ją uruchomić u siebie lokalnie? Jeżeli ona już jest gdzieś postawiona lub postawisz ją lokalnie to łącznie wygląda tak samo jak łączenie się do czegokolwiek innego. Przykładowo żeby pobrać listę itemów piszesz u siebie:

const getItems = async () => {
  try {
    return await axios.get('https://backend.com/api/items/list/all');
  } catch (error) {
    console.error(error);
  }
}

Oczywiście adres 'https://backend.com/api/items/list/all' będzie inny w zależności od tego gdzie jest ten backend i jak kolega dokładnie zaimplementował interfejs REST.

Póki co używamy bazy danych pgAdmin na localhoscie

0

Mam problem z pobieraniem danych z bazy danych, zadziałało gdy zainstalowałem wtyczkę do chroma, ale wie ktoś jak lepiej rozwiązać ten problem?

Access to XMLHttpRequest at 'http://localhost:8080/cds' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2

Nie mam rozwiązania, ale widzę tyle, że jest to problem związany z https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS, oraz że najprawdopodobniej polega na tym, ze zmienił Ci się numer portu. Jeśli miałbyś możliwość, to ustaw oba porty na taki sam numer (albo 8080, albo 8081, no albo jeszcze jakiś inny).

1

Backend masz pewnie uruchomiony na 8080, więc Vue startuje na 8081. Musisz albo dodać AllowedOrigins w backendzie, albo ustawić proxy we frontendzie. Ja używam nuxt.js i tę sprawę załatwia nuxt-proxy-module.

0
kkojot napisał(a):

Backend masz pewnie uruchomiony na 8080, więc Vue startuje na 8081. Musisz albo dodać AllowedOrigins w backendzie, albo ustawić proxy we frontendzie. Ja używam nuxt.js i tę sprawę załatwia nuxt-proxy-module.

To jest dokładnie ten problem, back startuje na 8080, Vue na 8081, mógłbyś opowiedzieć więcej o AllowedOrigins na backendzie?

0
Nindzia napisał(a):
kkojot napisał(a):

Backend masz pewnie uruchomiony na 8080, więc Vue startuje na 8081. Musisz albo dodać AllowedOrigins w backendzie, albo ustawić proxy we frontendzie. Ja używam nuxt.js i tę sprawę załatwia nuxt-proxy-module.

To jest dokładnie ten problem, back startuje na 8080, Vue na 8081, mógłbyś opowiedzieć więcej o AllowedOrigins na backendzie?

Ewentualnie jak uruchomić backend i frontend na jednym porcie (o ile to w ogóle możliwe?)

1

Dwóch usług na jednym porcie nie uruchomisz. Generalnie masz trzy opcje:

  • dodać proxy
  • dodać headery w requescie
  • włączyć CORS w backendzie

Jak zamierzasz później deployować tę aplikację? Zakładam, że pewnie w Vue wygenerujesz builda, tzn. wszystkie porzebne pliki .js, .css .html i umieścisz je w public_html w backendzie, a to zdeployujesz na produkcję. W takim razie na produkcji nie będziesz miał tego problemu, więc polecam do developmentu proxy, spróbuj tego https://cli.vuejs.org/config/#devserver-proxy

Pozostałe tematy to googluj w zależności od tego co używasz: enable cors java, spring enable cors, axios cors header itp

1 użytkowników online, w tym zalogowanych: 0, gości: 1