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.
    }

在角度上，我看到情况有所不同。我似乎无法使用为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接口实现。

这是我的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错误，这确实意味着您可以从角度代码中调用HTTP服务。请检查您的API的URL是否正确。（提示：使用浏览器工具）

在Angular中，建议访问API，以创建一个单独的服务类，以后可以在需要时将其注入，例如组件。

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

ngs NameOfYourService

稍后，您的服务的构造函数只需注入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。

Answer 2

您在此处定义的路径不正确。

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

更改api文件夹的路径，将其带到根文件夹（与e2e文件夹处于同一级别），然后执行上述操作。

将这些行添加到php文件中

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Content-Type: application/json');

要获取发布请求中的数据，请使用

$data = json_decode(file_get_contents("php://input"));

Answer 3

从我在错误日志中看到的内容，您得到此404，因为您没有调用良好的url，您尝试访问localhost：4200，但您想调用localhost：3001。

在localhost：4200上，如果您使用“ ng serve”命令启动了它，肯定会运行您的角度应用程序，因为ng serve使用端口4200。

由于您未在帖子中指定完整路径，因此它试图从您调用它的位置（此处为4200）访问该网址。

因此，要解决此问题，您应该像这样在帖子中指定完整路径：

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

这应该修复它，至少它应该调用您的php API。

Answer 4

我知道了。我刚刚添加了代理配置，并在其他端口上运行服务器

进行Angular 6 PHP mysql API调用

4 个答案: