Tạo ứng dụng Angular gọi Restful Webservice (JAX-RS, Jersey)
Đăng lúc: 09:44 PM - 06/12/2023 bởi Charles Chung - 731Trong bài viết này tôi sẽ hướng dẫn các bạn tạo ứng dụng Angular để gọi Restful Webservice đã tạo tại các bài viết trước.
Chuẩn bị
- Mở ứng dụng Restful tại bài viết Tạo RESTful Web Service trong Java với Jersey và Oracle trong eclipse
- Enable CORS giống bài viết Enable CORS trong Restful Webservice(JAX-RS, Jersey) và Tạo ứng dụng Client sử dụng Ajax JQuery
- Chạy ứng dụng tại http://localhost:8080/...........
Tạo dự án Angular
- Mở cửa sổ dòng lệnh của windows
- Di chuyển đến thư mục cần tạo dự án và gõ lệnh
> ng new ConsumeRestfulWebserviceAngular --no-standalone
.................(y/N) gõ Enter
.................(y/N) gõ y rồi Enter
- Di chuyển đến thư mục project
> cd ConsumeRestfulWebserviceAngular
- Gõ tiếp lệnh tạo models
> ng g class models/Student
> ng g class models/Result
- Gõ tiếp lệnh tạo services
> ng g service services/Student
- Gõ tiếp các lệnh tạo components
> ng g c components/home
> ng g c components/student
> ng g c compoments/student/studentform
> ng g c components/about
> ng g c components/notfound
- Gõ tiếp lệnh để mở project ở Visual Code
> code .
- Mở file index.html sửa đổi như sau
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gọi RestfulWebService trong Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
- Mở tệp app.component.html sửa code như sau
<div class="container">
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>GỌI RESTFUL WEBSERVICE TRONG ANGULAR</h1>
<p>Đường tuy ngắn không đi không đến, việc tuy nhỏ không làm không xong!</p>
<a routerLink="home">Trang chủ</a> | <a routerLink="student">Sinh viên</a> | <a routerLink="about">Giới thiệu</a>
</div>
<router-outlet></router-outlet>
</div>
- Mở tệp app.module.ts import thêm 2 module sau
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
]
- Mở tệp app-routing.module.ts khai báo các route sau
const routes: Routes = [
{ path:'',component:HomeComponent },
{ path:'home',component:HomeComponent },
{ path:'student',component:StudentComponent },
{ path:'addStudent',component:StudentformComponent},
{ path:'editStudent/:id',component:StudentformComponent},
{ path:'about',component:AboutComponent },
{ path: '**',component: NotfoundComponent }
];
- Mở tệp models/result.ts bổ sung code sau
export class Result {
code?:number;
message?:string;
constructor(code?:number,message?:string){
this.code=code;
this.message=message;
}
}
- Mở tệp models/student.ts bổ sung code sau
export class Student {
studentId?: string;
fullName?: string;
gender?: number;
birthDay?: string;
email?: string;
phone?: string;
address?: string;
active?: number;
constructor(studentId?: string,
fullName?: string,
gender?: number,
birthDay?: string,
email?: string,
phone?: string,
address?: string,
active?: number) {
this.studentId = studentId;
this.fullName = fullName;
this.gender = gender;
this.birthDay = birthDay;
this.email = email;
this.phone = phone;
this.address = address;
this.active = active;
}
}
- Mở tệp services/student.service.ts bổ sung code sau
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Student } from '../models/student';
import { Result } from '../models/result';
@Injectable({
providedIn: 'root'
})
export class StudentService {
uri:string="http://localhost:8080/RestfulWebServiceJerseyOracle/api/students";
constructor(private client:HttpClient) { }
getAll=():Observable<Student[]>=>{
return this.client.get<Student[]>(this.uri);
}
search=(name:any):Observable<Student[]>=>{
return this.client.get<Student[]>(this.uri+"/search/"+name);
}
getById=(id:any):Observable<Student>=>{
return this.client.get<Student>(this.uri+"/"+ id);
}
update=(id:any,student:Student):Observable<Result>=>{
return this.client.put(this.uri+"/"+id,student)
}
insert=(student:Student):Observable<Result>=>{
return this.client.post(this.uri,student)
}
delete=(id:any):Observable<Result>=>{
return this.client.delete(this.uri+"/"+id)
}
}
- Mở tệp components/home/home.component.html bổ sung code sau
<h3>Hệ thống bài thực hành môn Xây dựng dịch vụ Web với Java</h3>
<p>Bài 1: Phát triển ứng dụng RESTful Web Service trong Java với thư viện Jersey</p>
<p>Bài 2: Tạo RESTful Web Service trong Java với Jersey và Oracle</p>
<p>Bài 3: Restful Webservice Upload file kèm dữ liệu JSON sử dụng Jersey trong Java và Oracle</p>
<p>Bài 4: Security trong Restful Webservice sử dụng Jersey 2 để sinh ra JWT</p>
<p>Bài 5: Tạo ứng dụng JSP-Servlet gọi Restful Webservice sử dụng thư viện Jersey Client</p>
<p>Bài 6: Enable CORS trong Restful Webservice(JAX-RS, Jersey) và Tạo ứng dụng Client sử dụng Ajax JQuery</p>
<p>Bài 7: Tạo ứng dụng Angular gọi Restful Webservice (JAX-RS, Jersey)</p>
<p>Bài 8: Tạo ứng dụng ReactJS gọi Restful Webservice (JAX-RS, Jersey)</p>
- Mở tệp components/student/student.component.ts bổ sung code sau
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Result } from 'src/app/models/result';
import { Student } from 'src/app/models/student';
import { StudentService } from 'src/app/services/student.service';
declare var $: any;
@Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.css']
})
export class StudentComponent {
title: string = "Danh sách sinh viên";
students: Array<Student> = [];
res:any;
constructor(private studentService: StudentService, private route: ActivatedRoute) { }
ngOnInit(): void {
this.studentService.getAll().subscribe(data => {
this.students = data;
});
}
deleteStudent=(id:any):void=>{
if(confirm('Bạn có muốn xóa không?')){
this.studentService.delete(id).subscribe({
next: (v) => {
// window.location.reload();
$('#'+id).remove();
}, error: (e) => {
this.res = new Result(e.status, e.error.msg ?? e.statusText);
}
})
}
}
}
- Mở tệp components/student/student.component.html bổ sung code sau
<h3>{{title}}</h3>
<a routerLink="/addStudent">Thêm sinh viên</a>
<hr>
<table class="table table-bordered">
<tr>
<th>Mã số</th>
<th>Họ và tên</th>
<th>Giới tính</th>
<th>Ngày sinh</th>
<th>Email</th>
<th>Điện thoại</th>
<th>Địa chỉ</th>
<th>Tình trạng</th>
<th></th>
</tr>
<tr *ngFor="let s of students" id="{{s.studentId}}">
<td>{{s.studentId}}</td>
<td>{{s.fullName}}</td>
<td>{{s.gender==1?'Nam':'Nữ'}}</td>
<td>{{s.birthDay}}</td>
<td>{{s.email}}</td>
<td>{{s.phone}}</td>
<td>{{s.address}}</td>
<td>{{s.active==1?'Đang học':'Dừng'}}</td>
<td>
<a class="btn btn-success btn-circle btn-sm" routerLink="/editStudent/{{s.studentId}}">Sửa</a> |<a class="btn btn-danger btn-circle btn-sm" (click)="deleteStudent(s.studentId)">Xóa</a>
</td>
</tr>
</table>
- Mở tệp components/student/studentform/studentform.component.ts bổ sung code sau
import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Result } from 'src/app/models/result';
import { Student } from 'src/app/models/student';
import { StudentService } from 'src/app/services/student.service';
@Component({
selector: 'app-studentform',
templateUrl: './studentform.component.html',
styleUrls: ['./studentform.component.css']
})
export class StudentformComponent {
st: any;
title: string = "Thêm mới sinh viên";
res: any;
btn_title: string = "Lưu";
id: any;
constructor(private services: StudentService, private route: ActivatedRoute, private router: Router) {
}
ngOnInit(): void {
this.id = this.route.snapshot.paramMap.get('id');//lấy tham số id
if (this.id != null) {
this.services.getById(this.id).subscribe({
next: (v) => {
this.st = v;
},
error: (e) => {
this.res = new Result(e.status, e.error.msg ?? e.statusText);
}
});
}
this.st = new Student();
}
insertOrUpdateStudent = (): void => {
if (this.id != null) {
//xử lý ngày tháng nulll
this.st.birthDay = (this.st.birthDay == '' || this.st.birthDay == undefined) ? '1970-01-01' : this.st.birthDay;
//update
this.services.update(this.id, this.st).subscribe({
next: (v) => {
this.res = v;
this.router.navigate(['/student']);
}, error: (e) => {
this.res = new Result(e.status, e.error.msg ?? e.statusText);
}
});
} else {
//xử lý ngày tháng nulll
this.st.birthDay = (this.st.birthDay == '' || this.st.birthDay == undefined) ? '1970-01-01' : this.st.birthDay;
if (this.st.studentId == null || this.st.studentId == '') {
this.res = new Result(501, "Hãy nhập mã sinh viên!");
return;
}
//insert
this.services.insert(this.st).subscribe({
next: (v) => {
this.router.navigate(['/student']);
}, error: (e) => {
console.log(e);
this.res = new Result(e.status, e.error.msg ?? e.statusText);
}
});
}
}
}
- Mở tệp components/student/studentform/studentform.component.html bổ sung code sau
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">{{title}}</h1>
</div>
<div class="text-danger">{{res?.message}}</div>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="studentId">Mã sinh viên</label>
<input required="required" type="text" class="form-control" id="studentId" [(ngModel)]="st.studentId"
name="studentId">
</div>
<div class="form-group">
<label for="fullName">Họ và tên</label>
<input required="required" type="text" class="form-control" id="fullName" [(ngModel)]="st.fullName"
name="fullName">
</div>
<div class="form-group">
<label for="birthDay">Ngày sinh</label>
<input type="date" class="form-control" id="birthDay"
[ngModel]="st.birthDay|date:'yyyy-MM-dd'"
(ngModelChange)="st.birthDay=$event" name="birthDay" />
</div>
<div class="form-group"><label for="gender">Giới tính</label>
<select class="form-control" id="gender" name="gender">
<option value="1">Nam</option>
<option value="0">Nữ</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" [(ngModel)]="st.email" name="email">
</div>
<div class="form-group">
<label for="phone">Điện thoại</label>
<input type="text" class="form-control" id="phone" [(ngModel)]="st.phone" name="phone">
</div>
<div class="form-group">
<label for="address">Địa chỉ</label>
<input type="text" class="form-control" id="address" [(ngModel)]="st.address" name="address" />
</div>
<div class="form-group"><label for="active">Tình trạng</label>
<select class="form-control" id="active" name="active">
<option value="1">Đang học</option>
<option value="0">Dừng</option>
</select>
</div>
</div>
</div><button type="button" (click)="insertOrUpdateStudent()" class="btn btn-primary">{{btn_title}}</button>
<a href="javascript:history.back()" class="btn btn-info">Quay lại</a>
</form>
Run ứng dụng: tại cửa sổ dòng lệnh gõ lệnh sau để chạy
> ng serve -o
- Màn hình sinh viên
- Màn hình thêm sinh viên
Video demo
Link tải source code
thay lời cảm ơn!
Các bài cũ hơn
- Enable CORS trong Restful Webservice(JAX-RS, Jersey) và Tạo ứng dụng Client sử dụng Ajax JQuery (02:57 PM - 05/12/2023)
- Tạo ứng dụng JSP-Servlet gọi Restful Webservice sử dụng thư viện Jersey Client (04:40 PM - 01/12/2023)
- Security trong Restful Webservice sử dụng Jersey 2 để sinh ra JWT (07:24 PM - 29/11/2023)
- Restful Webservice Upload file kèm dữ liệu JSON sử dụng Jersey trong Java và Oracle (09:47 AM - 27/11/2023)
- Tạo RESTful Web Service trong Java với Jersey và Oracle (10:41 AM - 24/11/2023)
