在我们开始的过程中,肯定不会把数据存在一个表里面,我们会进行分表,把数据分开存,然后通过关联关系,联合查询。

typeOrm 文档一对一 | TypeORM 中文文档

前端代码还是复用上一章的 增加了一个添加Tag

                                    搜索            添加                                                                                                    编辑                    删除                    添加tag                                                                                                                                                                                                        关闭                                    保存                                                                tag1            tag2            tag3                            确定            import { ref, reactive } from 'vue'import type { FormInstance } from 'element-plus'import { addUser, updateUser, delUser, getList, addTags } from '@/server'const isShowTag = ref(false)const tags = ref([])const total = ref(0)const row = ref({})const addTa = async () => {    const res = await addTags({        tags: tags.value,        userId: row.value.id    })    isShowTag.value = false;    tags.value = [];}//搜索框const search = reactive({    keyWord: "",    page: 1,    pageSize: 10})//表单const form = reactive({    name: "",    desc: "",    id: 0})//清空数据const resetForm = reactive({ ...form })//表格数据const tableData = ref([])//弹框开关const dialogVisible = ref(false)const openDialog = () => {    dialogVisible.value = true;    Object.assign(form, resetForm)}//初始化表格数据const init = async () => {    const list = await getList(search)    tableData.value = list?.data ?? [];    total.value = list?.total ?? 0}init()const change = (page) => {    search.page = page;    init()}//保存 和修改 表格数据const save = async () => {    if (form.id) {        await updateUser(form)    } else {        await addUser(form)    }    close()    init()}//删除表格数据const deleteRow = async (row) => {    await delUser({ id: row.id })    init()}//获取 详情const edit = (row: any) => {    dialogVisible.value = true;    Object.assign(form, row)}//关闭弹框const close = () => {    dialogVisible.value = false;}* {    padding: 0;    margin: 0;}html,body {    background: #ccc;}.wraps {    height: 100vh;    padding: 30px;}

新增了一个接口

import axios from 'axios'axios.defaults.baseURL = 'http://localhost:3000'export const addUser = (data) => axios.post('/user',data).then(res => res.data)export const getList = (data) => axios.get('/user',{params:data}).then(res => res.data)export const delUser = (data) => axios.delete(`/user/${data.id}`).then(res => res.data)export const updateUser = (data) => axios.patch(`/user/${data.id}`,data).then(res => res.data)//添加tagexport const addTags = (data) => axios.post(`/user/add/tags`,data).then(res => res.data)

后端Nestjs

1.新建一个tags.entity.ts

定义Tags的数据表

import { Column, Entity, PrimaryGeneratedColumn, BeforeInsert, CreateDateColumn, Generated, OneToOne, JoinColumn, ManyToOne } from 'typeorm'import { User } from './user.entity'@Entity()export class Tags {    @PrimaryGeneratedColumn()    id: number    @Column()    tags:string    @ManyToOne(()=>User,(user)=>user.tags)    @JoinColumn()    user:User} 

Modal 需要关联tag表

import { Module } from '@nestjs/common';import { UserService } from './user.service';import { UserController } from './user.controller';import {TypeOrmModule} from '@nestjs/typeorm'import { User } from './entities/user.entity';import { Tags } from './entities/tags.entity';// import { example } from './entities/tags.entity';@Module({  imports:[TypeOrmModule.forFeature([User,Tags])],  controllers: [UserController],  providers: [UserService]})export class UserModule {}

然后user表跟tags表进行关联

import { Column, Entity, PrimaryGeneratedColumn, BeforeInsert, CreateDateColumn, Generated, OneToOne, JoinColumn, OneToMany } from 'typeorm'import { Tags } from './tags.entity'@Entity()export class User {  @PrimaryGeneratedColumn()  id: number  @Column({ type: "varchar", length: 255 })  name: string  @Column({ type: "text" })  desc: string  @Generated('uuid')  uuid: string  @CreateDateColumn({ type: "timestamp" })  createTime: Date  @OneToMany(() => Tags, (tags) => tags.user)  tags:Tags[]  // example: example}

这儿我们解释一下OneToMany 和ManyToOne的用法

对于用户来说一个用户可以拥有多个tag 他们的关系是一对多 OneToMany

对于tag来说他们是多个tag指定单个用户 所以是ManyToOne

OneToMany 接受两个参数

第一个参数是个函数返回关联的类 所以在user表关联tag

第二个参数 创建双向关系

ManyToOne 用法一样

@OneToMany(() => Tags, (tags) => tags.user)

保存该关系

沿用上一章的代码增加Controller 增加addTags

import { Controller, Get, Post, Body, Patch, Param, Delete, Query } from '@nestjs/common';import { UserService } from './user.service';import { CreateUserDto } from './dto/create-user.dto';import { UpdateUserDto } from './dto/update-user.dto';@Controller('user')export class UserController {  constructor(private readonly userService: UserService) {}  @Post('/add/tags')  addTags (@Body() params:{tags:string[],userId:number}) {    return this.userService.addTags(params)  }  @Post()  create(@Body() createUserDto: CreateUserDto) {    return this.userService.create(createUserDto);  }  @Get()  findAll(@Query() query:{keyWord:string,page:number,pageSize:number}) {    return this.userService.findAll(query);  }  @Patch(':id')  update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {    return this.userService.update(+id, updateUserDto);  }  @Delete(':id')  remove(@Param('id') id: string) {    return this.userService.remove(+id);  }}

service 增加 addTags 方法

import { Injectable } from '@nestjs/common';import { CreateUserDto } from './dto/create-user.dto';import { UpdateUserDto } from './dto/update-user.dto';import { Repository, Like } from 'typeorm';import { InjectRepository } from '@nestjs/typeorm';import { User } from './entities/user.entity';import { Tags } from './entities/tags.entity';// import { example } from './entities/tags.entity';@Injectable()export class UserService {  constructor(  @InjectRepository(User) private readonly user: Repository,  @InjectRepository(Tags) private readonly tag: Repository  ) { }//通过前端传入的userId 查到当前id 的用户信息,然后拿到前端传入的tags [tag1,tag2,tag3]// 进行遍历 给tag实例进行赋值 然后调用保存方法添加tag 添加完之后 通过 tagList 保存该tag类// 最后把tagList 赋给 user类的tags属性 然后重新调用save 进行更新  async addTags (params:{tags:string[],userId:number}) {    const userInfo = await this.user.findOne({where:{id:params.userId}})    const tagList:Tags[] = []    for (let i = 0;i<params.tags.length;i++) {       let T =  new Tags()       T.tags = params.tags[i];       await this.tag.save(T)       tagList.push(T)    }    userInfo.tags = tagList;    console.log(userInfo,1)    return this.user.save(userInfo)  }  async create(createUserDto: CreateUserDto) {    const data = new User()    // const ex = new example()    data.name = createUserDto.name    data.desc = createUserDto.desc    // await this.example.save(ex)    return this.user.save(data)  }  async findAll(query: { keyWord: string, page: number, pageSize: number }) {    const data = await this.user.find({      //查询的时候如果需要联合查询需要增加 relations      relations:['tags'],      where: {        name: Like(`%${query.keyWord}%`)      },      order:{        id:"DESC",      },      skip: (query.page - 1) * query.pageSize,      take: query.pageSize    })    const total = await this.user.count({      where: {        name: Like(`%${query.keyWord}%`)      },    })    return {      data,      total    }  }  update(id: number, updateUserDto: UpdateUserDto) {    return this.user.update(id, updateUserDto)  }  remove(id: number) {    return this.user.delete(id)  }}

如果需要联合查询需要增加 relations 注意看上面的代码