Для чего нужна данная статья? :
- Создать RESTful API для вашего Angular/Ionic приложения.
- Найти компромиссы между разными стеками.
Зачем Вам это уметь? :
Для создания более гибких API - необходимы Вам и тем кто потребляет Ваш код.
Для поиска компромисса между двоичным размером и производительностью.
Создадим CRUD (Create, Read, Update, Delete) API для управления списком задач:
// Добавьте зависимости в ваш Cargo.toml
// [dependencies]
// actix = "0.14"
// actix-web = "4.0"
// serde = "1.0"
// serde_derive = "1.0"
use actix_web::{web, App, HttpServer, Responder};
use serde::{Deserialize, Serialize};
#[derive(Debug, Serialize, Deserialize)]
struct Task {
id: usize,
description: String,
done: bool,
}
#[derive(Debug, Serialize, Deserialize)]
struct TaskList {
tasks: Vec<Task>,
}
// Обработчик для получения списка задач
async fn get_tasks() -> impl Responder {
let task_list = TaskList {
tasks: vec![
Task {
id: 1,
description: String::from("Do something"),
done: false,
},
Task {
id: 2,
description: String::from("Learn Rust"),
done: true,
},
],
};
web::Json(task_list)
}
// Обработчик для создания новой задачи
async fn create_task(task: web::Json<Task>) -> impl Responder {
// Ваша логика по добавлению задачи в базу данных или в память
// Здесь просто возвращаем созданную задачу
web::Json(task.into_inner())
}
// Обработчик для обновления существующей задачи
async fn update_task(task: web::Json<Task>) -> impl Responder {
// Ваша логика по обновлению задачи в базе данных или в памяти
// Здесь просто возвращаем обновленную задачу
web::Json(task.into_inner())
}
// Обработчик для удаления задачи
async fn delete_task(path: web::Path<(usize,)>) -> impl Responder {
let task_id = path.0;
// Ваша логика по удалению задачи из базы данных или из памяти
// Здесь просто возвращаем сообщение об успешном удалении
web::Json(format!("Task with id {} deleted successfully", task_id))
}
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| {
App::new()
.route("/tasks", web::get().to(get_tasks))
.route("/tasks", web::post().to(create_task))
.route("/tasks", web::put().to(update_task))
.route("/tasks/{id}", web::delete().to(delete_task))
})
.bind("127.0.0.1:8080")?
.run()
.await
}
Установите Angular CLI и Ionic CLI, если у вас их еще нет:
npm install -g @angular/cli
npm install -g @ionic/cli
Создайте новый Ionic Angular проект:
ionic start myApp blank --type=angular
Создайте Angular сервис, который будет взаимодействовать с вашим бэкендом. В файле src/app/task.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class TaskService {
private baseUrl = 'http://127.0.0.1:8080';
constructor(private http: HttpClient) {}
getTasks(): Observable<any> {
return this.http.get(`${this.baseUrl}/tasks`);
}
createTask(task: any): Observable<any> {
return this.http.post(`${this.baseUrl}/tasks`, task);
}
updateTask(task: any): Observable<any> {
return this.http.put(`${this.baseUrl}/tasks`, task);
}
deleteTask(id: number): Observable<any> {
return this.http.delete(`${this.baseUrl}/tasks/${id}`);
}
}
Используйте созданный сервис для отображения и взаимодействия с задачами. В файле src/app/home/home.page.ts:
import { Component } from '@angular/core';
import { TaskService } from '../task.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
tasks: any[];
constructor(private taskService: TaskService) {}
ionViewWillEnter() {
this.loadTasks();
}
loadTasks() {
this.taskService.getTasks().subscribe(data => {
this.tasks = data.tasks;
});
}
createTask(description: string) {
const newTask = { id: 0, description, done: false };
this.taskService.createTask(newTask).subscribe(() => {
this.loadTasks();
});
}
updateTask(task: any) {
this.taskService.updateTask(task).subscribe(() => {
this.loadTasks();
});
}
deleteTask(id: number) {
this.taskService.deleteTask(id).subscribe(() => {
this.loadTasks();
});
}
}
Отредактируйте файл src/app/home/home.page.html для отображения задач и добавления формы:
<ion-header>
<ion-toolbar>
<ion-title>
Tasks
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list *ngFor="let task of tasks">
<ion-item>
<ion-label>{{ task.description }}</ion-label>
<ion-checkbox [(ngModel)]="task.done" (ionChange)="updateTask(task)"></ion-checkbox>
<ion-button color="danger" (click)="deleteTask(task.id)">Delete</ion-button>
</ion-item>
</ion-list>
<ion-item>
<ion-label position="floating">New Task</ion-label>
<ion-input [(ngModel)]="newTaskDescription" clearInput></ion-input>
</ion-item>
<ion-button expand="full" (click)="createTask(newTaskDescription)">Add Task</ion-button>
</ion-content>
Отредактируйте файл src/app/home/home.page.scss:
ion-content {
ion-list {
ion-item {
ion-checkbox {
margin-left: auto;
}
}
}
}
Теперь вы можете запустить ваше Ionic приложение:
ionic serve
Откройте браузер по адресу http://localhost:8100/ и убедитесь, что задачи отображаются и что вы можете добавлять, обновлять и удалять их через ваш Angular/Ionic интерфейс.
