如何使用springboot和angular使用employee id搜索详细的employee数据

dced5bon  于 2021-07-09  发布在  Java
关注(0)|答案(2)|浏览(291)

我有一个spring boot项目。我想通过使用雇员id来搜索详细信息。当我用id得到empdata时,我在postman中得到了结果,但我没有在angular中工作。我保留了搜索栏来获取详细信息,但当我在搜索栏中输入id时,它没有获取员工的详细信息。
有谁能解决这个问题吗?我会给出基本代码
这是我的spring引导控制器类的员工代码

@GetMapping("/findemp/{id}")
    public EmployeeEntity findEmployee(@PathVariable int id){

        return empRepository.findByid(id);
    }

serarch组件.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);
 }
}

搜索组件.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搜索时获取数据

pgccezyw

pgccezyw1#

添加此注解 @CrossOrigin(origins = "*") ,您的方法现在应该是

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

return empRepository.findById(id);
}

原因是您的angular应用程序正在另一个域上运行。出于安全原因,浏览器禁止对驻留在当前源之外的资源进行ajax调用。这就是为什么它对 Postman 有效而对浏览器无效的原因

3vpjnl9f

3vpjnl9f2#

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

@GetMapping("/findemp/{id}")
public EmployeeEntity findEmployee(@PathVariable int id){

    return empRepository.findById(id);
}

相关问题