那家网站建设好,南充房产网二手房出售信息,宝安网站设计最好的公司,wordpress上传图片dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件#xff0c;日历事件通过Ajax动态加载#xff0c;支持通过拖放功能调整事件日期和时间#xff0c;事件可以按天#xff0c;周#xff0c;月三个种视图显示。 DHTMLX Scheduler正式版下载 在本教程中…dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件日历事件通过Ajax动态加载支持通过拖放功能调整事件日期和时间事件可以按天周月三个种视图显示。 DHTMLX Scheduler正式版下载 在本教程中我们将使用两个强大的工具DHTMLX Scheduler库和Angular框架来创建一个全面的酒店客房预订应用程序。在上文中点击这里回顾我们为大家介绍了一些基础的准备工作及如何创建Scheduler组件本文将继续介绍数据相关的问题、服务器配置等。 Step 4 – 提供和保存数据 数据加载 要在Angular Scheduler中添加数据加载您需要添加reservation和collections服务。但在此之前让我们为项目创建并配置一个环境文件执行如下命令 ng generate environments 在src/environments文件夹下新创建的environment.development.ts文件中我们将添加以下代码 export const environment { production: false, apiBaseUrl: http://localhost:3000/data }; 我们还将为错误创建一个助手当出现错误时它将通过向控制台发送错误消息来通知用户。为此用以下代码在app/services.ts文件夹中创建service- helpers文件 export function HandleError(error: any): Promiseany{ console.log(error); return Promise.reject(error); } 现在让我们创建预订和收集服务执行如下命令 ng generate service services/reservation --flat --skip-testsng generate service services/collections --flat --skip-tests 在services文件夹中新创建的reservation.service.ts文件中我们将添加以下代码 import { Injectable } from angular/core; import { Reservation } from ../models/reservation; import { HttpClient } from angular/common/http; import { HandleError } from ./service-helper; import { firstValueFrom } from rxjs; import { environment } from ../../environments/environment.development;Injectable() export class ReservationService { private reservationUrl ${environment.apiBaseUrl}/reservations;constructor(private http: HttpClient) { }get(): PromiseReservation[]{ return firstValueFrom(this.http.get(this.reservationUrl)) .catch(HandleError); }insert(reservation: Reservation): PromiseReservation { return firstValueFrom(this.http.post(this.reservationUrl, reservation)) .catch(HandleError); }update(reservation: Reservation): Promisevoid { return firstValueFrom(this.http.put(${this.reservationUrl}/${reservation.id}, reservation)) .catch(HandleError); }remove(id: number): Promisevoid { return firstValueFrom(this.http.delete(${this.reservationUrl}/${id})) .catch(HandleError); } } 在新创建的collections.service.ts文件中添加以下代码行 import { Injectable } from angular/core; import { Room } from ../models/room.model; import { RoomType } from ../models/room-type.model; import { CleaningStatus } from ../models/cleaning-status.model; import { BookingStatus } from ../models/booking-status.model; import { HttpClient } from angular/common/http; import { HandleError } from ./service-helper; import { firstValueFrom } from rxjs; import { environment } from ../../environments/environment.development;Injectable() export class CollectionsService { private collectionsUrl ${environment.apiBaseUrl}/collections;constructor(private http: HttpClient) { }getRooms(): PromiseRoom[]{ return firstValueFrom(this.http.get(${this.collectionsUrl}/rooms)) .catch(HandleError); }updateRoom(room: Room): Promisevoid { return firstValueFrom(this.http.put(${this.collectionsUrl}/rooms/${room.id}, room)) .catch(HandleError); }getRoomTypes(): PromiseRoomType[]{ return firstValueFrom(this.http.get(${this.collectionsUrl}/roomTypes)) .catch(HandleError); }getCleaningStatuses(): PromiseCleaningStatus[]{ return firstValueFrom(this.http.get(${this.collectionsUrl}/cleaningStatuses)) .catch(HandleError); }getBookingStatuses(): PromiseBookingStatus[]{ return firstValueFrom(this.http.get(${this.collectionsUrl}/bookingStatuses)) .catch(HandleError); } } get()、getRooms()、getRoomTypes()、getCleaningStatuses()和getBookingStatuses()方法从服务器检索数据。 reservationUrl和collectionurl是服务的私有元素它们包含REST API的URL。为了发送HTTP请求一个HTTP类被注入到服务中。 要插入新项需要向URL发送POST请求请求体中包含新项。 要更新项需要向url/item_id发送一个PUT请求。此请求还在其主体中包含更新后的项。 要删除项需要向url/item_id发送删除请求。 CRUD操作 服务应该处理调度器中的CRUD操作通过在reservations.service.ts和collections.service.ts文件中添加HttpClient模块HTTP通信已经启用 import { HttpClient } from angular/common/http; 这一步允许我们在Angular应用中无缝地获取数据。 要利用HttpClient模块还需要从angular/common/http包中包含必需的HttpClientModule。在app.module.ts文件中您应该像下面这样更新imports数组 import { NgModule } from angular/core; import { BrowserModule } from angular/platform-browser;import { AppRoutingModule } from ./app-routing.module; import { AppComponent } from ./app.component; import { SchedulerComponent } from ./scheduler/scheduler.component;import { FormsModule } from angular/forms; import { HttpClientModule } from angular/common/http;NgModule({ declarations: [ AppComponent, SchedulerComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } HTMLX Scheduler组件应该使用ReservationService和CollectionsService来获取/插入/更新/删除预订和集合为了启用这些选项向组件添加ReservationService和CollectionsService。首先在scheduler.component.ts中导入服务所需的模块 import { ReservationService } from ../services/reservation.service; import { CollectionsService } from ../services/collections.service; 您还应该将Component装饰器中指定EventService作为提供商 providers: [ ReservationService, CollectionsService ] 现在每次初始化一个新的SchedulerComponent时都会创建一个新的服务实例。 服务应该准备好被注入到组件中。为此将以下构造函数添加到SchedulerComponent类中 constructor( private reservationService: ReservationService, private collectionsService: CollectionsService ) { } 接下来我们将添加updateRoom()方法来在数据库中保存room清洁状态的更改 handleCleaningStatusChange(target: HTMLSelectElement) { ... this.collectionsService.updateRoom(roomToUpdate); } 您需要修改ngOnInit函数来调用服务获取该函数然后等待响应来将数据放入调度器。 scheduler.init(this.schedulerContainer.nativeElement, new Date(), timeline);const dp scheduler.createDataProcessor({ event: { create: (data: Reservation) this.reservationService.insert(data), update: (data: Reservation) this.reservationService.update(data), delete: (id: number) this.reservationService.remove(id), } });forkJoin({ reservations: this.reservationService.get(), rooms: this.collectionsService.getRooms(), roomTypes: this.collectionsService.getRoomTypes(), cleaningStatuses: this.collectionsService.getCleaningStatuses(), bookingStatuses: this.collectionsService.getBookingStatuses() }).subscribe({ next: ({ reservations, rooms, roomTypes, cleaningStatuses, bookingStatuses }) { const data { events: reservations, collections: { rooms, roomTypes, cleaningStatuses, bookingStatuses, } };scheduler.parse(data); }, error: error { console.error(An error occurred:, error); } }); scheduler.parse接受JSON格式的数据对象为了有效地等待多个异步请求的完成并将它们的数据(保留和集合)加载到调度器中可以利用RxJS库中的forkJoin操作符。请包括导入 import { forkJoin } from rxjs; 你可以在GitHub上查看scheduler.components.ts文件的完整代码。