使用typescript和express开发后台项目

一、环境的配置

1、安装依赖包

npm i express body-parser bcryptjs jsonwebtoken morgan cors validator helmet dotenv multer -S npm install mongoose npm i typescript @types/node @types/express @types/mongoose @types/bcryptjs @types/jsonwebtoken @types/morgan @types/cors @types/validator ts-node-dev nodemon @types/helmet @types/multer -D

2、生成tsconfig.json文件(根据语言来选择)

npx tsconfig.json

3、在package.json文件中配置启动命令

"scripts": { "build": "tsc", "start": "ts-node-dev --respawn src/index.ts", "dev": "nodemon --exec ts-node --files src/index.ts" },

4、在src/index.ts文件中写测试代码

import 'dotenv/config'; //这是包的作用是读取.env文件然后写入process.env.JWT_SECRET_KEY import path from 'path'; import express, { Express } from 'express'; //启服务 import mongoose from 'mongoose'; //连接数据库的 import cors from 'cors'; //用来跨域的 import morgan from 'morgan'; //这是用来输入访问日志的 import helmet from 'helmet'; //用来进行安全过滤的 const app: Express = express(); // 使用中间件 app.use(cors()); // 处理跨域请求 app.use(morgan('dev')); // 开发环境打印日志 app.use(helmet()); // 处理请求 app.use(express.json());//express.json=bodyParser.json app.use(express.urlencoded({ extended: true })); // 配置静态文件目录,也是上传的目录 app.use(express.static(path.join(__dirname, 'public'))); // 测试接口 app.get('/', (_req, res, _next) => { res.json({ code: 0, message: '成功' }); }); (async function () { await mongoose.set('useNewUrlParser', true); await mongoose.set('useUnifiedTopology', true); const MONGODB_URL = process.env.MONGODB_URL || `mongodb://localhost/express_ts`; await mongoose.connect(MONGODB_URL); const PORT = process.env.PORT || 8001; app.listen(PORT, () => { console.log(`Running on http://localhost:${PORT}`); }) })();

5、测试

npm run start # or npm run dev

二、配置错误拦截器及错误中间件

1、拦截器

class HttpException extends Error { //status HTTP错误状态码 message是错误提示信息 errors 错误对象 constructor (public status: number, public message: string, public errors: any = {}) { super(message); } } export default HttpException;

2、中间件

import { Request, Response, NextFunction } from 'express'; import HttpException from '../exceptions/HttpException'; import { INTERNAL_SERVER_ERROR } from 'http-status-codes'; const errorMiddleware = (err: HttpException, _req: Request, res: Response, _next: NextFunction) => { let result: any = { success: false, message: err.message }; if (err.errors && Object.keys(err.errors).length > 0) { result.errors = err.errors; } res.status(err.status || INTERNAL_SERVER_ERROR) .json(result); } export default errorMiddleware;

3、在src/index.ts中使用

... //如果说没有匹配到任何路由，则会创建一个自定义404错误对象并传递给错误处理中间件 app.use((_req: Request, _res: Response, next: NextFunction) => { const error: HttpException = new HttpException(404, '尚未为此路径分配路由'); next(error); }); // 使用自定义中间件 app.use(errorMiddleware); ...

三、用户模块

1、在models中创建用户的数据模型

import mongoose, { Schema, Model, Document, HookNextFunction } from 'mongoose'; import bcryptjs from 'bcryptjs'; import validator from 'validator'; // import jwt from 'jsonwebtoken'; // 定义用户的数据模型约束 export interface UserDocument extends Document { username: string; password: string; avatar: string; email: string; } // 定义mongodb数据模型 const UserSchema: Schema<UserDocument> = new Schema({ username: { type: String, required: [true, '用户名不能为空'], minlength: [6, '最小长度不能小于6位'], maxlength: [12, '最大长度不能大于12位'], trim: true, }, password: String, avatar: String, email: { type: String, // 自定义校验器 validate: { validator: validator.isEmail }, trim: true, } }, { //使用时间戳 会自动添加两个字段 createdAt updatedAt timestamps: true, // 自定义返回数据格式 toJSON: { transform: function (_doc: any, result: any) { result.id = result._id; delete result._id; delete result.__v; delete result.password; delete result.createdAt; delete result.updatedAt; return result; } } }) // 配置mongoose的钩子函数,对密码加密 UserSchema.pre<UserDocument>('save', async function (next: HookNextFunction) { if (!this.isModified('password')) { return next(); } try { this.password = await bcryptjs.hash(this.password, 10); next(); } catch (error) { next(error); } }) interface UserModel<T extends Document> extends Model<T> { } export const User: UserModel<UserDocument> = mongoose.model<UserDocument, UserModel<UserDocument>>('User', UserSchema);

2、用户注册

import { Request, Response, NextFunction, } from 'express'; import { User, UserDocument } from '../models'; import { validateRegisterInput } from '../utils'; import HttpException from '../exceptions/HttpException'; import { UNPROCESSABLE_ENTITY } from 'http-status-codes'; export const register = async (req: Request, res: Response, next: NextFunction) => { let { username, password, confirmPassword, email } = req.body; try { // 先校验用户输入的数据 let { valid, errors } = validateRegisterInput(username, password, confirmPassword, email); if (!valid) { throw new HttpException(UNPROCESSABLE_ENTITY, '用户提交的数据不正确', errors); } let oldUser: (UserDocument | null) = await User.findOne({ username }); if (oldUser) { throw new HttpException(UNPROCESSABLE_ENTITY, '用户名重复', errors); } // 创建用户 let user: UserDocument = new User({ username, password, confirmPassword, email }); await user.save(); // 返回数据 res.json({ success: true, data: user.toJSON() }); } catch (error) { next(error); }; }

3、用户登录及返回token

// models/user.ts文件 export interface UserPayload { id: string } UserSchema.methods.getAccessToken = function (this: UserDocument): string { //this.id是一个语法糖，或者说快捷方式，指向this._id let payload: UserPayload = { id: this.id };//payload是放在放在jwt token里存放的数据 return jwt.sign(payload, process.env.JWT_SECRET_KEY || 'abc', { expiresIn: '1h' }); } interface UserModel<T extends Document> extends Model<T> { login: (username: string, password: string) => UserDocument | null } // 扩展一个方法 UserSchema.static('login', async function (this: any, username: string, password: string): Promise<UserDocument | null> { const user: UserDocument | null = await this.model('User').findOne({ username }); if (user) { //判断用户输入的密码和数据库里存的密码是否能匹配 const matched = await bcryptjs.compare(password, user.password); if (matched) { return user; } else { return null; } } else { return null; } }) //controllers/user.ts控制器 // 用户登录 export const login = async (req: Request, res: Response, next: NextFunction) => { try { const { username, password } = req.body; // 传递用户名和密码登录 const user: UserDocument | null = await User.login(username, password); if (user) { let access_token = user.getAccessToken(); res.json({ success: true, data: access_token }); } else { throw new HttpException(UNAUTHORIZED, '登录失败'); } } catch (error) { next(error); } }

四、上传文件

1、安装依赖包

npm install multer

2、指定上传地址

// 在index.ts文件中 //指定上传文件的存储空间 const storage = multer.diskStorage({ //指定上传的目录 destination: path.join(__dirname, 'public', 'uploads'), filename(_req: Request, file: Express.Multer.File, callback) { // callback 第二个参数是文件名 时间戳.jpg callback(null, Date.now() + path.extname(file.originalname)); } }); // 在需要上传的地方使用这个 const upload = multer({ storage });

3、指定上传的控制器

//当服务器端接收到上传文件请求的时候，处理单文件上传。字段名avatar request.file=Express.Multer.File app.post('/user/uploadAvatar', upload.single('avatar'), userController.uploadAvatar);

4、上传文件的控制器

// 上传文件 export const uploadAvatar = async (req: Request, res: Response, next: NextFunction) => { try { const { userId } = req.body; let avatar = `${req.protocol}://${req.headers.host}/uploads/${req.file.filename}`; await User.updateOne({ _id: userId }, { avatar }); //处理上传的文件，然后更新数据库，更新此用户对应的avatar字段。然后返回真实的图片路径 res.json({ success: true, data: avatar }); } catch (error) { next(error); } }