代码之家 › 专栏 › 技术社区 › kantsverma

无法以角6投递

angular6 typescript api angular

1

kantsverma · 技术社区 · 7 年前

我在提交登录表单时遇到了Angular6的不确定问题。

我已经在localhost中设置好了所有这些api文件,并将它们保存在localhost根目录和angular项目文件夹中,但对任何人都不起作用。这里是API目录/API/auth.php

无法发布/api/auth.php

下面是我的 认证服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { map, catchError }  from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  constructor(
    private http:HttpClient
  ) { }
  getUsersDetail(userName, userPassword){
    return this.http.post('/api/auth.php', {
      userName,
      userPassword
    }, {responseType: 'text'}).pipe(
      map(data => {
          console.log(JSON.stringify(data));
      }),
      catchError(error =>{
        return throwError("Something webt wrong"+JSON.stringify(error));
      })
    ).subscribe( data => {
      console.log(data, 'is what we got from server');
    });
  }
}

下面是我的 login.component.html登录

<form (submit)="loginUser($event)">
    <div><input type="text" name="loginName" id="userName"></div>
    <div><input type="password" name="loginPassword" id="userPassword"></div>
    <input type="submit" value="submit">
</form>

下面是我的 login.component.ts登录

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private Auth:AuthService) {}

  ngOnInit() {
  }

  loginUser(event){
    event.preventDefault();
    console.log('Here we go '+event);
    const userName     = event.target.querySelector('#userName').value;
    const userPassword = event.target.querySelector('#userPassword').value;
    console.log('Credentials '+userName+' = '+userPassword);
    this.Auth.getUsersDetail(userName, userPassword);

  }

}

注意:当我在login.component.ts中获取登录表单数据时,它可以正常工作,但是我找不到API文件,我想它返回404,所以有人可以建议我应该将API文件夹放在哪里,它将在哪里工作,我的本地主机URL如下 http://localhost:4200/login

1 回复 | 直到 7 年前

1

2

federico scamuzzi 7 年前

通常我们把后端API的主机放在环境文件的一个条目中。。因此,您可以轻松地更改前端本地运行的不同阶段(test/qa/stanging/prod)。。无需重构服务:

类似于:

export const environment = {
  production: false,
  API_URL: 'http://localhost:1048/api/'
};

然后例如environment.staging.ts

export const environment = {
  production: true,
  API_URL: 'http://staging.mysite.com/api/'

};

然后在你的服务中: //导入您的环境

import { environment } from '../../../environments/environment';

getUsersDetail(userName, userPassword){
    return this.http.post(environment.APIURL + '/api/auth.php', {
      userName,
      userPassword
    }, {responseType: 'text'}).pipe(
      map(data => {
          console.log(JSON.stringify(data));
      }),
      catchError(error =>{
        return throwError("Something webt wrong"+JSON.stringify(error));
      })
    ).subscribe( data => {
      console.log(data, 'is what we got from server');
    });
  }