Angular+Express项目中GET请求传客户ID获取位置数据的方案咨询

你的核心问题在于GET请求不应该通过请求体传递参数，标准做法是用查询参数或URL路径参数来传递id_customer，下面是两种具体实现方案，附带关键优化建议：

方案一：使用查询参数（Query Params） #

前端（Angular LocationService 修改） #

通过HttpClient.get的params配置项传递查询参数：

export class LocationService {
  private httpClient = inject(HttpClient);
  url: string = this.router.getRoute();

  getLocations(idCustomer: number): Observable<Location[]> {
    return this.httpClient.get<Location[]>(this.url, {
      params: { id_customer: idCustomer.toString() }
    });
  }
}

后端（Express 路由修改） #

从req.query中获取参数，而非req.body：

async function getLocationsByCustomer(req: Request, res: Response, next: NextFunction) {
  try {
    const idCustomer = parseInt(req.query.id_customer as string);
    if (isNaN(idCustomer)) {
      return res.status(400).json({ error: '无效的客户ID' });
    }

    // 必须用参数化查询防止SQL注入！
    const result = await runQueryAsync(
      `select * from dbo.locations where id_customer = @idCustomer;`,
      { idCustomer } // 假设你的runQueryAsync支持参数化传参
    );
    
    res.json(result.recordset);
  } catch (err) {
    console.error(`执行查询出错:`, err);
    next(err);
  }
}

locationRouter.get('/', getLocationsByCustomer);

方案二：使用路径参数（RESTful 风格） #

如果偏好语义化URL，可以把客户ID嵌入路径：

前端（Angular LocationService 修改） #

拼接路径参数到URL：

export class LocationService {
  private httpClient = inject(HttpClient);
  baseUrl: string = this.router.getRoute(); // 假设baseUrl为 /api/locations

  getLocations(idCustomer: number): Observable<Location[]> {
    return this.httpClient.get<Location[]>(`${this.baseUrl}/${idCustomer}`);
  }
}

后端（Express 路由修改） #

修改路由规则并从req.params提取参数：

// 更新路由，添加路径参数占位符
locationRouter.get('/:idCustomer', getLocationsByCustomer);

async function getLocationsByCustomer(req: Request, res: Response, next: NextFunction) {
  try {
    const idCustomer = parseInt(req.params.idCustomer);
    if (isNaN(idCustomer)) {
      return res.status(400).json({ error: '无效的客户ID' });
    }

    // 同样使用参数化查询防注入
    const result = await runQueryAsync(
      `select * from dbo.locations where id_customer = @idCustomer;`,
      { idCustomer }
    );
    
    res.json(result.recordset);
  } catch (err) {
    console.error(`执行查询出错:`, err);
    next(err);
  }
}

额外改进建议 #

• 杜绝SQL注入：你原来直接拼接参数到SQL语句的写法是高危漏洞，必须用参数化查询，上面的代码已经做了示例。
• 优化Angular订阅管理：手动subscribe容易引发内存泄漏，建议用async pipe自动处理：

  // 组件中直接暴露Observable
  export class GroupLocationsComponent {
    private locationService = inject(LocationService);
    @Input() customerItem!: Customer;
    locations$: Observable<Location[]> = this.locationService.getLocations(this.customerItem.id_customer);
  }
  

  模板中使用：

  <div *ngFor="let location of locations$ | async">
    <!-- 渲染位置数据 -->
  </div>
  

• 减少HTTP请求：如果客户数量多，每个子组件单独发请求会导致性能问题，建议在父组件一次性拉取所有客户的位置数据，再通过@Input传给子组件。
• 添加错误处理：前端请求时补充错误捕获逻辑，避免静默失败：

  this.locationService.getLocations(idCustomer).subscribe({
    next: locations => this.locationsArray.set(locations),
    error: err => console.error('获取位置数据失败:', err)
  });
  

内容的提问来源于stack exchange，提问作者Savyexe