「实用场景教程」如何用日程控件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 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制作酒店预订日历

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Mac 安装 Django 并连接 MySQL

Mac 安装 Django 并连接 MySQL

一、下载安装运行Django看官方教程就好了，网址：Django 安装_w3cschool 二、连接MySQL（我用的是pymysql和mysqlclient）： 1、创建好项目后找到这个文件 2、修改当中的连接信息，将这些信息改成你自己的就好了…
阅读更多...
（三）Tiki-taka算法（TTA）求解无人机三维路径规划研究（MATLAB）

（三）Tiki-taka算法（TTA）求解无人机三维路径规划研究（MATLAB）

一、无人机模型简介： 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献： [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、Tiki-taka算法（TTA&#xf…
阅读更多...
ruoyi+Hadoop+hbase实现大数据存储查询

ruoyi+Hadoop+hbase实现大数据存储查询

前言 有个现实的需求，数据量可能在100亿条左右。现有的数据库是SQL Server，随着采集的数据不断的填充，查询的效率越来越慢（现有的SQL Server查询已经需要数十秒钟的时间），看看有没有优化的方案。 考虑过S…
阅读更多...
vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果

vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果

一、实现效果 使用echarts实现省市地图绘制根据数据在地图显示柱状图根据数据显示数据，涟漪效果 二、实现方法 1、安装echarts插件 npm install echarts --save2、获取省市json数据 https://datav.aliyun.com/portal/school/atlas/area_selector 通过 阿里旗下…
阅读更多...
（2）(2.2) Lightware SF45/B(350度)

（2）(2.2) Lightware SF45/B(350度)

文章目录 前言 1 安装SF45/B 2 连接自动驾驶仪 3 通过地面站进行配置 4 参数说明 前言 Lightware SF45/B 激光雷达(Lightware SF45/B lidar)是一种小型扫描激光雷达（重约 50g），扫描度可达 350 度，扫描范围 50m。 1 安装SF45…
阅读更多...
老技术告诉你如何选择代理IP以满足数据采集需求

老技术告诉你如何选择代理IP以满足数据采集需求

根据IDC发布的大数据行业最新报道显示，目前已经有越来越多的企业将重点放在大数据技术之上，以大数据来进行创新工业互联网的建设，携手央国企共同推进新型工业化。由此可见大数据的重要性。不过具体到每一位技术人员来说，在进行数据…
阅读更多...
[读论文][跑代码]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

[读论文][跑代码]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

github: GitHub - Nota-NetsPresso/BK-SDM: A Compressed Stable Diffusion for Efficient Text-to-Image Generation [ICCV23 Demo] [ICML23 Workshop] ICML 2023 Workshop on ES-FoMo 简化方式 蒸馏方式（训练Task蒸馏outKD-FeatKD） 训练数据集 评测指标…
阅读更多...
【赠书第10期】从概念到现实：ChatGPT和Midjourney的设计之旅

【赠书第10期】从概念到现实：ChatGPT和Midjourney的设计之旅

文章目录 前言 1 ChatGPT的崛起 2 Midjourney的探索 3 技术创新的交汇 4 对未来的影响 5 结论 6 推荐图书 7 粉丝福利 前言 在过去的几年里，自然语言处理和聊天模型的领域取得了飞速的发展。ChatGPT 作为一个由OpenAI 开发的大型语言模型，以其强…
阅读更多...
设计中的经验规则 - 3W规则

设计中的经验规则 - 3W规则

设计中的经验规则 - 3W规则 摘要应用 3W 规则还是有很多地方需要注意12 33W规则范围 摘要 PCB板上两条走线截面图，电流通过时产生的辐射。距离比较近 3W 经验规则总体来说，是一条可以放心使用的规则。毕竟传播的电磁场强度与距离的平方成反比&#xff…
阅读更多...
VS2017 C++ Qt工程打包软件

VS2017 C++ Qt工程打包软件

在Debug模式下或者Release模式下编译成功，会在工程的Debug文件夹和Release文件夹生成exe执行文件，以Debug为例，将Debug模式下的exe复制到新的文件夹路径下，然后打开Qt中的MSVC 2017 64-bit 打开后然后在命令窗口cd到exe的路径下&…
阅读更多...
JDK8新特性

JDK8新特性

目录 传送门一、Lambda表达式1、概念2、语法基本语法：Lambda简写：Lambda 表达式与匿名内部类区别： 3、案例 二、接口中新增方法1、概念2、默认方法3、静态方法 三、函数式接口1、概念2、函数式接口的由来3、常见的函数式接口 四、方法引用1、…
阅读更多...
mongoDB非关系型数据库学习记录

mongoDB非关系型数据库学习记录

一、简介 1.1Mongodb是什么 MongoDB是一个基于分布式文件存储的数据库,官方地址https://www.mongodb.com/ 1.2数据库是什么 数据库(DataBase)是按照数据结构来组织、存储和管理数据的应用程序 1.3数据库的作用 数据库的主要作用就是管理数据,对数据进行增©、删(d)、…
阅读更多...
项目实战之RabbitMQ冗余双写架构

项目实战之RabbitMQ冗余双写架构

🧑‍💻作者名称：DaenCode 🎤作者简介：啥技术都喜欢捣鼓捣鼓，喜欢分享技术、经验、生活。 😎人生感悟：尝尽人生百味，方知世间冷暖。 📖所属专栏：项…
阅读更多...
YOLOv7全网独家首发改进：SENet v2，Squeeze-Excitation模块融合Dense Layer，效果秒杀SENet

YOLOv7全网独家首发改进：SENet v2，Squeeze-Excitation模块融合Dense Layer，效果秒杀SENet

💡💡💡本文自研创新改进：SENet v2，针对SENet主要优化点，提出新颖的多分支Dense Layer，并与Squeeze-Excitation网络模块高效融合，融合增强了网络捕获通道模式和全局知识的能力 推荐指数：五星 收录 YOLOv7原创自研 https://blog.csdn.net/m0_63774211/category_12…
阅读更多...
【localhost refused to connect】解决 linux服务器启动 jupyter notebook 后本地浏览器打不开

【localhost refused to connect】解决 linux服务器启动 jupyter notebook 后本地浏览器打不开

问题描述 在linux上输入： jupyter notebook 命令后，弹出的火狐浏览器可以打开笔记本，但是复制它给的加密 url 到 Google 或者 Edge 浏览器都出现如下情况： 解决办法 1. 生成 jupyter notebook 配置文件 在 linux 命令行输入如下…
阅读更多...
2023年小美赛认证杯A题太阳黑子预测（Sunspot Forecasting）思路模型代码解析

2023年小美赛认证杯A题太阳黑子预测（Sunspot Forecasting）思路模型代码解析

2023年小美赛认证杯A题：太阳黑子预测（Sunspot Forecasting） 【请电脑打开本文链接，扫描下方名片中二维码，获取更多资料】 一、问题重述 太阳黑子是太阳光球上的现象，呈暂时性斑点，比周围区域…
阅读更多...
Xilinx FPGA——ISE的UCF时序约束

Xilinx FPGA——ISE的UCF时序约束

时序约束是我们对FPGA设计的要求和期望，例如，我们希望FPGA设计可以工作在多快的时钟频率下等等。 设计是要求系统中的每一个时钟都进行时序约束。 一、分组约束语法（NET、PIN、INST） TNM是最基本的分组约束语法，其语法…
阅读更多...
ubuntu/vscode下的c/c++开发之-CMake语法与练习

ubuntu/vscode下的c/c++开发之-CMake语法与练习

Cmake学习 1 语法特性介绍 基本语法格式：指令(参数 1 参数 2...) 参数使用括弧括起参数之间使用空格或分号分开 指令是大小写无关的，参数和变量是大小写相关的 set(HELLO hello.cpp) add_executable(hello main.cpp hello.cpp) ADD_EXECUTABLE(hello ma…
阅读更多...
spring-cloud-alibaba 官方版本说明

spring-cloud-alibaba 官方版本说明

版本说明 alibaba/spring-cloud-alibaba Wiki GitHub 云原生应用脚手架 构建方式：maven 语言：java springboot 2.7.6 架构：单模块，mvc 架构 下面是脚手架生成。。。。。。。。。。。。。。。。。。。 单模块pom mvc 代码…
阅读更多...
关于PFMEA的风险评估都在这里——SunFMEA软件

关于PFMEA的风险评估都在这里——SunFMEA软件

1、评价严重度 严重度应该独立于发生度和探测度的评价，不能认为发生概率低或者探测能力强，失效就不会到达顾客手中，不会造成糟糕的失效影响，严重度就低。 其实，严重度评估的是已经识别的失效链的严重程度&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023