前端全栈第一课:用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对象,然后向数据库加一次数据。

相关推荐
Nan_Shu_61420 小时前
Web前端面试题(2)
前端
知识分享小能手20 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队21 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光21 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52021 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20501 天前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 天前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 天前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 天前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 天前
v-model与-sync的演变和融合
前端·javascript·vue.js