Первый шаг расширенного полного стека: Nest.js + Axios реализуют эти 5 интерфейсов.

Node.js внешний интерфейс JavaScript
Первый шаг расширенного полного стека: Nest.js + Axios реализуют эти 5 интерфейсов.

предыдущий постМы суммируем 5 способов передачи данных по http/https для веб-разработки:

  • url param
  • query
  • form urlencoded
  • form data
  • json

Эти 5 методов охватывают большинство сценариев в разработке, их освоение может легко удовлетворить потребности в различных передачах данных http/https.

Если вы хотите быть разработчиком полного стека, вы не можете быть удовлетворены написанием внешнего кода таким образом, вы должны также уметь писать внутренний код.

Итак, в этой статье давайте реализуем внешний и внутренний код, пройдем по всей ссылке и действительно освоим их.

Внешний интерфейс использует axios для отправки запросов, а внутренний использует Nest.js в качестве серверной среды.

Готов к работе

Прежде всего, нам нужно запустить сервер Nest.js и поддерживать API-интерфейс и статические страницы.

Nest.js очень быстро создает грубый сервис, для этого требуется всего несколько шагов:

  • Чтобы установить @nest/cli, используйтеnest new xxxСоздайте проект Nest.js,
  • Выполнить в корневом каталогеnest g resource personБыстро сгенерировать грубый код для модуля человека
  • npm run startЗапустите службу Nest.js

Такой сервис с хамским интерфейсом будет работать, не правда ли, быстро?

Так выглядит сервис после запуска

Он выводит доступные интерфейсы и может быть протестирован в почтальоне или браузере:

Интерфейс API работает, а затем поддерживает доступ к статическим ресурсам:

main.ts отвечает за запуск ioc-контейнера Nest.js.На основе кода, сгенерированного скаффолдом, вызов useStaticAssets может поддерживать запросы на статические ресурсы.

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'public'), { prefix: '/static'});
  await app.listen(3000);
}
bootstrap();

Мы указываем префикс как статический, а затем добавляем html в общедоступный каталог статических файлов:

<html>
<body>hello</body>
</html>

Перезапустите службу, а затем откройте браузер, чтобы попробовать:

Поддерживается как API-интерфейс, так и доступ к статическим ресурсам.Далее давайте реализуем следующие 5 методов передачи данных по HTTP на интерфейсе и на сервере соответственно.

url param

Параметр url — это параметр в URL-адресе, который объявлен в Nest.js с помощью имени параметра, а затем извлечен декоратором @Param (имя параметра) и введен в контроллер:

@Controller('api/person')
export class PersonController {
  @Get(':id')
  urlParm(@Param('id') id: string) {
    return `received: id=${id}`;
  }
}

Интерфейсный код — это метод get, а параметры помещаются в URL-адрес:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
    <script>
        async function urlParam() {
            const res = await axios.get('/api/person/1');
            console.log(res);            
        }
        urlParam();
   </script>
</body>

Запустите службу под доступом к браузеру:

Консоль выводит сообщение, возвращенное сервером, которое доказывает, что сервер получил данные, переданные параметром url.

Способ передачи данных через URL-адрес в дополнение к параметру URL-адреса и запросу:

query

query — это строка после ? в URL-адресе, которая должна быть закодирована.

В Nest.js получите его через декоратор @Query:

@Controller('api/person')
export class PersonController {
  @Get('find')
  query(@Query('name') name: string, @Query('age') age: number) {
    return `received: name=${name},age=${age}`;
  }
}

Интерфейсный код также отправляет запрос на получение через axios:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
    <script>
        async function query() {
            const res = await axios.get('/api/person/find', {
                params: {
                    name: '光',
                    age: 20
                }
            });
            console.log(res);            
        }
        query();
   </script>
</body>
</html>

Параметры задаются параметрами, axios будет кодировать URL, вам не нужно делать это самостоятельно.

Затем проверьте:

Сервер успешно принял данные, которые мы передали через запрос.

Приведенные выше два (параметр URL, запрос) — это способы передачи данных через URL-адрес, а следующие три — способы передачи данных через тело.

html urlencoded

html urlencoded передает данные через тело, на самом деле строка запроса помещается в тело, поэтому требуется url encode:

Если он получен Nest.js, используя декоратор @Body, Nest.js проанализирует тело запроса и вставит его в dto.

dto — это объект передачи данных, который используется для инкапсуляции передаваемых данных:

export class CreatePersonDto {
    name: string;
    age: number;
}

import { CreatePersonDto } from './dto/create-person.dto';

@Controller('api/person')
export class PersonController {
  @Post()
  body(@Body() createPersonDto: CreatePersonDto) {
    return `received: ${JSON.stringify(createPersonDto)}`
  }
}

Интерфейсный код использует метод post для запроса, указывая тип контента какapplication/x-www-form-urlencoded, используйте qs для кодирования URL:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
    <script src="https://unpkg.com/qs@6.10.2/dist/qs.js"></script>
</head>
<body>
    <script>
        async function formUrlEncoded() {
            const res = await axios.post('/api/person', Qs.stringify({
                name: '光',
                age: 20
            }), {
                headers: { 'content-type': 'application/x-www-form-urlencoded' }
            });
            console.log(res);  
        }

        formUrlEncoded();
    </script>
</body>
</html>

Тестируется:

Сервер успешно получил данные.

На самом деле, для передачи чаще используется json, чем формат urlencoded:

json

json необходимо указать тип содержимого какapplication/json, содержимое будет передаваться в формате JSON:

Внутренний код также использует @Body для получения, никаких изменений не требуется. И форма urlencoded, и json берут значение из тела, Nest.js различает его в зависимости от типа контента и использует разные методы синтаксического анализа.

@Controller('api/person')
export class PersonController {
  @Post()
  body(@Body() createPersonDto: CreatePersonDto) {
    return `received: ${JSON.stringify(createPersonDto)}`
  }
}

Интерфейсный код использует axios для отправки почтовых запросов, а передача json по умолчанию будет указывать тип контента какapplication/json, не нужно вручную указывать:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
    <script>
        async function json() {
            const res = await axios.post('/api/person', {
                name: '光',
                age: 20
            });
            console.log(res);     
        }
        json();
    </script>
</body>
</html>

Тестируется:

Сервер успешно получил данные, переданные через json.

И json, и форма urlencoded не подходят для передачи файлов. Если вы хотите передать файлы, используйте данные формы:

form data

Данные формы используют -------- в качестве границы для разделения передаваемого контента:

Nest.js анализирует данные формы с помощью перехватчика FilesInterceptor, включенного с помощью декоратора @UseInterceptors и извлекаемого через @UploadedFiles. Содержимое нефайлов также извлекается через @Body.

import { AnyFilesInterceptor } from '@nestjs/platform-express';
import { CreatePersonDto } from './dto/create-person.dto';

@Controller('api/person')
export class PersonController {
  @Post('file')
  @UseInterceptors(AnyFilesInterceptor())
  body2(@Body() createPersonDto: CreatePersonDto, @UploadedFiles() files: Array<Express.Multer.File>) {
    console.log(files);
    return `received: ${JSON.stringify(createPersonDto)}`
  }
}

Интерфейсный код использует axios для отправки почтового запроса, указывая тип контента какmultipart/form-data:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
    <input id="fileInput" type="file" multiple/>
    <script>
        const fileInput = document.querySelector('#fileInput');

        async function formData() {
            const data = new FormData();
            data.set('name','光');
            data.set('age', 20);
            data.set('file1', fileInput.files[0]);
            data.set('file2', fileInput.files[1]);

            const res = await axios.post('/api/person/file', data, {
                headers: { 'content-type': 'multipart/form-data' }
            });
            console.log(res);     
        }

        fileInput.onchange = formData;
    </script>
</body>
</html>

ввод файла Укажите несколько, чтобы выбрать несколько файлов.

Тестируется:

Сервер получает имя и возраст:

Перейдите в консоль сервера, чтобы увидеть:

Как видите, сервер успешно принял загруженный нами файл.

Весь код загружен на github:GitHub.com/кварк глюон P…

Суммировать

Мы используем axios для отправки запросов, используем Nest.js для запуска бэкенд-сервиса и реализуем 5 методов передачи данных http/https:

Первые два из них находятся в URL:

  • url param: параметры в URL, используйте @Param в Nest.js для получения
  • query: строка после ? в URL-адресе, который извлекается с помощью @Query в Nest.js.

Последние три находятся в теле:

  • form urlencoded: Аналогичен строке запроса, но помещается в тело. Nest.js использует @Body для выборки, а axios должен указать тип контента какapplication/x-www-form-urlencoded, а URL кодирует данные с помощью qs
  • json: данные в формате json. Nest.js использует @Body для выборки, и axios не нужно указывать тип контента отдельно, axios будет обрабатывать его внутри.
  • form data: Данные, разделенные ----- в качестве границы. В основном используемый для передачи файлов, Nest.js должен использовать FilesInterceptor для обработки, использовать @UseInterceptors для включения. Используйте @Body для остальных. В axios тип контента должен быть указан какmultipart/form-dataи инкапсулировать передаваемое содержимое с помощью объекта FormData.

Эти 5 методов передачи данных http/https охватывают большинство сценариев разработки.Если вы хотите перейти к полному стеку, предоставление этих 5 интерфейсов — это первое, что нужно сделать.

Категории