如何使用 Spring Boot 和 Angular 使用员工 ID 搜索详细员工数据答案

【问题标题】：How to search details employees data by using employee id using spring boot and angular如何使用 Spring Boot 和 Angular 使用员工 ID 搜索详细员工数据
【发布时间】：2020-08-20 08:37:49
【问题描述】：

我有一个 Spring Boot 项目。我想使用员工 ID 搜索详细信息。当我使用 id 获取 empData 时，我得到了邮递员的结果。但我没有在角度工作。我保留搜索栏以获取详细信息，但是当我在搜索栏中输入 id 时，它没有获取员工详细信息。

谁能解决这个问题，我会给出基本代码

这是我的 Spring Boot 控制器类的员工代码

@GetMapping("/findemp/{id}")
    public EmployeeEntity findEmployee(@PathVariable int id){
        
        return empRepository.findByid(id);
    }

serarchComponent.ts

export class SearchDeleteComponent implements OnInit {

  emps:Observable<Emp[]>;
  emps1:any;
  id:number;

    constructor(public empService: EmpRegistrationService) { }

    ngOnInit() {
      this.empService.getEmployees().subscribe(data => {
        this.emps = data;
      });
    }

    delteUser(id:number){
      this.empService.deleteEmp(id).subscribe(
        data => {
          console.log(data);
          this.ngOnInit();
        },
        error => console.log(error));
    }
     public findEmpById(id: number){
      //  let resp = this.empService.getEmpById(this.id);
      //  resp.subscribe((data)=>this.emps=data);
 }
}

搜索component.html

<div class="container">
  <br/>
  <div class="row justify-content-center">
    <div class="col-12 col-md-10 col-lg-8">
      <form class="card card-sm">
        <div class="card-body row no-gutters align-items-center">
          <div class="col-auto">
            <i class="fas fa-search h4 text-body"></i>
          </div>
          <!--end of col-->
          <div class="col">
            <input class="form-control form-control-lg form-control-borderless" type="search"
                   placeholder="Search topics or keywords">
          </div>
          <!--end of col-->
          <div class="col-auto">
            <button class="btn btn-lg btn-success" type="submit" (click)="findEmpById(id)">Search</button>
          </div>
          <!--end of col-->
        </div>
      </form>
    </div>
    <!--end of col-->
  </div>
</div>

在“emp-registration-service.ts”中我写了springboot的url

public getEmpById(id: number): Observable<any>{
    return this.http.get("http://localhost:8080/findemp/"+id)

  }

我想在按 id 搜索时获取数据

【问题讨论】：

浏览器控制台有错误吗？
不它没有显示任何东西，但在内部显示，即我们在搜索中给出的 id 编号，id 值未定义

标签： java angular spring-boot

【解决方案1】：

在你的搜索功能控制器中试试这个

@GetMapping("/findemp/{id}")
public EmployeeEntity findEmployee(@PathVariable int id){
    
    return empRepository.findById(id);
}

【讨论】：

【解决方案2】：

添加这个注解@CrossOrigin(origins = "*")，你的方法现在应该是这样的

@GetMapping("/findemp/{id}")
@CrossOrigin(origins = "*")
public EmployeeEntity findEmployee(@PathVariable int id){

return empRepository.findById(id);
}

原因是您的 Angular 应用程序在不同的域上运行。出于安全原因，浏览器禁止 AJAX 调用驻留在当前来源之外的资源。这就是为什么它适用于邮递员而不是浏览器的原因

【讨论】：

所以我必须更改代码你能解释一下@Emmanuel Ogoma