Как подключить бэкэнд Laravel 5.4 к Angular 5 Frontend

Question

Я работаю над проектом, в котором мне нужно разработать внешний интерфейс в angular 5 и бизнес-логику внутреннего интерфейса в laravel 5.4 с базой данных mySql. Я новичок в этой технологии и не знаю, как разработать соединение потоков данных между этими двумя фреймворками.

Будет полезно, если вы расскажете мне самый простой и общий способ решения этой проблемы.

Answer 1

I have tried this way first I was getting error related to CROS, to avoid this I install a plugin in my chrome, now that error is gone but still no data is retrieve from that URL and getting this error in my console,

GET http://localhost:8000/api/servers 401 (Unauthorized)
app.component.ts:47 
Response {_body: "{"error":"Unauthenticated."}", status: 401, ok: false, statusText: "Unauthorized", headers: Headers, …}
headers: Headers {_headers: Map(2), _normalizedNames: Map(2)}
ok: false
status: 401
statusText: "Unauthorized"
type: 2
url: "http://localhost:8000/api/servers"
_body: "{"error":"Unauthenticated."}"
__proto__: Body

can you please help me to solve this out? I must be missing something

and this is my Angular 5 Code which was working fine with firebase but not working with laravel

    export class ServerService {
        constructor(private http: Http){}
        storeServers(servers: any[]){
            return this.http.post('https://http-request-64ee3.firebaseio.com/data.json',servers);
        }
        getServers(){
            return this.http.get('http://localhost:8000/api/servers');
        }
    }

I am waiting for you response. 

Answer 2

Как и с любой другой технологией, вам нужно работать с API.

В вашем проекте Laravel:

Ваш проект Laravel должен иметь модели, контроллеры и файл для путей маршрутов для каждого метода в ваших контроллерах, верно? Если вы не знаете, где находятся маршруты, в корневом каталоге вашего проекта есть специальная папка «маршруты».

Внутри этой папки у вас будет два важных файла: api.php и web.php. Эти два метода работают точно так же, но api.php автоматически добавит «/ api» в начало вашего маршрута.

Маршрут выглядит как ссылка, например: «yourdomain.com/api/person/name/jondoe». Каждый маршрут должен быть доступен через HTTP-метод, обычно это GET, POST, PUT или DELETE.

Пример: допустим, вам нужен ваш пользователь, чтобы увидеть список людей. Вероятно, у вас будет модель Person и PersonController, содержащие некоторую функцию displayAllPeople (), и эта функция будет выбирать людей из вашей базы данных. В ваш файл api.php вы добавите что-то вроде:

Route :: get ('/ people', 'PersonController @ displayAllPeople');

Вы можете проверить это в своем браузере. Попытайтесь получить доступ к http://yourdomain.com/api/people.. Вы должны увидеть JSON-вывод возвращаемых данных вашей функции В этом примере список людей. Теперь все, что нам нужно сделать, это заставить ваш проект Angular вызывать этот маршрут API.

Источник: https://laravel.com/docs/5.7/controllers

В вашем угловом проекте:

Помните ту модель Person, которую вы создали на своем сервере? Angular также получит доступ к этой модели, поэтому вам придется создать модель Person.ts здесь. Хотя это не требуется для работы, рекомендуется создать эту модель с теми же атрибутами, что и у базовой модели.

Теперь вам понадобится услуга. Сервис - это файл, который будет обращаться к этому маршруту Laravel для вас. Если вы используете Angular CLI, просто запустите команду:

ng generate service person

Это создаст для вас файл person.service.ts. Внутри этого файла вы напишите все функции для выбора людей, обновления, сохранения, удаления людей и так далее. Ваша функция будет выглядеть примерно так:

findAll(): Observable<Person[]> {
    return this.http.get<Person[]>('yourdomain.com/api/people');
}

Каждый раз, когда вы вызываете функцию findAll (), вы получаете доступ к маршруту Laravel, который возвращает людей из вашей базы данных. Вы можете сделать это с любой операцией, которую вы хотите. Просто убедитесь, что вы соблюдаете стандарты HTTP.

Это также работает, если вы хотите отправить некоторые данные из вашего внешнего интерфейса в бэкэнд, например, если вы хотите сохранить нового пользователя в вашей базе данных. Вам понадобится POST-вызов для отправки вашей новой модели Person, которая будет получена вашей функцией Laravel's Controller, а затем сохранена в базе данных.

Источник: https://angular.io/tutorial/toh-pt4