Веб-приложение Angular 6, которое подключается к PostgreSQL с помощью sequelize-typescript

Я использую Angular6, PostgreSQL и sequelize-typescript. Цель состоит в том, чтобы подключиться к БД и получить список имен и возрастов в таблице.

  1. Я начал с создания экспресс-сервера.
  2. Затем я использовал sequelize-typescript для подключения к моей базе данных PostgreSQL и вызвал это соединение при инициализации сервера.
  3. Я создал модель своего элемента данных с помощью sequelize-typescript и использовал ее для подключения к моей базе данных PosgreSQL.
  4. Затем я создал простой маршрут к данным с помощью Express Router.
  5. Я добавил маршрут к исходному Express Server Казалось, все это работает (хотя и беспорядочно, поскольку я учусь по ходу дела). Но я могу подключиться к своему локальному серверу через браузер (localhost: 3000) и использовать PostMan для получения данных из БД (localhost: 3000 / человек).

Сторона клиента:

  1. У меня уже есть первоначальное интерфейсное приложение, которое было создано с помощью проекта, созданного с помощью командной строки. Я могу связаться с этим по адресу (localhost: 4200)

  2. Я создал простой компонент под названием people using ng g component people.

  3. Как мне получить данные из моего серверного маршрута в клиентский компонент? Я считаю, что это происходит через HTTP, а затем подписывается, но, похоже, есть много разных способов сделать это. Я ищу совета по лучшему шаблону для использования в Angular6.

TL; DR Как мне получить данные из моего маршрута к клиентской части

После некоторого исследования я создал службу на стороне клиента с вызовом api.service.ts. Я смог создать это с помощью ng g service api. Оттуда я смог добавить службу в конструктор моего компонента, что позволяет мне получить доступ к api.service. Служба api - это Httpclient, который прослушивает URL-адрес моего маршрутизатора. Я чувствую, что приближаюсь ... теперь моя проблема - ошибка на стороне клиента «Нет заголовка Access-Control-Allow-Origin на запрошенном ресурсе».

mick.lynch 20.05.2018 12:01
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
1 930
1

Ответы 1

Наконец-то он заработал правильно, мне нужно было создать службу, которая слушала URL-адрес API, и оттуда я мог бы вернуть наблюдаемое в компонент. Решение (даже если оно не очищено должным образом) находится по адресу: https://github.com/micklynch/travelbudget

Другие вопросы по теме