Nest.js — ToDo колдонмосу үчүн Rest API түзөбүз

Акыркы кодду менин githubымдан таба аласыз

Анда эмесе кеттикпи!

Проекти баштоодон мурда, сиз

• TypeScript TS
• Rest API and MongoDB
• Postman же Insomnia жонундо билип алышыңыз керек.

Nest.js орнотуу
1 .Nest.js үчүн cli орнотобуз.

npm i -g @nestjs/cli

2. Жаңы Nest.js проекти түзөбүз.

nest new server

3. Проекти иштетебиз!

Куттуктайм!Сиз эми браузерде localhost:3000 портун ача аласыз. Көрдүңүзбү👀 ‘Салам дүйнө!’. Керемет💪. Кеттик анда.

Todo Controller түзүү

Терминалды ачып, nest.js cli менен todos контроллерин түзөбүз.

nest generate controller todo/todo

Бул команда менен биз контроллердин шаблон файлдары бар папканы түзүп алабыз.

Моделдөө
Адегенде биздин todo проектибиз кандай болорун ойлонуп көрөлү. Келгиле, аны жөнөкөй сактап, бул талаалар менен түзөлү:

id — string
title — string
статус — ‘todo’, ‘done’, ‘processing’ статустарынын бири.

Эми, Todo үчүн dto (Маалыматтарды өткөрүү объектисин) түзүп. /todo папкасына todo.dto.ts файлын кошуп, бул кодду ошол жерге койобуз:

export class TodoDTO {
  id?: string;
  title: string;
  status: 'todo' | 'done' | 'in progress'
}

Моделдик ишибизди бүтүрдүк.

Эми, проектибиз үчүн бир нече маалымат жазып алабыз.

Азырынча бизде маалымат базасы жок болгондуктан, келгиле, мок(mock data) түзөлү. Сервер папкасында бул менен todos-mock.ts файлын түзөбүз:

import { TodoDTO } from "./todo.dto"
export const todos: TodoDTO[] = [
{
id: '1',
title: 'Generate apps',
status: 'done'
},
{
id: '2',
title: 'Set up the backend',
status: 'in progress'
},
{
id: '3',
title: 'Connect DB',
status: 'todo'
},
   {
id: '4',
title: 'Set up the client',
status: 'todo'
},
]

Келгиле,Todosту GET менен алып алалы. Ал учун биз ,керектүү тапшырмаларды импорттоп алабыз.

• import @Get decorator

import { Controller, Get } from ‘@nestjs/common’;

• import TodoDTO

import { TodoDTO } from './todo.dto';

• import todo mocks

import { todos } from './todos-mock';

Ошондой эле, биз контроллердогу todosду өзгөрткөнү жаткандыктан, аны ушул сыяктуу өзгөрмөгө көчүрүп алалы:

let todosData = todos;

GET маршруту функциясын түзүп алдык.

@Controller('todos') // here todos referring to localhost/todos
export class TodoController {
 @Get()
 getTodos(): TodoDTO[] {
  return todosData;
 }
}

Текшерип алабыз.
Nodemon менен серверди ушул команда менен текшеребиз.

npm run start:dev
http://localhost:3000/todos ачабыз.

Келгиле, POST(Кошуу)
Бул үчүн бизде @Post жана @Body абдан пайдалуу 2 декоратор бар.

Аларды импорттоп алабыз:

import {
 Body,
 Controller, 
 Get, 
 Post
} from '@nestjs/common';

Жазып жаткан кодуңуздагы getTodos() методунун ылдыйына кошуп жазыңыз:

@Post()
createTodo(@Body() createTodo: TodoDTO): TodoDTO {
   const newTodo: TodoDTO = {
      id: (todosData.length + 1).toString(),
      ...createTodo
   };
   
   todosData = [...todosData, newTodo];
   
   return newTodo;
}

Post декоратору менен биз Nestке бул ыкма POST маршрутуна чалууларды көзөмөлдөө керектигин айтабыз.

Body decorator req.body үчүн синтаксистик кант болуп саналат.

Биз жөн гана колдонуучудан пайдалуу маалыматты кабыл алып, аны кайра кайтарабыз.

Текшеребиз

Маалыматты киргизебиз.

{
  "title": "Finish backend",
  "status": "todo"
}

Эми биз жаңыртууларды көрүү үчүн GET өтүнүчүн жасай алабыз.

Эми, id боюнча конкреттүү иштерди өзгортүү
PUT өтүнүчү үчүн бизде @Put жасалгалоочусу бар. Аны импорттоо:

import {
  Body,
  Controller,
  Get,
  Param,
  Post,
  Put
} from "@nestjs/common";

Эми биздин максат — конкреттүү идентификатор менен todoну өзгөртүү. Ошентип, эгерде биз PUT сурамын localhost/todos/:idге жөнөтсөк, аны жаңырткыбыз келет. Туурабы?!

Бул идентификаторду Nest.js менен кантип алабыз? Оңой эле болот.

Биринчиден, динамикалык параметр менен маршрутту түзөбүз

@Put(":id")

Экинчиден, биз @Param decoratorун импорттоп жана param атын өткөрүп жазабыз.

@Param('id')

Жазып алдыңарбы)?

Келгиле, аяктаган функцияны карап көрөлү:

@Put(":id")
updateTodo(@Body() updateTodo: TodoDTO, @Param("id") id): TodoDTO {
   todosData = todosData
                 .map(todo => (todo.id === id ? updateTodo : todo));
   
   return updateTodo;
}

Эң сонун. Болгону кичине гана код жазып алабыз.

Келгиле текшеребиз.

{
  "id": "4",
  "title": "Finish backend",
  "status": "todo"
}

Келгиле, id боюнча конкреттүү иштерди ӨЧҮРҮҮ функциясын кылалы

Муну мен сага калтыргым келет… Тамаша. Бирок аракет кылып, аны жалгыз иштегенге аракет кылыңыз, анан менин чечимимди текшериңиз. Кыстырма: Сиз @Delete жасалгалоочусун импорттой аласыз.

Бул менин жазган кодум:

@Delete(":id")
deleteTodo(@Param("id") id): TodoDTO {
   const todoToDelete = todosData.find(todo => todo.id === id);
   todosData = todosData.filter(todo => todo.id !== id);
   
   return todoToDelete;
}

Кана эмесе текшерип алалы!

Эми биз жаңыртылган todos көрүү үчүн GET өтүнүчүн жасай алабыз. ID 4 менен аткарыла турган тизме барбы?

Ошентип, азыр бизде Todo элементтерин түзүү, окуу, өзгөртүү жана жок кылуу мүмкүнчүлүгү бар Rest api бар. Эми биз базага туташтырышыбыз керек, анткени серверди өчүрүп күйгүзсөк, биздин бардык маалыматтар баштапкы абалга келтирилгенин көрөбүз.

Менин оюм
Бул Nest.js менен жасалган иштердин бир аз гана даамы. Backend иштеп чыгууну жакшыртуу үчүн Nest.js менен көптөгөн нерселерди кыла аласыз.

Эгерде сизге пайдалуу болсо,сактап алыңыз жана башкалар менен бөлүшкөндү унутпаңыз!

Менин Linkedin баракчам: https://www.linkedin.com/in/omurbek-mamytbekov/

Менин телеграмым: https://t.me/Omurbek_Mamytbekov

Менин Github баракчам: https://github.com/Omurbek1