《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.namedata.age = createUserDto.agereturn 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

跨域处理

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


// 启用 CORSapp.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