如何将角度 html 表单输入发送到 Spring Boot Rest Web 控制器

Posted 2023-02-26

【中文标题】如何将角度 html 表单输入发送到 Spring Boot Rest Web 控制器

【英文标题】：How to send angular html form input to spring boot rest web controller

【发布时间】：2019-10-13 01:21:30

【问题描述】：

我正在尝试通过 Angular 前端和 Spring Boot Rest Web 控制器将 1 个或多个基因的列表发送到我的后端

我的html页面：

<div class="container">
  <h1>Clustertool gene(s) input</h1>
  <form (ngSubmit)="onSubmit()" #clusterForm="ngForm">
    <div class="form-group">
      <label for="gene">gene(s) </label>
      <input type="text" class="form-control" id="gene" required>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
    </form>
</div>

组件

import  Component, OnInit  from '@angular/core';
import  ClustertoolService from "../../clustertool.service";

@Component(
  selector: 'app-cluster-tool',
  templateUrl: './cluster-tool.component.html',
  styleUrls: ['./cluster-tool.component.css']
)
export class ClusterToolComponent implements OnInit 
  onSubmit() 
    this.clustertoolService.getCell()
  
  constructor(private clustertoolService: ClustertoolService)  

  ngOnInit() 
    this.clustertoolService.getCell()
  

服务页面

import  Injectable  from '@angular/core';
import HttpClient from "@angular/common/http";
import Observable from "rxjs";

@Injectable(
  providedIn: 'root'
)
export class ClustertoolService 
  private clusterUrl: string;

  constructor(private http: HttpClient) 
    this.clusterUrl = 'localhost:8080/clustertool/singleGene';
  
  getCell(): Observable<any> 
    return this.http.get(this.clusterUrl);
  

应用路由模块

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';

const routes: Routes = [
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

网络控制器

package singleCell.controllers.WebController;

import org.springframework.web.bind.annotation.*;
import singleCell.DatabaseAccess.DAO.DatabaseRetriever;
import java.util.ArrayList;
import java.util.List;

@RestController
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping("/clustertool")
public class ClusterController 

    @RequestMapping(value = "/singleGene", method = RequestMethod.GET)
            public ArrayList singleGeneResponse(@RequestParam String gene)
        return DatabaseRetriever.getSingleGene(gene);
    

    @RequestMapping(value = "/multipleGenes", method = RequestMethod.GET)
    public ArrayList multipleGeneResponse(@RequestParam List<String> genes)
        System.out.println(genes);
        return DatabaseRetriever.getMultipleGenes(genes);
    

我希望将后端结果发送到前端，这样我就可以在那里进一步使用它。将使用 js 库对数据进行绘图。

【问题讨论】：

此时，当我按下提交时没有任何反应，所以我认为我没有在我的组件中正确处理表单。但我不认为这是唯一的问题，我认为我必须在我的应用程序路由中指定一些东西？我是 Angular 的新手，所以我很难理解该怎么做。

【参考方案1】：

首先，您的ClustertoolService.getCell() 应该接受gene 的参数

getCell(gene: string): Observable<any> 
  return this.http.get(this.clusterUrl+'?gene='+gene);

然后，您应该在提交带有输入值的表单时调用此方法。

onSubmit() 
  this.clustertoolService.getCell(this.geneModel); // geneModel is ngModel for your input.

编辑：在您的 HTML 中，您需要在基因输入字段上定义 ngModel

<input type="text" class="form-control" id="gene" [(ngModel)]="geneModel" required>