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

news2024/11/18 9:48:21

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 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;
路由

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

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

相关文章

如何解决el-table中动态添加固定列时出现的行错位

如何解决el-table中动态添加固定列时出现的行错位

问题描述 在使用el-table组件时，我们有时需要根据用户的操作动态地添加或删除一些固定列，例如操作列或选择列。但是，当我们使用v-if指令来控制固定列的显示或隐藏时，可能会出现表格的行错位的问题，即固定列和非固定列…
阅读更多...
Spring全面详解

Spring全面详解

目录 1. Spring 概述 1.1 Spring是什么 1.2 Spring的作用 1.3 Spring IoC是什么 2. Spring 快速入门 3. Spring Bean 3.1 的实例化方式 空参构造器 3.2 的属性注入 全参构造器注入 setter方法注入 策略模式 3.3 注解管理 3.4 注解方式的属性注入 1. Spring 概述 …
阅读更多...
理解VAE（变分自编码器）

理解VAE（变分自编码器）

1.贝叶斯公式 贝叶斯理论的思路是，在主观判断的基础上，先估计一个值（先验概率），然后根据观察的新信息不断修正(可能性函数)。 P(A)：没有数据B的支持下，A发生的概率，也叫做先验概率。…
阅读更多...
C++ 关于结构体struct的一些总结

C++ 关于结构体struct的一些总结

文章目录 一、 结构体(struct)是什么？（1）概念（2）struct 与 calss 的区别 二、定义、声明与初始化（1）三种定义结构体的方法：（2）结构体变量初始化 三、结构体嵌…
阅读更多...
老有所依：TSINGSEE青犀养老院智能视频监管方案

老有所依：TSINGSEE青犀养老院智能视频监管方案

养老院智能监控方案是为了提高养老院内老人的安全和护理质量，利用智能技术与监控设备进行全方位的监控和管理，可以加强对老人的监护和护理，提高养老院的服务质量和安全性。 旭帆科技基于视频技术与AI智能分析技术构建的养老院智能视频监控方…
阅读更多...
算法：常见的链表算法

算法：常见的链表算法

文章目录 链表算法两数相加两两交换链表中的节点重排链表合并K个升序链表K个一组翻转链表 总结 本篇总结常见的链表算法题和看他人题解所得到的一些收获 链表算法 关于链表的算法： 画图：画图可以解决绝大部分的数据结构的问题，任何的算法题…
阅读更多...
Ubuntu 安装 CUDA 和 cuDNN 详细步骤

Ubuntu 安装 CUDA 和 cuDNN 详细步骤

我的Linux系统背景： 系统和驱动都已安装。 系统是centos 8。查看自己操作系统的版本信息：cat /etc/issue或者是 cat /etc/lsb-release 用nvidia-smi可以看到显卡驱动和可支持的最高cuda版本，我的是12.2。驱动版本是535.129.03 首先&#…
阅读更多...
snakeyaml编辑yaml文件并覆盖注释

snakeyaml编辑yaml文件并覆盖注释

文章目录 前言技术积累实战演示1、引入maven依赖2、覆盖注释工具类3、snakeyaml工具类4、测试用例5、测试效果展示 写在最后 前言 最近在做一个动态整合框架的项目，需要根据需求动态组装各个功能模块。其中就涉及到了在application.yaml中加入其他模块的配置&#…
阅读更多...
Kubernetes(K8s 1.27.x) 快速上手+实践，无废话纯享版

Kubernetes(K8s 1.27.x) 快速上手+实践，无废话纯享版

文章目录 1 基础知识1.1 K8s 有用么？1.2 K8s 是什么？1.3 k8s 部署方式1.4 k8s 环境解析 2 环境部署2.1 基础环境配置2.2 容器环境操作2.3 cri环境操作2.4 harbor仓库操作2.5 k8s集群初始化2.6 k8s环境收尾操作 3 应用部署3.1 应用管理解读3.2 应用部署实…
阅读更多...
浏览器提示不安全

浏览器提示不安全

当我们使用浏览器访问一个网站时，如果该网站使用的是HTTPS连接，那么浏览器会对其进行安全性的检查。其中一项重要的检查就是确认该网站是否拥有有效的SSL证书。然而，有时我们会在浏览器中看到“不安全”的警告，这通常是由于SSL证书…
阅读更多...
js删除第一个元素

js删除第一个元素

阅读更多...
【Go自学版】02-goroutine

【Go自学版】02-goroutine

利用时间片分割进程，致使宏观上A,B,C同时执行（并发） CPU利用率包含了执行和切换，进程/线程的数量越多，切换成本也会增大 最大并行数：GOMAXPROCS work stealing: 偷其他队列的G hand off: 当前G1阻塞&#…
阅读更多...
中缀表达式转后缀表达式与后缀表达式计算（详解）

中缀表达式转后缀表达式与后缀表达式计算（详解）

**中缀表达式转后缀表达式的一般步骤如下： 1：创建一个空的栈和一个空的输出列表。 2：从左到右扫描中缀表达式的每个字符。 3：如果当前字符是操作数，则直接将其加入到输出列表中。 4：如果当前字符是运算符&a…
阅读更多...
禅道v11.6 基于linux环境下的docker容器搭建的靶场

禅道v11.6 基于linux环境下的docker容器搭建的靶场

一、环境搭建 linux环境下的 在docker环境下安装禅道CMS V11.6 docker run --name zentao_v11.6 -p 8084:80 -v /u01/zentao/www:/app/zentaopms -v /u01/zentao/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD123456 -d docker.io/yunwisdom/zentao:v11.6二、常见问题 1.删除…
阅读更多...
软件开发的代码审查工具

软件开发的代码审查工具

在进行软件开发时，代码审查（Code Review）是一种非常重要的实践，它有助于发现潜在的问题、提高代码质量，并促使团队成员之间的知识共享。有许多工具可用于简化和优化代码审查过程。以下是一些常见的代码审查工具&#x…
阅读更多...
力扣541.反转字符串 II

力扣541.反转字符串 II

文章目录 力扣541.反转字符串 II示例代码实现总结收获 力扣541.反转字符串 II 示例 代码实现 class Solution {public String reverseStr(String s, int k) {char[] ans s.toCharArray();for(int i0;i<ans.length;i2*k){int begin i;int end Math.min(ans.length-1,begin…
阅读更多...
【EI会议征稿】2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024)

【EI会议征稿】2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024)

2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024) 2024 Guangdong-Hong Kong-Macao Greater Bay Area International Conference on Digital Economy and Artificial Intelligence(DEAI2024) 2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024)由广东科…
阅读更多...
Emacs之dired模式重新绑定键值v(一百三十一)

Emacs之dired模式重新绑定键值v(一百三十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
搞懂HashTable, HashMap, ConcurrentHashMap 的区别，看着一篇就足够了！！！

搞懂HashTable, HashMap, ConcurrentHashMap 的区别，看着一篇就足够了！！！

&#x1f6e9;️&#x1f6e9;️&#x1f6e9;️ 今天给大家分享的是 HashTable, HashMap, ConcurrentHashMap之间的区别&#xff0c;也是自己学习过程中的总结。 清风的CSDN博客 &#x1f6e9;️&#x1f6e9;️&#x1f6e9;️希望我的文章能对你有所帮助&#xff0c;有不足的…
阅读更多...
为什么每个 Java 开发者都需要了解 Scala

为什么每个 Java 开发者都需要了解 Scala

前面我们一起回顾了第九期 Scala & Java Meetup 中最受关注的话题 —— jdk 并发编程的终极解决方案&#xff1a;虚拟线程&#xff0c;探讨了这一新特性对包括 Scala 在内的响应式编程语言的影响。 本次 Meetup 的首位分享者 Chunsen&#xff0c;在加入 Tubi 成为 Scala 开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023