如何实现Angular2与Node.js(Express/Mongoose)代码及验证逻辑共享？

嘿，这个问题问到点子上了！从PHP转Node.js就是为了摆脱重复代码的噩梦，完全能实现你想要的前后端共享模型和验证逻辑——不过得用点巧劲，因为Angular和Mongoose的模型本质上不是一回事，咱们一步步来拆解：

Angular的“模型”一般是TypeScript接口/类，用来约束前端数据结构；而Mongoose的模型是基于Schema的数据库映射对象，两者不能直接用同一段代码。但我们可以把核心的字段定义、类型规则抽成共享的TS模块，然后前后端各自适配自己的框架需求。

举个实际例子：

1. 先在项目里建一个共享目录（比如src/shared），放通用的模型定义：

// src/shared/models/user.model.shared.ts
// 共享的类型定义
export interface UserShared {
  email: string;
  name: string;
  age?: number;
}

// 共享的基础字段规则（可选，也可以和验证逻辑合并）
export const UserFieldRules = {
  email: { type: 'string', required: true },
  name: { type: 'string', required: true },
  age: { type: 'number', required: false }
};

2. 后端Express/Mongoose这边，基于共享定义生成Schema：

// src/server/models/user.model.ts
import { Schema, model } from 'mongoose';
import { UserShared, UserFieldRules } from '../../shared/models/user.model.shared';

// 把共享规则转换成Mongoose Schema
const UserSchema = new Schema<UserShared>({
  email: {
    type: UserFieldRules.email.type,
    required: UserFieldRules.email.required,
    match: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, // 这里也可以把正则抽到共享规则里
    unique: true // 数据库层面的额外规则，前端不需要
  },
  name: {
    type: UserFieldRules.name.type,
    required: UserFieldRules.name.required,
    minlength: 2,
    maxlength: 50
  },
  age: {
    type: UserFieldRules.age.type,
    required: UserFieldRules.age.required,
    min: 18,
    max: 120
  }
});

export const User = model<UserShared>('User', UserSchema);

3. 前端Angular这边，直接用共享的接口约束表单或API返回数据：

// src/app/services/user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserShared } from '../../shared/models/user.model.shared';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  createUser(user: UserShared) {
    return this.http.post<UserShared>('/api/users', user);
  }
}

双重校验是必须的，但完全不用写两遍规则！现在有很多跨端的验证库，比如Zod（轻量、TS友好）、Joi（功能强大），写一次验证Schema，前后端都能直接用。

以Zod为例，步骤如下：

1. 共享目录里写验证Schema：

// src/shared/validators/user.validator.ts
import { z } from 'zod';

// 一次编写，两端复用的验证规则
export const UserValidationSchema = z.object({
  email: z.string().email('请输入有效的邮箱地址'),
  name: z.string().min(2, '姓名不能少于2个字符').max(50, '姓名不能超过50个字符'),
  age: z.number().min(18, '年龄不能小于18岁').max(120, '年龄不能超过120岁').optional()
});

// 自动生成TS类型，替代之前的UserShared接口
export type UserShared = z.infer<typeof UserValidationSchema>;

2. 前端Angular里用它做表单验证（可以配合@angular/forms的自定义验证器，或者提交前直接校验）：

// src/app/components/user-form/user-form.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { UserValidationSchema, UserShared } from '../../../shared/validators/user.validator';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder, private userService: UserService) {
    this.userForm = this.fb.group({
      email: [''],
      name: [''],
      age: ['']
    });
  }

  onSubmit() {
    // 用Zod校验表单数据
    const validationResult = UserValidationSchema.safeParse(this.userForm.value);
    if (!validationResult.success) {
      // 把错误信息映射到表单控件
      validationResult.error.issues.forEach(issue => {
        const control = this.userForm.get(issue.path[0] as string);
        if (control) {
          control.setErrors({ custom: issue.message });
        }
      });
      return;
    }

    // 校验通过，发送请求
    this.userService.createUser(validationResult.data as UserShared).subscribe({
      next: () => alert('用户创建成功'),
      error: (err) => alert(err.message)
    });
  }
}

3. 后端Express里用它校验POST请求体：

// src/server/routes/user.routes.ts
import { Router } from 'express';
import { UserValidationSchema } from '../../shared/validators/user.validator';
import { User } from '../models/user.model';

const router = Router();

router.post('/api/users', async (req, res) => {
  // 用Zod校验请求体
  const validationResult = UserValidationSchema.safeParse(req.body);
  if (!validationResult.success) {
    return res.status(400).json({
      errors: validationResult.error.issues.map(issue => ({
        field: issue.path[0],
        message: issue.message
      }))
    });
  }

  // 校验通过，创建用户
  try {
    const user = new User(validationResult.data);
    await user.save();
    res.status(201).json(user);
  } catch (err) {
    res.status(500).json({ message: '创建用户失败' });
  }
});

export default router;

为了让共享代码能被前后端顺利导入，建议你的项目结构大概是这样：

your-project/
├── src/
│   ├── shared/          # 前后端共享代码
│   │   ├── models/
│   │   └── validators/
│   ├── client/           # Angular前端代码
│   │   ├── app/
│   │   └── ...
│   └── server/           # Express后端代码
│       ├── models/
│       ├── routes/
│       └── ...
└── package.json

同时要确保前后端的TS配置（tsconfig.json）都能正确识别src/shared目录，比如在include数组里加上../shared/**/*（根据相对路径调整）。

内容的提问来源于stack exchange，提问作者Ilya