php - 进行 Angular 6 php mysql api 调用

Question

我是 Angular 世界的新手(我一直在使用 Angularjs)。

我想要制作一个登录应用程序，并且想要对后端(php 和 mysql 服务器，在我的计算机上本地运行)进行 api 调用。

在 Angularjs 中，我会编写如下服务:

(function () {
  'use strict';
angular.module('module name').service('userService', user);

function user ($resource) {
return $resource('api/users', {}, {update: {method: PUT}});
}
})();

这样，我就可以通过简单地调用来调用服务器

 $onInit = function () {
       var user = new userService();
       user.$save(.....) //post request.
       user.$update(....) //put request.
    }

在 Angular 中，我发现事情有所不同。我似乎无法使用我为 AngularJS 编写的相同代码连接到服务器。

进行 api 调用，如下所示:

this.http.post('api/users', userAccess.value).subscribe(data => {
console.log(data);
}

给我发帖http://localhost:3001/api/users 404 未找到错误。

PS。 userAccess 是包含电子邮件地址和密码的 ReactiveForm formGroup 对象。

API 代码位于 src 文件夹下的文件夹中，app 文件夹旁边。它有 3 个文件，api.php、rest.inc.php 和 htaccess 文件。这是我自己实现的 api 接口(interface)。

这是我的 LoginComponent.ts..

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
    hide: boolean = true;

    constructor(
        private fb: FormBuilder,
        private http: HttpClient
    ) { }

    ngOnInit() {
    }

    userAccess: FormGroup = this.fb.group({
        email: ['', [Validators.email, Validators.required]],
        password: ['', [Validators.required]]
    })

    onSubmit = () => {
        this.http.post('api/users', 
            {
                username: this.userAccess.value.email,
                encryption: this.userAccess.value.password
            }
        ).subscribe(data => {
            console.log(data);            
        });        
    }

    getEmailMessage = () => {
        return this.userAccess.controls['email'].hasError('required')  ? 'Please enter an email address'  :  this.userAccess.controls['email'].hasError('email') ? 'Not a valid email' : '';
    }

}

这是文件夹结构..

这是 api 文件夹的快照..

无论我输入什么路径，这都是我得到的错误...

我应该如何以正确的方式做到这一点？

Answer 1

您收到 404 错误，这确实意味着您可以从 Angular 代码调用 HTTP 服务。请检查您的 API 的 URL 是否正确。 (提示:使用浏览器工具)

在 Angular 中，要访问 API，建议创建一个单独的服务类，稍后可以在需要的地方注入(inject)该服务类，例如组件。

您可以使用以下 CLI 命令创建服务类

ng g s NameOfYourService

稍后，您的服务的构造函数只需注入(inject) HttpClient 的引用。引用下面的例子

constructor(private httpClient:HttpClient)

您可以使用此引用，如下所示

public performUserLogin(cred:Credentials):Promise<void> {
   return this.httpClient.post<void>('http://yourhost:yourport/api_path', cred).toPromise();
}

请注意，您可以选择返回 Promise 或 Observable。

欲了解更多详情，您可以浏览official documentation .