07/01/2019, 14:08
Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB – Phần 2
Ở bài viết trước mình đã hướng dẫn xong thiết lập cho cả front và server(tại đây). Để chuẩn bị tiếp cho các phần hay ho như xử lý authentication, sessions… thì ở bài viết này mình xin hướng dẫn cách kết nối và liên lạc giữa front-server bằng cách tạo trang CRUD đơn giản. Tương ...
Ở bài viết trước mình đã hướng dẫn xong thiết lập cho cả front và server(tại đây). Để chuẩn bị tiếp cho các phần hay ho như xử lý authentication, sessions… thì ở bài viết này mình xin hướng dẫn cách kết nối và liên lạc giữa front-server bằng cách tạo trang CRUD đơn giản.
Tương tự như các hệ ứng dụng client-server khác. Ở hệ thống này chúng ta sẽ xây dựng api để nhận request và gửi lại response cho client.
Tạo component manage users.
Trong thư mục app chúng ta tạo thư mục login với 3 file login.component.ts, login.component.html và login.component.scss giống như thư mục home và thiết kế html, css và định nghĩa sẵn các method sẽ dùng cho công việc của mình.
/front/src/app/manage_users/manage_users.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-manage-users',
templateUrl: './manage_users.component.html',
styleUrls: ['./manage_users.component.scss']
})
export class ManageUsersComponent implements OnInit {
ngOnInit() {
this.load();
}
constructor() { }
listUsers = [];
type = 'Add'
user = {
id: ',
name: ',
age: ',
sex: ',
email: '
}
load() {
//Code
}
submit() {
if (this.type == 'Add') {
//code
}
else {
//code
}
}
create() {
//code
}
update(id) {
//code
}
delete(id) {
//code
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/front/src/app/manage_users/manage_users.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-manage-users', templateUrl: './manage_users.component.html', styleUrls: ['./manage_users.component.scss'] }) export class ManageUsersComponent implements OnInit { ngOnInit() { this.load(); } constructor() { } listUsers = []; type = 'Add' user = { id: ', name: ', age: ', sex: ', email: ' } load() { //Code } submit() { if (this.type == 'Add') { //code } else { //code } } create() { //code } update(id) { //code } delete(id) { //code } |
/front/src/app/manage_users/manage_users.component.html
<div><h3>MANAGE USERS</h3>
<div>
<div>
<span class="title">ID</span>
<input type="text" name="" [(ngModel)]="user.id" [disabled]="type == 'Edit'">
</div>
<div>
<span class="title">Name</span>
<input type="text" name="" [(ngModel)]="user.name">
</div>
<div>
<span class="title">Age</span>
<input type="text" name="" [(ngModel)]="user.age">
</div>
<div>
<span class="title">Sex</span>
<input name="sex" type="radio" value="Male" [(ngModel)]="user.sex"> Nam
<input name="sex" type="radio" value="Female" [(ngModel)]="user.sex"> Nu
</div>
<div>
<span class="title">Email</span>
<input type="text" name="" [(ngModel)]="user.email">
</div>
<button (click)='load()'>Refresh</button>
<button (click)='create()'> New user</button>
<button (click)='submit()'>Submit</button>
</div>
<div class="list-users">
<table class="table table-hover">
<thead>
<tr class="table-title">
<td>Id</td>
<td>Name</td>
<td>Sex</td>
<td>Age</td>
<td>Email</td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of listUsers">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.sex == 'Male' ? 'Nam' : 'Nu'}}</td>
<td>{{user.age}}</td>
<td>{{user.email}}</td>
<td><button (click)='update(user.id)'>Update</button><button (click)='delete(user.id)'>Detele</button></td>
</tr>
</tbody>
</table>
</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/front/src/app/manage_users/manage_users.component.html <div><h3>MANAGE USERS</h3> <div> <div> <span class="title">ID</span> <input type="text" name="" [(ngModel)]="user.id" [disabled]="type == 'Edit'"> </div> <div> <span class="title">Name</span> <input type="text" name="" [(ngModel)]="user.name"> </div> <div> <span class="title">Age</span> <input type="text" name="" [(ngModel)]="user.age"> </div> <div> <span class="title">Sex</span> <input name="sex" type="radio" value="Male" [(ngModel)]="user.sex"> Nam <input name="sex" type="radio" value="Female" [(ngModel)]="user.sex"> Nu </div> <div> <span class="title">Email</span> <input type="text" name="" [(ngModel)]="user.email"> </div> <button (click)='load()'>Refresh</button> <button (click)='create()'> New user</button> <button (click)='submit()'>Submit</button> </div> <div class="list-users"> <table class="table table-hover"> <thead> <tr class="table-title"> <td>Id</td> <td>Name</td> <td>Sex</td> <td>Age</td> <td>Email</td> <td></td> </tr> </thead> <tbody> <tr *ngFor="let user of listUsers"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.sex == 'Male' ? 'Nam' : 'Nu'}}</td> <td>{{user.age}}</td> <td>{{user.email}}</td> <td><button (click)='update(user.id)'>Update</button><button (click)='delete(user.id)'>Detele</button></td> </tr> </tbody> </table> </div> |
/front/src/app/manage_users/manage_users.component.scss
.title {
display: inline-block;
awidth: 50px;
margin-bottom: 5px;
}
button {
padding: 5px;
margin: 5px;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/front/src/app/manage_users/manage_users.component.scss .title { display: inline-block; awidth: 50px; margin-bottom: 5px; } button { padding: 5px; margin: 5px; } |
Thêm 1 route cho trang manage users (url định nghĩa ở angular 2 và ở python phải giống nhau)
/front/src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ManageUsersComponent } from './manage_users/manage_users.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'users', component: ManageUsersComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/front/src/app/app-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { ManageUsersComponent } from './manage_users/manage_users.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'users', component: ManageUsersComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
Tạo service xử lý request và nhận response từ server.
Từ thư mục app chúng ta tạo thư mục services và file users.service.ts để xử lý những gì liên quan đến user. Trong service này cũng sẽ chứa các phương thức tương ứng với các chức năng CRUD.
/front/src/app/services/users.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UsersService {
constructor(
private http: HttpClient
) { }
getAllUsers() {
return this.http.get<any>('api/all_users');
}
deleteUser(id) {
var params = {id: id}
return this.http.post<any>('api/delete_user', params);
}
addUser(id, name, sex, age, email) {
var params = {
id: id,
name: name,
sex: sex,
age: age,
email: email
}
return this.http.post<any>('api/add_user', params);
}
updateUser(id, name, sex, age, email) {
var params = {
id: id,
name: name,
sex: sex,
age: age,
email: email
}
return this.http.post<any>('api/update_user', params);
}
}
