前端全栈第二课:用typeorm向数据库添加数据---一对多关系

1.新建2个实体

js 复制代码
typeorm entity:create src/entity/Department 
typeorm entity:create src/entity/Employee

将他们加入datasource.ts

2.一对多的关系

一对一用的装饰器是:@OneToOne,那么多对一用的就是 @ManyToOne 装饰器。注意:是在多的一方使用 @ManyToOne(谁多谁用)

如下:

删除原来创建的两个表,然后重新执行npm run start

这个departmentId就是创建的外键。 加点数据试试看

结果如下

2.关联保存数据

和一对一一样使用cascade即可,此时index.ts文件里面对department的数据保存可以删除。

执行看看行不行?

执行npm run start你会发现department里面没有人员信息

那怎么添加人员信息?当然是department里面关联employee

前面在employee里面写的是@ManyToOne,现在在department里面写的是@OneToMany

在index.ts里面改改

js 复制代码
import { Department } from './entity/Department';
import { Employee } from './entity/Employee';
import { AppDataSource } from "./data-source";

AppDataSource.initialize().then(async () => {
  const e1 = new Employee();
  e1.name = '张三';

  const e2 = new Employee();
  e2.name = '李四';

  const e3 = new Employee();
  e3.name = '王五';

  const d1 = new Department();
  d1.name = '技术部';
  d1.employees = [e1, e2, e3];

  await AppDataSource.manager.save(Department, d1);
  const deps = await AppDataSource.manager.find(Department, {
    relations: {
      employees: true
    }
  });
  console.log(deps);
  console.log(deps.map(item => item.employees));

}).catch(error => console.log(error))

执行npm run start后变成

删除的时候,先把关联的 employee 删了,再删除 department:

js 复制代码
const deps = await AppDataSource.manager.find(Department, { relations: { employees: true } }); await AppDataSource.manager.delete(Employee, deps[0].employees); await AppDataSource.manager.delete(Department, deps[0].id);

如果你设置了 onDelete 为 SET NULL 或者 CASCADE: 那就不用自己删 employee 了,只要删了 department,mysql 会自动把关联的 employee 记录删除,或者是把它们的外键 id 置为空。

相关推荐
陈振wx:zchen20081 小时前
JavaScript
javascript·js
我是伪码农1 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜1 小时前
fetch-event-source源码解读
前端·javascript
用户39051332192881 小时前
前端性能杀手竟然不是JS?图片优化才是绝大多数人忽略的"降本增效"方案
前端
朱昆鹏2 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek2 小时前
pgadmin的导出图实现,还在搞先美容后拍照再恢复?
前端
永远是我的最爱2 小时前
基于.NET的小小便利店前台收银系统
前端·sqlserver·.net·visual studio
从文处安2 小时前
「九九八十一难」第一难:前端数据mock指南(TS + VUE)
前端
Zhencode2 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js
x-cmd2 小时前
[x-cmd] jsoup 1.22.1 版本发布,引入 re2j 引擎,让 HTML 解析更安全高效
前端·安全·html·x-cmd·jsoup