前端全栈第一课:用typeorm向数据库添加数据

1.安装

js 复制代码
npm install -g 

typeorm typeorm init --name typeorm-relation-mapping --database mysql

修改datasource文件

datasource上的内容来源于 docker上创建一个运行容器

可视化观看mysql

安装mysql的驱动包

js 复制代码
npm install --save mysql2

启动项目

js 复制代码
npm run start

进入mysql后你看到

数据来源于

2创建新的数据表

js 复制代码
 typeorm entity:create src/entity/UserIdCard

表结构 加入datasource

运行

js 复制代码
npm run start

3.如何让user和user-id-card表格相互链接

让user和user_id_card链接在一起,在myql客户端执行删除表格命令,然后通过typeorm重新创建表格。

js 复制代码
drop table `typeorm_test`.user_id_card,`typeorm_test`.user;

在idCard里面链接user

执行npm run start看看变化

多了一列叫userId 此时他们还不是联机的,需要你设置一下

删除两个表

js 复制代码
drop table `typeorm_test`.user_id_card,`typeorm_test`.user;

给两个表添加点数据

然后执行命令

js 复制代码
npm run start

user表 user-id-card表

我们发现user-id-card里面的user-id是user表里面的id,说明他们已经关联了。

4.将两个表的增删改都关联在一起

在entity里面配置

js 复制代码
  @OneToOne(() => User, {
    cascade: true,
    onUpdate: 'CASCADE',
    onDelete: 'CASCADE'
  })

设置后,把index.ts里面的User表的保存删掉

说明关联成功

5.关联查询

正常搜索不关联的时候长这样,只查出来2项

设置参数

js 复制代码
 {
    relations: {
      user: true
    }
  }

作为前端同学很多时候都会碰到这样的数据结构,它就是这么来的。

上面一直在说在user-id-card里面访问user,但是并没有说在user里面访问user-id-card,在user里面写入user-id-card

然后在index.ts里面

执行npm run start

每执行一次npm run start,就会创建一个typeorm对象,然后向数据库加一次数据。

相关推荐
kogorou0105-bit几秒前
前端设计模式:发布订阅与依赖倒置的解耦之道
前端·设计模式·面试·状态模式
止观止17 分钟前
像三元表达式一样写类型?深入理解 TS 条件类型与 `infer` 推断
前端·typescript
雪芽蓝域zzs32 分钟前
uniapp 省市区三级联动
前端·javascript·uni-app
Highcharts.js33 分钟前
Next.js 集成 Highcharts 官网文档说明(2025 新版)
开发语言·前端·javascript·react.js·开发文档·next.js·highcharts
总爱写点小BUG35 分钟前
探索 vu-icons:一款轻量级、跨平台的 Vue3 & UniApp SVG 图标库
前端·前端框架·组件库
晚霞的不甘1 小时前
Flutter for OpenHarmony手势涂鸦画板开发详解
前端·学习·flutter·前端框架·交互
We་ct1 小时前
LeetCode 73. 矩阵置零:原地算法实现与优化解析
前端·算法·leetcode·矩阵·typescript
晚霞的不甘1 小时前
Flutter for OpenHarmony 实现动态天气与空气质量仪表盘:从 UI 到动画的完整解析
前端·flutter·ui·前端框架·交互
~小仙女~1 小时前
组件的二次封装
前端·javascript·vue.js
这是个栗子1 小时前
AI辅助编程(一) - ChatGPT
前端·vue.js·人工智能·chatgpt