Question

我试图将我的angular 6应用程序与sprint boot 2 Web应用程序连接。但是我无法连接。我已经在控制器中添加了CrossOrigin，但是连接并没有连接到控制器。我还尝试在proxy.confg.json文件中添加url，但无法正常工作。

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { ClienthomepageComponent } from './clienthomepage/clienthomepage.component';
import { AddclientComponent } from './addclient/addclient.component';
import { HeadermappingComponent } from './headermapping/headermapping.component';

//import { Http, Response } from "@angular/http";
//import { HttpClient, HttpHeaders } from '@angular/common/http';

//import { HttpClient } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ClienthomepageComponent,
    AddclientComponent,
    HeadermappingComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
//    Http,
//    HttpClient,
    RouterModule.forRoot([
        {
            path: '',
            component: LoginComponent
        },
        {
            path: 'clientslist',
            component: ClienthomepageComponent
        },
        {
            path: 'addClient',
            component: AddclientComponent
        }
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.html

<div class="container pt-5 mt-5">
    <div class="col-lg-12">
        <div class="row d-flex justify-content-center">
            <form (submit)="checkUser($event)">
                <div class="col-md-10" id='login-wrap'>
                    <div class="retailmodal">
                        <div class="modal-content">
                            <div class="modal-body d-flex justify-content-center" id="firstFrom">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-12"><input type="text" placeholder="UserName" id = "username"></div>
                                    <div class="col-12"><input type="password" placeholder="Password" id = "password"></div>
                                    <div class="col-12 "><input type="submit" value="Login"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="col-md-12" style="clear:both;height:40px;"></div>

            <div class="col-lg-2"></div>
        </div>
    </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {LoginService} from '../login.service';

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

  constructor(private loginService: LoginService) { }

  ngOnInit() {

  }
  checkUser(event){
    event.preventDefault()
    const target = event.target;
    const userName = target.querySelector('#username').value;
    const password = target.querySelector('#password').value;

    console.log(userName, password);
    this.loginService.checkUsers();
//    this.loginService.findClientByNameAndPwd(userName,password);
}

}

login.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Http, Response } from "@angular/http";
@Injectable({
  providedIn: 'root'
})
export class LoginService {
 private baseUrl = 'http://localhost:8084/login';
    private apiUrl = '/api/employees';
  constructor(private http:HttpClient) { 
  }
  checkUsers(): Observable<any> {
      console.log(`${this.baseUrl}`);
    return this.http.get(this.baseUrl);
  }
  findClientByNameAndPwd(username: string,password:string): Observable<any> {
      console.log(`login/username/${username}/password/${password}`);
//    return this.http.get(`login/username/${username}/password/${password}`);
      return this.http.get(this.apiUrl)
  }

//   public checkUsers() {
//    return this.http(this.baseUrl);
//  }

}

LoginController.java

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */


import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 *
 * @author xyz
 */
@RestController
//@RequestMapping("/api")
public class LoginController {
    @GetMapping("/login")
    @CrossOrigin(origins = "http://localhost:4200")
    public String loginPage(){
    System.out.print("");

    return "";
    }
}

EmailreportsApplication.java

package com.xyx.emailreports;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication(scanBasePackages = {"com.netelixir"} )
@EnableAutoConfiguration
@ComponentScan
public class EmailreportsApplication extends SpringBootServletInitializer{

    public static void main(String[] args) {
        SpringApplication.run(EmailreportsApplication.class, args);
    }
         @Override
  protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
    return application.sources(EmailreportsApplication.class);
  }
}

Answer 1

http-服务需要订阅者

您的服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
   private baseUrl = 'http://localhost:8084/login';
   private apiUrl = '/api/employees';

  constructor(private http:HttpClient) { }

  checkUsers()
  {
    return this.http.get(this.baseUrl);
  }
  ...
}

登录组件：

....

this.loginService.checkUsers().subscribe();

....

无法将角度项目与Spring Boot Web应用程序连接

1 个答案: