TypeScript 语言 实战项目 订餐系统开发

TypeScriptamuwap 发布于 12 小时前 1 次阅读


TypeScript【1】实战项目:订餐系统开发

随着互联网技术的飞速发展,订餐系统已经成为人们日常生活中不可或缺的一部分。本文将围绕TypeScript语言,详细讲解如何开发一个订餐系统。TypeScript作为一种JavaScript的超集,提供了静态类型检查【2】、接口【3】、类等特性,使得代码更加健壮和易于维护。以下是使用TypeScript开发订餐系统的详细步骤和技术要点。

项目概述

订餐系统主要包括以下功能模块:

1. 用户模块【4】:用户注册、登录、个人信息管理。
2. 菜品模块【5】:菜品展示、菜品分类、菜品搜索。
3. 订单模块【6】:下单、订单查询、订单支付。
4. 后台管理模块【7】:菜品管理、订单管理、用户管理。

技术栈

- TypeScript:用于编写静态类型化的JavaScript代码。
- Node.js【8】:作为服务器端运行环境。
- Express【9】:一个快速、灵活的Web应用框架。
- MongoDB【10】:一个高性能、可扩展【11】的文档型数据库【12】
- Mongoose【13】:一个MongoDB的对象建模工具【14】

开发环境搭建

1. 安装Node.js和npm(Node.js包管理器)。
2. 创建一个新的TypeScript项目:

bash
tsc --init

3. 安装必要的依赖:

bash
npm install express mongoose body-parser cors

用户模块

用户实体【15】

定义用户实体(User【16】):

typescript
import mongoose, { Document } from 'mongoose';

interface IUser extends Document {
username: string;
password: string;
email: string;
}

const UserSchema = new mongoose.Schema({
username: { type: String, required: true },
password: { type: String, required: true },
email: { type: String, required: true },
});

export default mongoose.model('User', UserSchema);

用户注册

创建一个注册接口:

typescript
import express, { Request, Response } from 'express';
import User from './user.model';

const router = express.Router();

router.post('/register', async (req: Request, res: Response) => {
try {
const { username, password, email } = req.body;
const user = new User({ username, password, email });
await user.save();
res.status(201).send('User registered successfully');
} catch (error) {
res.status(500).send(error.message);
}
});

export default router;

用户登录

创建一个登录接口:

typescript
import express, { Request, Response } from 'express';
import User from './user.model';

const router = express.Router();

router.post('/login', async (req: Request, res: Response) => {
try {
const { username, password } = req.body;
const user = await User.findOne({ username, password });
if (user) {
res.status(200).send('Login successful');
} else {
res.status(401).send('Invalid credentials');
}
} catch (error) {
res.status(500).send(error.message);
}
});

export default router;

菜品模块

菜品实体【17】

定义菜品实体(Dish):

typescript
import mongoose, { Document } from 'mongoose';

interface IDish extends Document {
name: string;
category: string;
price: number;
description: string;
}

const DishSchema = new mongoose.Schema({
name: { type: String, required: true },
category: { type: String, required: true },
price: { type: Number, required: true },
description: { type: String, required: true },
});

export default mongoose.model('Dish', DishSchema);

菜品展示

创建一个菜品展示接口:

typescript
import express, { Request, Response } from 'express';
import Dish from './dish.model';

const router = express.Router();

router.get('/', async (req: Request, res: Response) => {
try {
const dishes = await Dish.find();
res.status(200).send(dishes);
} catch (error) {
res.status(500).send(error.message);
}
});

export default router;

订单模块

订单实体【18】

定义订单实体(Order):

typescript
import mongoose, { Document } from 'mongoose';

interface IOrder extends Document {
userId: mongoose.Types.ObjectId;
dishes: { dishId: mongoose.Types.ObjectId; quantity: number }[];
total: number;
status: string;
}

const OrderSchema = new mongoose.Schema({
userId: { type: mongoose.Types.ObjectId, required: true },
dishes: [
{
dishId: { type: mongoose.Types.ObjectId, required: true },
quantity: { type: Number, required: true },
},
],
total: { type: Number, required: true },
status: { type: String, required: true },
});

export default mongoose.model('Order', OrderSchema);

下单

创建一个下单接口:

typescript
import express, { Request, Response } from 'express';
import Order from './order.model';

const router = express.Router();

router.post('/', async (req: Request, res: Response) => {
try {
const { userId, dishes } = req.body;
const total = dishes.reduce((acc, dish) => acc + dish.quantity dish.price, 0);
const order = new Order({ userId, dishes, total, status: 'pending' });
await order.save();
res.status(201).send('Order placed successfully');
} catch (error) {
res.status(500).send(error.message);
}
});

export default router;

后台管理模块

菜品管理

创建一个菜品管理接口:

typescript
import express, { Request, Response } from 'express';
import Dish from './dish.model';

const router = express.Router();

router.get('/', async (req: Request, res: Response) => {
try {
const dishes = await Dish.find();
res.status(200).send(dishes);
} catch (error) {
res.status(500).send(error.message);
}
});

router.post('/', async (req: Request, res: Response) => {
try {
const { name, category, price, description } = req.body;
const dish = new Dish({ name, category, price, description });
await dish.save();
res.status(201).send('Dish added successfully');
} catch (error) {
res.status(500).send(error.message);
}
});

router.delete('/:id', async (req: Request, res: Response) => {
try {
const { id } = req.params;
await Dish.findByIdAndDelete(id);
res.status(200).send('Dish deleted successfully');
} catch (error) {
res.status(500).send(error.message);
}
});

export default router;

订单管理

创建一个订单管理接口:

typescript
import express, { Request, Response } from 'express';
import Order from './order.model';

const router = express.Router();

router.get('/', async (req: Request, res: Response) => {
try {
const orders = await Order.find();
res.status(200).send(orders);
} catch (error) {
res.status(500).send(error.message);
}
});

router.put('/:id', async (req: Request, res: Response) => {
try {
const { id } = req.params;
const { status } = req.body;
await Order.findByIdAndUpdate(id, { status });
res.status(200).send('Order status updated successfully');
} catch (error) {
res.status(500).send(error.message);
}
});

export default router;

用户管理

创建一个用户管理接口:

typescript
import express, { Request, Response } from 'express';
import User from './user.model';

const router = express.Router();

router.get('/', async (req: Request, res: Response) => {
try {
const users = await User.find();
res.status(200).send(users);
} catch (error) {
res.status(500).send(error.message);
}
});

router.delete('/:id', async (req: Request, res: Response) => {
try {
const { id } = req.params;
await User.findByIdAndDelete(id);
res.status(200).send('User deleted successfully');
} catch (error) {
res.status(500).send(error.message);
}
});

export default router;

总结

本文详细介绍了使用TypeScript开发订餐系统的过程,包括用户模块、菜品模块、订单模块和后台管理模块。通过使用TypeScript的静态类型检查、接口和类等特性,我们能够编写更加健壮和易于维护的代码。在实际开发过程中,可以根据需求对系统进行扩展和优化【19】。希望本文对您有所帮助。