TypeScript 语言 实战项目 酒店管理系统

TypeScript阿木 发布于 2025-05-28 23 次阅读


酒店管理系统实战项目:TypeScript【1】语言下的代码实现

随着旅游业的蓬勃发展,酒店行业也日益繁荣。为了提高酒店的管理效率和服务质量,开发一套酒店管理系统显得尤为重要。本文将围绕TypeScript语言,详细介绍如何实现一个酒店管理系统,包括需求分析、技术选型、核心功能实现以及部署上线。

需求分析

在开始项目之前,我们需要明确酒店管理系统的需求。以下是一些基本的功能需求:

1. 用户管理【2】:包括管理员、前台、客房服务员等角色的登录、权限管理。
2. 客房管理【3】:包括客房类型、价格、状态等信息的维护。
3. 预订管理【4】:包括预订查询、预订确认、订单管理等功能。
4. 客户管理:包括客户信息录入、查询、修改等功能。
5. 报表统计【5】:包括入住率【6】、客房利用率【7】等数据的统计和分析。

技术选型

基于以上需求,我们选择以下技术栈:

- 前端【8】:TypeScript + React【9】
- 后端【10】:Node.js【11】 + Express【12】
- 数据库:MongoDB【13】
- 版本控制:Git【14】
- 构建工具:Webpack【15】

环境搭建

1. 安装Node.js:从官网下载并安装Node.js,确保环境变量【16】配置正确。
2. 安装MongoDB:下载并安装MongoDB,启动数据库服务。
3. 创建项目目录:在本地创建一个项目目录,例如`hotel-management-system`。
4. 初始化项目:使用npm初始化项目,并安装相关依赖。

bash
mkdir hotel-management-system
cd hotel-management-system
npm init -y
npm install express mongoose react react-dom react-router-dom

核心功能实现

1. 用户管理

后端

使用Express框架创建用户管理API【17】,包括用户注册、登录、权限验证【18】等。

typescript
import express from 'express';
import mongoose from 'mongoose';
import bcrypt from 'bcrypt';

const app = express();
app.use(express.json());

// 用户模型
const UserSchema = new mongoose.Schema({
username: String,
password: String,
role: String
});

const User = mongoose.model('User', UserSchema);

// 用户注册
app.post('/register', async (req, res) => {
const { username, password, role } = req.body;
const hashedPassword = await bcrypt.hash(password, 10);
const user = new User({ username, password: hashedPassword, role });
await user.save();
res.send('User registered successfully');
});

// 用户登录
app.post('/login', async (req, res) => {
const { username, password } = req.body;
const user = await User.findOne({ username });
if (!user) {
return res.status(404).send('User not found');
}
const match = await bcrypt.compare(password, user.password);
if (match) {
res.send('Login successful');
} else {
res.status(401).send('Invalid credentials');
}
});

// 权限验证中间件
function authenticate(req, res, next) {
const token = req.headers.authorization;
if (!token) {
return res.status(401).send('Unauthorized');
}
// 解析token,验证用户权限
// ...
next();
}

app.use('/api', authenticate);

app.listen(3000, () => {
console.log('Server is running on port 3000');
});

前端

使用React框架创建用户管理界面,包括注册、登录、权限验证等。

typescript
import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/register', { username, password });
console.log(response.data);
} catch (error) {
console.error(error);
}
};

return (

setUsername(e.target.value)}
placeholder="Username"
/>
setPassword(e.target.value)}
placeholder="Password"
/>
Register

);
};

export default Register;

2. 客房管理

后端

使用Express框架创建客房管理API,包括客房类型、价格、状态等信息的维护。

typescript
// 客房模型
const RoomSchema = new mongoose.Schema({
type: String,
price: Number,
status: String
});

const Room = mongoose.model('Room', RoomSchema);

// 客房列表
app.get('/rooms', async (req, res) => {
const rooms = await Room.find();
res.send(rooms);
});

// 添加客房
app.post('/rooms', async (req, res) => {
const { type, price, status } = req.body;
const room = new Room({ type, price, status });
await room.save();
res.send('Room added successfully');
});

前端

使用React框架创建客房管理界面,包括客房列表、添加客房等。

typescript
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const RoomList = () => {
const [rooms, setRooms] = useState([]);

useEffect(() => {
axios.get('/rooms').then((response) => {
setRooms(response.data);
});
}, []);

return (

Room List

{rooms.map((room) => (

{room.type} - ${room.price} - {room.status}

))}