在不共享 URL 的情况下获取正确的 ID

Posted 2023-03-07

【中文标题】在不共享 URL 的情况下获取正确的 ID

【英文标题】：Getting correct ID without sharing URL

【发布时间】：2018-04-18 01:50:08

【问题描述】：

我有一个 Angular 4 应用程序，我试图从 mysql 数据库中获取单行（使用 ID）。我正在将 NodeJS 与 ExpressJS 一起使用。但是，我正在努力寻找一种在不共享确切 URL 路径的情况下从 URL 获取 ID 的方法，因为这会导致网站只呈现 JSON 对象，而不是组件。

server.js

app.get('api/books/:id', (req, res) => console.log(req.params.id); );

如果 URL 是 localhost:3000/books/3，控制台将记录 :id。localhost:3000/api/books/3 将在控制台记录正确的 ID。问题是在我的 Angular 路由中使用后者作为我的 URL 将导致共享路径，这将不起作用。

这是我如何使用 Angular 的 HttpModule 向服务器发送 GET 请求的示例：

this.http.get('api/books/:id')
    .map(res => res.json())
    .subscribe(data => 
    this.bookDetail = data;
);

这是我使用 Angular 的 RouterModule 进行路由的路径：

 path: 'books/:id', component: BookDetailComponent 

我该如何解决这个问题？

【参考方案1】：

您需要创建一个函数，在该组件的初始化时，Angular 应用程序会触发对服务器的 HTTP 请求。例如，我有一个博客应用程序。

   path: 'blogs/:id', component: BlogComponent ,

ngOnInit() 
    this.route.params.subscribe(params => this.blog = params.id);
    this.getBlog(this.blog);

  getBlog(blog) 
    this.blogService.getBlog(blog).subscribe(
      data =>  this.foundBlog = data;
        if (data.comments) 
          this.comments = data.comments;
        

  getBlog(blog): Observable<any> 
    return this.http.get(`http://localhost:3000/api/blogs/$blog`).map(res => res.json());
  

第一个是我的路由，第二个是我博客组件上的init函数

第三个是blog组件上的get blog功能

最后是我的 blogservice 上的 get blog 函数，它发送 HTTP 请求

希望能有所帮助。

【讨论】：

这就像一个魅力！但是，我需要将'http://localhost:3000/api/books/$id' 更改为'http://localhost:3000/api/books/' + id。谢谢！

很高兴能帮上忙！