《Nest系列 - 4. 听说人人都会CRUD，可是我还不会怎么办？？？-《4.2结合前端使用实现CRUD》

终于到了这一步，今天我们就将实现一个CRUD，主要是编写nest 部分，前端部分后面可以看git 代码
下面是效果演示（大部分是参考满哥实现，🤣🤣🤣）

前期准备

前端接口处理

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000' // 服务器地址，就是nest 项目的运行地址
// 添加用户
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)
// 根据id 删除用户
export const delUser = (data) => axios.delete(`/user/${data.id}`).then(res => res.data)
// 根据id 更新用户信息
export const updateUser = (data) => axios.patch(`/user/${data.id}`, data).then(res => res.data)

通过前端的接口请求，我们知道要访问/user 地址，那么对应的Nest的 controller 就知道怎么回事了，并且入参和出参 前端和后端都是 一一匹配的

Nest 处理

controller 层

import { Controller, Get, Post, Body, Patch, Param, Delete, Query, HttpCode } from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';


@Controller('user') // 匹配user 路由
export class UserController {
  constructor(private readonly userService: UserService) {}
  /**
   * 新增用户数据
   * @param createUserDto 参数
   * @returns 
   */
  @Post()
  creates(@Body() createUserDto: CreateUserDto) {
    return this.userService.create(createUserDto);
  }
  /**
   * 获取列表数据
   * @param query 查询参数，
   * @param page 当前页码
   * @param pageSize 每页显示条数
   *  @param keyWord 关键字
   * @returns 
   */

  @Get()
  async findAll (@Query() query:{keyWord: string, page: number, pageSize: number}) {
    return  await this.userService.findAll(query);
  }
  
/**
 * 更新根据用户id,跟新数据
 * @param id  用户id
 * @param updateUserDto 参数
 * @returns 
 */
  @Patch(':id')
  update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {
    return this.userService.update(+id, updateUserDto);
  }

  /**
   * 根据用户id 删除用户
   * @param id 用户id
   * @returns 
   */

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.userService.remove(+id);
  }
}

上面controller 层口就是接口地址匹配，怎么解析客户端传来的数据，然后将解析出来的参数，传递给server层做具体的数据库操作

server层

// 使用InjectRepository装饰器并引入Repository即可使用typeorm的操作
import { Injectable } from '@nestjs/common';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';
import { InjectRepository } from '@nestjs/typeorm';
import { User } from './user.entity';
import { Like, Repository } from 'typeorm';

@Injectable()
export class UserService {
   constructor(@InjectRepository(User)private readonly usersRepository: Repository<User>,) { }
   /**
    * 
    * @param createUserDto 入参
    * @returns  创建用户
    */
   create(createUserDto: CreateUserDto) {
    const data = new User()
    data.name = createUserDto.name
    data.age = createUserDto.age
    return this.usersRepository.save(data)

  }
  /**
   * 
   * @param query  查询参数
   * @returns  查询用户
   */
   async findAll(query:{keyWord: string, page: number, pageSize: number }) {
   // Like 用于模糊查询
    const data =  await this.usersRepository.find({
      where: {
        name: Like(`%${query.keyWord}%`)
      },
      order: {
        id: "DESC"
      },
      skip: (query.page - 1)* query.pageSize,
      take: query.pageSize,
    })
    const total = await this.usersRepository.count({
      where: {
        name: Like(`%${query.keyWord}%`)
      },
    })

    return {
      data,
      total
    }

  }

  /**
   * 
   * @param id 用户id
   * @param updateUserDto  入参
   * @returns   更新用户信息
   */
  update(id: number, updateUserDto: UpdateUserDto) {
    return this.usersRepository.update(id, updateUserDto)
  }
/**
 * 
 * @param id 用户id
 * @returns  删除用户
 */

  remove(id: number) {
    return this.usersRepository.delete(id)
  }
}

server 层就是 接收controller 传递来的参数，然后利用InjectRepository 和 Repository 来操作相应的CRUD的方式即可

比如

新增数据： 直接调用 save(),

查找数据： 直接调用 find()

更新数据： 直接调用 update()

删除数据： 直接调用 delete()

是不是感觉so easy

跨域处理

这个就是服务端容许那个地址，方法来访问，这里就是容许的前端的访问地址

// 启用 CORS
  app.enableCors({
    origin: 'http://localhost:3000', // 允许访问的来源,前端项目的访问地址
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS', // 允许的 HTTP 方法
    credentials: true, // 允许发送凭据（如 Cookie 等）
  });

项目地址

• Vue 前端地址：
  https://gitee.com/Big_Cat-AK-47/vue-project

• nest 后端地址：https://gitee.com/Big_Cat-AK-47/nest

总结

• 服务端在controller 层定义好路由信息(接口地址),在server 层做逻辑处理，将数据返回给客户端
• 前端根据路由匹配后端地址，通过网络请求库做数据请求
• 前端传递参数，后端接收参数，通过装饰器解析，解析出参数，再传递给server 层做逻辑处理
• server 层 通过typeOrm 库，做数据库的增删改查，主要就是save，find，update，delete
• 如果想做一些数据库的查询，可以利用一些关键字来实现where Like等，详细更多可以查看官网https://typeorm.bootcss.com/working-with-entity-manager

Nest 系列 往期文章

1. 《Nest系列 - 1. 🔥运行一个Nest项目以及整体目录学习》

2. 《Nest系列 - 2. 🔥Nest 代码生成器，让你告别base代码书写！！！》

3. 《 Nest系列 - 3. 🔥掌握常见Nest 装饰器，奠定坚实基础！！！！！！》

4. 《Nest系列 - 4. 🔥听说人人都会CRUD，可是我还不会怎么办？？？-《 4.1-数据库连接和实体》》