Xem toàn bộ series bài viết hướng dẫn xây dựng ứng dụng Questions Management tại đây.
Chúng ta đã xây dựng được API Gateway cho ứng dụng Questions Management, giờ là lúc chúng ta sẽ chỉnh sửa Front-end để nó chỉ gọi tới hệ thống Microservice của ứng dụng này thông qua API Gateway các bạn nhé.
Có 3 class trong phần Front-end sẽ gọi tới API Category Service, API Question Service, API Option Service là CategoriesService, OptionsService và QuestionsService. Chúng đều nằm trong thư mục src/app/services. Chúng ta sẽ cần sửa context path (thêm “/qm”) sẽ gọi tới các service trong các method của các class này như sau:
CategoriesService:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
... findAllCategories(): Promise<Category[]> { return this.http.get<Category[]>("/qm/category/all").toPromise(); } addCategory(category: Category) { return this.http.post("/qm/category/add", JSON.stringify(category), { headers: this.headers }).toPromise(); } updateCategory(category: Category) { return this.http.put("/qm/category/" + category.id, JSON.stringify(category), { headers: this.headers }).toPromise(); } deleteCategory(id: string) { return this.http.delete("/qm/category/" + id).toPromise(); } ... |
OptionsService:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
... addOption(option: Option) { return this.http.post("/qm/option/add", JSON.stringify(option), { headers: this.headers }).toPromise(); } updateOption(option: Option) { return this.http.put("/qm/option/" + option.id, JSON.stringify(option), { headers: this.headers }).toPromise(); } deleteOption(id: string) { return this.http.delete("/qm/option/" + id).toPromise(); } ... |
QuestionsService:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
... findAllQuestions(): Promise<CompositeQuestion[]> { return this.http.get<CompositeQuestion[]>("/qm/question/all").toPromise(); } findQuestionById(id: String): Promise<CompositeQuestion> { return this.http.get<CompositeQuestion>("/qm/question/" + id).toPromise(); } addQuestion(question: Question): Promise<CompositeQuestion> { return this.http.post<CompositeQuestion>("/qm/question/add", JSON.stringify(question), { headers: this.headers }).toPromise(); } updateQuestion(question: Question) { return this.http.put("/qm/question/" + question.id, JSON.stringify(question), { headers: this.headers }).toPromise(); } deleteQuestion(id: string) { return this.http.delete("/qm/question/" + id).toPromise(); } ... |
Tiếp theo, chúng ta cần sửa lại tập tin proxy.config.json để nó chỉ gọi tới API Gateway như sau:
|
1 2 3 4 5 6 7 |
{ "/qm/*": { "target": "http://localhost:8380", "secure": false, "logLevel": "debug" } } |
Lúc này, nếu các bạn start ứng dụng Questions Management lên, các bạn sẽ thấy nó work bình thường.
