「实用场景教程」如何用日程控件DHTMLX Scheduler制作酒店预订日历？（三）

dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件，日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间，事件可以按天，周，月三个种视图显示。

DHTMLX Scheduler正式版下载

在本教程中，我们将使用两个强大的工具：DHTMLX Scheduler库和Angular框架来创建一个全面的酒店客房预订应用程序。在上文中（点击这里回顾>>）我们为大家介绍了提供保存数据中的数据加载、CRUD操作实现等，本文将继续介绍服务器配置。

Step 5 – 服务器配置

现在让我们继续为应用程序设置Node.js服务器，本教程使用Express框架和MySQL作为数据存储。

添加依赖项和安装模块

您应该设置MySQL服务器，或者可以使用其他服务，例如免费MySQL托管。

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

$ npm install express mysql date-format-lite

server.js被指定为上面的输入点，现在让我们在项目的根目录下创建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包来同时启动服务器和客户端应用程序，因此添加concurrent模块：

$ npm install concurrently

准备数据库

让我们将Scheduler连接到数据库，并定义在其中读取和写入项的方法。

  • 创建数据库：

首先我们需要一个数据库来工作，您可以使用自己喜欢的mysql-client或通过控制台创建数据库。

要使用mysql-client创建数据库，打开它并执行下面的代码，创建预订表：

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;

让我们添加一些测试数据：

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);

创建房间表：

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;

添加一些测试数据：

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');

创建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;

添加一些测试数据：

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');

创建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;

添加一些测试数据：

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');

创建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;

添加一些测试数据：

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');
  • 实现数据访问：

所有的读/写逻辑都将在一个名为DatabaseHandler的单独模块中定义，它将使用mysql连接并在指定的表中执行简单的CRUD操作：读取所有项，插入新项，更新或删除现有项。为此创建databaseHandler.js文件，并将以下代码添加到其中：

require('date-format-lite'); // add date formatclass 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;
路由

然后需要设置路由，以便放置在页面上的调度器可以访问存储。为此创建另一个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 ↑↑↑
}
};

它所做的就是设置应用程序来侦听调度器可以发送的请求url，并调用存储的适当方法。请注意，所有方法都包装在try-catch块中，以便能够捕获任何错误并向客户机返回适当的错误响应。

还要注意，异常消息是直接写入API响应的。这在开发过程中非常方便，但在生产环境中，对客户端隐藏这些消息可能是一个好主意，因为到达那里的原始mysql异常可能包含敏感数据。

现在如果您打开应用程序页面，可以看到一个带有预订的调度程序。可以在调度程序中创建、删除和修改项，即使重新加载页面，您所做的任何更改也将保留。

如何用日程控件DHTMLX Scheduler制作酒店预订日历

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/199701.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

t-SNE方法：

t-SNE方法：

使用t-SNE时，除了指定你想要降维的维度（参数n_components），另一个重要的参数是困惑度（Perplexity，参数perplexity） 困惑度： 困惑度大致表示如何在局部或者全局位面上平衡关注点&am…
阅读更多...
音乐一拍到底多长

音乐一拍到底多长

1.拍是什么 拍是一个描述音符的最小单位 2.BPM 拍速度 一分钟多少拍，每首个都有一个人为规定的拍速度 3.音符 对一个音要唱多长的定义，并且使用4分音符，8分音符进行更细化的分割 4.一拍到底有多长 首先拍类比物理学，他是一…
阅读更多...
BearPi Std 板从入门到放弃 - 后天篇（2）(I2C1读写EEPROM)

BearPi Std 板从入门到放弃 - 后天篇（2）(I2C1读写EEPROM)

简介 基于 BearPi Std 板从入门到放弃 - 后天篇（1）(I2C1 读取 光照强度)， 使用同一个I2C接口访问EEPROM, 同时读取光照亮度 主芯片: STM32L431RCT6 LED : PC13 \ 推挽输出即可 \ 高电平点亮 串口: Usart1 I2C : I2C1 光照强度传感器&#xf…
阅读更多...
金蝶云星空和管易云接口打通对接实战

金蝶云星空和管易云接口打通对接实战

金蝶云星空和管易云接口打通对接实战 对接系统金蝶云星空 金蝶K/3Cloud结合当今先进管理理论和数十万家国内客户最佳应用实践，面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司，提供一个通用的ERP服务平台。K/3Cloud支持的协同应用包括但不…
阅读更多...
算法通关村第十四关|青铜|堆结构

算法通关村第十四关|青铜|堆结构

堆是将一组数据按照完全二叉树的存储顺序，将数据存储在一个一维数组中的结构。 大顶堆：任意节点的值均大于等于它的左右孩子，并且最大的值位于堆顶，即根节点处。 小顶堆：任意节点的值均小于等于它的左右孩子&#xff0…
阅读更多...
记录 | CUDA编程中的 __host__ __device__ 双重修饰

记录 | CUDA编程中的 __host__ __device__ 双重修饰

通过 __host__ 和 __device__ 双重修饰符&#xff0c;可以把函数同时定义在 CPU 和 GPU 上&#xff0c;这样 CPU 和 GPU 都可以调用 比如&#xff1a; #include <cstdio> #include <cuda_runtime.h>__host__ __device__ void say_hello(){printf("Hello, w…
阅读更多...
在python的Scikit-learn库中，可以使用train_test_split函数来划分训练集和测试集。

在python的Scikit-learn库中，可以使用train_test_split函数来划分训练集和测试集。

文章目录 一、在Scikit-learn库中&#xff0c;可以使用train_test_split函数来划分训练集和测试集总结 一、在Scikit-learn库中&#xff0c;可以使用train_test_split函数来划分训练集和测试集 在Scikit-learn库中&#xff0c;可以使用train_test_split函数来划分训练集和测试…
阅读更多...
【yolov8】与yolov5的区别及改进详解

【yolov8】与yolov5的区别及改进详解

图像识别技术在物联网、智能监控等领域广泛应用。而深度学习中的目标检测技术&#xff0c;能够帮助我们对图像中的目标进行识别&#xff0c;进而实现自动化控制。目前&#xff0c;Yolov8和Yolov5是目标检测领域热门的模型。 yolo目标检测原理yolov5详解yolov8yolov8结构图Conv模…
阅读更多...
智能优化算法应用：基于学校优化算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于学校优化算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于学校优化算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于学校优化算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.学校优化算法4.实验参数设定5.算法结果6.参考…
阅读更多...
追逐代码的梦，计算机行业的心路历程

追逐代码的梦，计算机行业的心路历程

标题&#xff1a;追逐代码的梦&#xff0c;计算机行业的心路历程 当初选择计算机行业&#xff0c;并非出于一时冲动&#xff0c;而是深深被数字的魔力所吸引。我笑着回答&#xff1a;“因为我梦想成为神奇的码农&#xff01;我想像编织魔法一样编写程序&#xff0c;创造出炫酷…
阅读更多...
Linux中shell的运行原理

Linux中shell的运行原理

在Linux中&#xff0c;每次输入命令时&#xff0c;前面都会出现一串字母&#xff0c;我们称之为命令行提示符 实际上&#xff0c;命令行提示符是一种外壳程序 外壳程序的概念&#xff1a; 前面我们提到过&#xff0c;在Linux中&#xff0c;一切皆文件&#xff0c;所谓的命令就…
阅读更多...
程序员的实用网站导航与推荐

程序员的实用网站导航与推荐

当你遇到问题时 Stack Overflow&#xff1a;订阅他们的每周新闻和任何你感兴趣的主题Google&#xff1a;全球最大搜索引擎必应&#xff1a;在你无法使用Google的时候CSDN&#xff1a;聊胜于无AI导航一号AI导航二号 新闻篇 OSCHINA&#xff1a;中文开源技术交流社区 针对初学…
阅读更多...
UE Windows平台下Linux的交叉编译项目打包

UE Windows平台下Linux的交叉编译项目打包

UE Windows平台下Linux的交叉编译项目打包 交叉编译&#xff08;Cross-compilation&#xff09; 使得在以Windows为中心的工作流程中工作的游戏开发者能够以Linux为目标对项目进行打包。目前&#xff0c;只有Windows支持交叉编译。 交叉编译支持的平台 Windows | Linux-x86_…
阅读更多...
每日3道PWN（第二天）

每日3道PWN（第二天）

ciscn_2019_n_1 参考&#xff1a; [BUUCTF-pwn]——ciscn_2019_n_1-CSDN博客 [BUUCTF]PWN5——ciscn_2019_n_1_ciscn_2019_n_4-CSDN博客 BUUCTF—ciscn_2019_n_1 1-CSDN博客 checksec一下 64位栈溢出 按f5查看main函数&#xff0c;双击可疑函数 发现含有命令执行的且发现fl…
阅读更多...
SOCKET、TCP、HTTP之间的区别与联系

SOCKET、TCP、HTTP之间的区别与联系

SOCKET、TCP、HTTP之间的区别与联系 一、 Socket 1、什么是socket2、为什么需要socket3、建立socket连接 二、HTTP(基于TCP) 1、HTTP的概念2、HTTP连接的特点 连接请求&#xff1a;一次连接连接请求&#xff1a;短连接(socket是长连接) 三、TCP/IP协议簇 四、HTTP、Socket…
阅读更多...
SQL 数据库语句- 创建和管理数据库

SQL 数据库语句- 创建和管理数据库

SQL CREATE DATABASE 语句 SQL CREATE DATABASE 语句用于创建一个新的 SQL 数据库。 语法 CREATE DATABASE 数据库名称;示例 以下 SQL 语句创建了一个名为 “testDB” 的数据库&#xff1a; CREATE DATABASE testDB;通过这个简单的语句&#xff0c;你可以成功地创建一个名…
阅读更多...
30个Python小游戏，小白练手，我都能玩一天【内附源码】

30个Python小游戏，小白练手，我都能玩一天【内附源码】

给大家带来30个 Python 小游戏&#xff0c;一定要收藏&#xff01; 文末获取完整代码 有手就行 1、吃金币 import os import cfg import sys import pygame import random from modules import *游戏初始化 def initGame():# 初始化pygame, 设置展示窗口pygame.init()screen…
阅读更多...
C/C++---------------LeetCode第118. 杨辉三角

C/C++---------------LeetCode第118. 杨辉三角

杨辉三角 题目及要求动态规划在mian内使用 题目及要求 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows 1 输出: [[1]] 提示: 1 < numRow…
阅读更多...
ActiveMQ 反序列化漏洞（CVE-2015-5254）

ActiveMQ 反序列化漏洞（CVE-2015-5254）

ActiveMQ 反序列化漏洞 Apache ActiveMQ是一种开源的消息代理&#xff08;message broker&#xff09;&#xff0c;被广泛用于应用程序之间的消息传递。它提供可靠的消息传递模式&#xff0c;如发布/订阅、点对点和请求/响应&#xff0c;非常适合构建分布式系统和应用程序集成…
阅读更多...
1_控制系统总体结构

1_控制系统总体结构

1、总体结构 控制系统结构图&#xff1a; 黑色块为参数、黄色块为计算模块 1.1 其中参数含义 车辆属性参数&#xff1a; 参数含义 C α f C_{\alpha f} Cαf​自行车模型总轮胎侧偏刚度&#xff08;前轮&#xff09; C α r C_{\alpha r} Cαr​自行车模型总轮胎侧偏刚度&a…
阅读更多...
最新文章

Copyright @ 2022~2023