dhtmlxScheduler是一個(gè)類似于Google日歷的JavaScript日程安排控件，日歷事件通過Ajax動(dòng)態(tài)加載，支持通過拖放功能調(diào)整事件日期和時(shí)間，事件可以按天，周，月三個(gè)種視圖顯示。

在本教程中，我們將使用兩個(gè)強(qiáng)大的工具：DHTMLX Scheduler庫和Angular框架來創(chuàng)建一個(gè)全面的酒店客房預(yù)訂應(yīng)用程序。在上文中（點(diǎn)擊這里回顧>>）我們?yōu)榇蠹医榻B了提供保存數(shù)據(jù)中的數(shù)據(jù)加載、CRUD操作實(shí)現(xiàn)等，本文將繼續(xù)介紹服務(wù)器配置。

Step 5 – 服務(wù)器配置

現(xiàn)在讓我們繼續(xù)為應(yīng)用程序設(shè)置Node.js服務(wù)器，本教程使用Express框架和MySQL作為數(shù)據(jù)存儲。

添加依賴項(xiàng)和安裝模塊

您應(yīng)該設(shè)置MySQL服務(wù)器，或者可以使用其他服務(wù)，例如免費(fèi)MySQL托管。

添加express、mysql和date-format-lite模塊：

$ npm install express mysql date-format-lite

server.js被指定為上面的輸入點(diǎn)，現(xiàn)在讓我們在項(xiàng)目的根目錄下創(chuàng)建server文件夾，并添加server.js文件，代碼如下：

const express = require('express'); // use Express
const app = express(); // create application
const port = 3000; // port for listening
const cors = require('cors');
app.use(cors()); // enable CORS for all routes

// MySQL will be used for db access and util to promisify queries
const util = require('util');
const mysql = require('mysql');

// use your own parameters for database
const mysqlConfig = {
'connectionLimit': 10,
'host': 'localhost',
'user': 'root',
'password': '',
'database': 'room_reservation_node'
};

app.use(express.json()); // Enable JSON body parsing
// return static pages from the './public' directory
app.use(express.static(__dirname + '/public'));

// start server
app.listen(port, () = {
console.log('Server is running on port ' + port + '...');
});

const router = require('./router');

// open connection to mysql
const connectionPool = mysql.createPool(mysqlConfig);
connectionPool.query = util.promisify(connectionPool.query);

// add listeners to basic CRUD requests
const DatabaseHandler = require('./databaseHandler');
const databaseHandler = new DatabaseHandler(connectionPool);
router.setRoutes(app, '/data', databaseHandler);

然后打開package.json文件夾，將start語句替換為：

"scripts": {
"ng": "ng",
"start": "concurrently \"node server/server.js\" \"ng serve\"",
…

我們將使用concurrent包來同時(shí)啟動(dòng)服務(wù)器和客戶端應(yīng)用程序，因此添加concurrent模塊：

$ npm install concurrently

準(zhǔn)備數(shù)據(jù)庫

讓我們將Scheduler連接到數(shù)據(jù)庫，并定義在其中讀取和寫入項(xiàng)的方法。

• 創(chuàng)建數(shù)據(jù)庫：

首先我們需要一個(gè)數(shù)據(jù)庫來工作，您可以使用自己喜歡的mysql-client或通過控制臺創(chuàng)建數(shù)據(jù)庫。

要使用mysql-client創(chuàng)建數(shù)據(jù)庫，打開它并執(zhí)行下面的代碼，創(chuàng)建預(yù)訂表：

CREATE TABLE `reservations` (
`id` bigint(20) unsigned AUTO_INCREMENT,
`start_date` datetime NOT NULL,
`end_date` datetime NOT NULL,
`text` varchar(255) DEFAULT NULL,
`room` varchar(255) DEFAULT NULL,
`booking_status` varchar(255) DEFAULT NULL,
`is_paid` BOOLEAN DEFAULT NULL CHECK (is_paid IN (0, 1)),
PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8;

讓我們添加一些測試數(shù)據(jù)：

INSERT INTO `reservations` VALUES (2, '2023-08-01', '2023-08-11', 'RSV2023-08-01ABC124', 3, 4, true);
INSERT INTO `reservations` VALUES (3, '2023-08-07', '2023-08-17', 'RSV2023-08-07ABC126', 5, 3, true);
INSERT INTO `reservations` VALUES (4, '2023-08-04', '2023-08-16', 'RSV2023-08-04ABC125', 7, 4, false);
INSERT INTO `reservations` VALUES (13, '2023-07-28', '2023-08-14', 'RSV2023-07-28ABC123', 1, 4, true);
INSERT INTO `reservations` VALUES (14, '2023-08-14', '2023-08-27', 'RSV2023-08-14ABC129', 1, 3, false);
INSERT INTO `reservations` VALUES (15, '2023-08-19', '2023-08-29', 'new booking', 4, 1, false);
INSERT INTO `reservations` VALUES (16, '2023-08-24', '2023-08-31', 'new booking', 11, 1, false);
INSERT INTO `reservations` VALUES (17, '2023-08-17', '2023-08-26', 'RSV2023-08-17ABC135', 6, 2, false);
INSERT INTO `reservations` VALUES (18, '2023-08-18', '2023-08-31', 'RSV2023-08-18ABC139', 9, 2, false);
INSERT INTO `reservations` VALUES (19, '2023-08-02', '2023-08-12', 'RSV2023-08-02ABC127', 10, 4, true);
INSERT INTO `reservations` VALUES (20, '2023-08-12', '2023-08-21', 'RSV2023-08-12ABC130', 10, 3, false);

創(chuàng)建房間表：

CREATE TABLE `rooms` (
`id` bigint(20) unsigned AUTO_INCREMENT,
`value` varchar(255) DEFAULT NULL,
`label` varchar(255) DEFAULT NULL,
`type` varchar(255) DEFAULT NULL,
`cleaning_status` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8;

添加一些測試數(shù)據(jù)：

INSERT INTO `rooms` VALUES ('1', '1', '101', '1', '1');
INSERT INTO `rooms` VALUES ('2', '2', '102', '1', '3');
INSERT INTO `rooms` VALUES ('3', '3', '103', '1', '2');
INSERT INTO `rooms` VALUES ('4', '4', '104', '1', '1');
INSERT INTO `rooms` VALUES ('5', '5', '105', '2', '1');
INSERT INTO `rooms` VALUES ('6', '6', '201', '2', '2');
INSERT INTO `rooms` VALUES ('7', '7', '202', '2', '1');
INSERT INTO `rooms` VALUES ('8', '8', '203', '3', '3');
INSERT INTO `rooms` VALUES ('9', '9', '204', '3', '3');
INSERT INTO `rooms` VALUES ('10', '10', '301', '4', '2');
INSERT INTO `rooms` VALUES ('11', '11', '302', '4', '2');
INSERT INTO `rooms` VALUES ('12', '12', '303', '1', '2');

創(chuàng)建roomTypes表：

CREATE TABLE `roomTypes` (
`id` bigint(20) unsigned AUTO_INCREMENT,
`value` varchar(255) DEFAULT NULL,
`label` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8;

添加一些測試數(shù)據(jù)：

INSERT INTO `roomTypes` VALUES ('1', '1', '1 bed');
INSERT INTO `roomTypes` VALUES ('2', '2', '2 bed');
INSERT INTO `roomTypes` VALUES ('3', '3', '3 bed');
INSERT INTO `roomTypes` VALUES ('4', '4', '4 bed');

創(chuàng)建cleaningStatuses表：

CREATE TABLE `cleaningStatuses` (
`id` bigint(20) unsigned AUTO_INCREMENT,
`value` varchar(255) DEFAULT NULL,
`label` varchar(255) DEFAULT NULL,
`color` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8;

添加一些測試數(shù)據(jù)：

INSERT INTO `cleaningStatuses` VALUES ('1', '1', 'Ready', '#43a047');
INSERT INTO `cleaningStatuses` VALUES ('2', '2', 'Dirty', '#e53935');
INSERT INTO `cleaningStatuses` VALUES ('3', '3', 'Clean up', '#ffb300');

創(chuàng)建bookingStatuses表：

CREATE TABLE `bookingStatuses` (
`id` bigint(20) unsigned AUTO_INCREMENT,
`value` varchar(255) DEFAULT NULL,
`label` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8;

添加一些測試數(shù)據(jù)：

INSERT INTO `bookingStatuses` VALUES ('1', '1', 'New');
INSERT INTO `bookingStatuses` VALUES ('2', '2', 'Confirmed');
INSERT INTO `bookingStatuses` VALUES ('3', '3', 'Arrived');
INSERT INTO `bookingStatuses` VALUES ('4', '4', 'Checked Out');

• 實(shí)現(xiàn)數(shù)據(jù)訪問：

所有的讀/寫邏輯都將在一個(gè)名為DatabaseHandler的單獨(dú)模塊中定義，它將使用mysql連接并在指定的表中執(zhí)行簡單的CRUD操作：讀取所有項(xiàng)，插入新項(xiàng)，更新或刪除現(xiàn)有項(xiàng)。為此創(chuàng)建databaseHandler.js文件，并將以下代碼添加到其中：

require('date-format-lite'); // add date format

class DatabaseHandler {
constructor(connection, table) {
this._db = connection;
this.table = 'reservations';
}

/// ↓↓↓ reservations handler ↓↓↓
// get reservations, use dynamic loading if parameters sent
async getAllReservations(params) {
let query = 'SELECT * FROM ??';
let queryParams = [
this.table
];

let result = await this._db.query(query, queryParams);

result.forEach((entry) = {
// format date and time
entry.start_date = entry.start_date.format('YYYY-MM-DD hh:mm');
entry.end_date = entry.end_date.format('YYYY-MM-DD hh:mm');
});

return result;
}

// create new reservation
async insert(data) {
let result = await this._db.query(
'INSERT INTO ?? (`start_date`, `end_date`, `text`, `room`, `booking_status`, `is_paid`) VALUES (?,?,?,?,?,?)',
[this.table, data.start_date, data.end_date, data.text, data.room, data.booking_status, data.is_paid]);

return {
action: 'inserted',
tid: result.insertId
}
}

// update reservation
async update(id, data) {
await this._db.query(
'UPDATE ?? SET `start_date` = ?, `end_date` = ?, `text` = ?, `room` = ?, `booking_status` = ?, `is_paid` = ? WHERE id = ?',
[this.table, data.start_date, data.end_date, data.text, data.room, data.booking_status, data.is_paid, id]);

return {
action: 'updated'
}
}

// delete reservation
async delete(id) {
await this._db.query(
'DELETE FROM ?? WHERE `id`=? ;',
[this.table, id]);

return {
action: 'deleted'
}
}
/// ↑↑↑ reservations handler ↑↑↑

/// ↓↓↓ room cleanup status handler ↓↓↓
// get rooms
async getAllRooms(params) {
let query = 'SELECT * FROM ??';
let queryParams = [
'rooms'
];

let result = await this._db.query(query, queryParams);

return result;
}

// update room cleanup status
async updateRoomCleaningStatus(id, data) {
await this._db.query(
'UPDATE ?? SET `value` = ?, `label` = ?, `type` = ?, `cleaning_status` = ? WHERE id = ?',
['rooms', data.key, data.label, data.type, data.cleaning_status, id]);

return {
action: 'updated'
}
}
/// ↑↑↑ room cleanup status handler ↑↑↑

/// ↓↓↓ get room types ↓↓↓
async getRoomTypes(params) {
let query = 'SELECT * FROM ??';
let queryParams = [
'roomTypes'
];

let result = await this._db.query(query, queryParams);

return result;
}
/// ↑↑↑ get room types ↑↑↑

/// ↓↓↓ get cleaning statuses ↓↓↓
async getCleaningStatuses(params) {
let query = 'SELECT * FROM ??';
let queryParams = [
'cleaningStatuses'
];

let result = await this._db.query(query, queryParams);

return result;
}
/// ↑↑↑ get cleaning statuses ↑↑↑

/// ↓↓↓ get booking statuses ↓↓↓
async getBookingStatuses(params) {
let query = 'SELECT * FROM ??';
let queryParams = [
'bookingStatuses'
];

let result = await this._db.query(query, queryParams);

return result;
}
/// ↑↑↑ get booking statuses ↑↑↑
}

module.exports = DatabaseHandler;

路由

然后需要設(shè)置路由，以便放置在頁面上的調(diào)度器可以訪問存儲。為此創(chuàng)建另一個(gè)helper模塊，并將其命名為router.js：

function callMethod (method) {
return async (req, res) = {
let result;

try {
result = await method(req, res);
} catch (e) {
result = {
action: 'error',
message: e.message
}
}

res.send(result);
}
};

module.exports = {
setRoutes (app, prefix, databaseHandler) {
/// ↓↓↓ reservations router ↓↓↓
app.get(`${prefix}/reservations`, callMethod((req) = {
return databaseHandler.getAllReservations(req.query);
}));

app.post(`${prefix}/reservations`, callMethod((req) = {
return databaseHandler.insert(req.body);
}));

app.put(`${prefix}/reservations/:id`, callMethod((req) = {
return databaseHandler.update(req.params.id, req.body);
}));

app.delete(`${prefix}/reservations/:id`, callMethod((req) = {
return databaseHandler.delete(req.params.id);
}));
/// ↑↑↑ reservations router ↑↑↑

/// ↓↓↓ rooms router ↓↓↓
app.get(`${prefix}/collections/rooms`, callMethod((req) = {
return databaseHandler.getAllRooms(req.query);
}));

app.put(`${prefix}/collections/rooms/:id`, callMethod((req) = {
return databaseHandler.updateRoomCleaningStatus(req.params.id, req.body);
}));
/// ↑↑↑ rooms router ↑↑↑

/// ↓↓↓ room types router ↓↓↓
app.get(`${prefix}/collections/roomTypes`, callMethod((req) = {
return databaseHandler.getRoomTypes(req.query);
}));
/// ↑↑↑ room types router ↑↑↑

/// ↓↓↓ cleaning statuses router ↓↓↓
app.get(`${prefix}/collections/cleaningStatuses`, callMethod((req) = {
return databaseHandler.getCleaningStatuses(req.query);
}));
/// ↑↑↑ cleaning statuses router ↑↑↑

/// ↓↓↓ booking statuses router ↓↓↓
app.get(`${prefix}/collections/bookingStatuses`, callMethod((req) = {
return databaseHandler.getBookingStatuses(req.query);
}));
/// ↑↑↑ booking statuses router ↑↑↑
}
};

它所做的就是設(shè)置應(yīng)用程序來偵聽調(diào)度器可以發(fā)送的請求url，并調(diào)用存儲的適當(dāng)方法。請注意，所有方法都包裝在try-catch塊中，以便能夠捕獲任何錯(cuò)誤并向客戶機(jī)返回適當(dāng)?shù)腻e(cuò)誤響應(yīng)。

還要注意，異常消息是直接寫入API響應(yīng)的。這在開發(fā)過程中非常方便，但在生產(chǎn)環(huán)境中，對客戶端隱藏這些消息可能是一個(gè)好主意，因?yàn)榈竭_(dá)那里的原始mysql異常可能包含敏感數(shù)據(jù)。

現(xiàn)在如果您打開應(yīng)用程序頁面，可以看到一個(gè)帶有預(yù)訂的調(diào)度程序。可以在調(diào)度程序中創(chuàng)建、刪除和修改項(xiàng)，即使重新加載頁面，您所做的任何更改也將保留。