В этом уроке мы напишем и запустим наш первый и простой веб-сервис. Это будет простое CRUD-приложение для создания меню и заказа мороженого в магазине. Более подробное объяснение этого урока можно найти в предыдущей части.
Полный код этой части можно найти здесь.
Давайте начнем!
Есть несколько инструментов, которые необходимо загрузить и установить заранее. Я также буду использовать эти инструменты при написании кода для этого урока.
NodeJS
Чтобы установить NodeJS, перейдите на официальную страницу NodeJS и загрузите стабильную версию NodeJS в разделе загрузок. Если вы используете, я буду использовать NodeJS версии 16.13.2, и я рекомендую вам загрузить и установить точно такую же версию, чтобы не было проблем с несовместимостью на вашем собственном устройстве. Чтобы проверить, завершена ли установка, выполните следующую команду в терминале или командной строке.
node -v
Код Visual Studio
Чтобы установить код VS, перейдите на https://code.visualstudio.com и загрузите программное обеспечение для своего устройства. Ничего особенного, можно использовать любые другие редакторы кода. Однако, если вы используете код Visual Studio, я рекомендую вам также установить расширение Prettier, включить форматирование при сохранении и обязательно выбрать Prettier в качестве средства форматирования по умолчанию в настройках.
Кроме того, если вы используете Windows, как и я, и планируете использовать встроенный терминал VSCode, измените терминал по умолчанию в настройках на командную строку вместо powershell, чтобы избежать будущих проблем или несовместимости.
MongoDB + Компас MongoDB
Мы будем использовать MongoDB в последующих частях этого руководства, но не мешало бы установить его сейчас. Чтобы установить MongoDB, мы можем установить MongoDB Compass (приложение с графическим интерфейсом для простого управления MongoDB). Скачать стабильную версию можно здесь. При установке MongoDB Compass сама MongoDB также будет установлена на вашем устройстве.
Почтальон
Я буду использовать Postman для тестирования наших API. Вы также можете использовать curl для тестирования API, но я действительно рекомендую Postman, так как нам проще управлять и сохранять наши запросы и ответы API. Инсталлятор можно найти здесь.
Git (необязательно)
Я буду использовать git только для того, чтобы сохранять версии моих обучающих кодов. Вам не обязательно использовать его, но приятно иметь. Я также не буду подробно рассказывать о том, как работает git. Просто подумайте об этом как об инструменте для экономии. Инсталлятор можно найти здесь.
Давайте уже перейдем к коду!
Сначала создайте папку для этого руководства в любом месте на своем компьютере. Я назову свою папку icecream-store, но вы также можете назвать папку как хотите. Назовем эту папку «папка приложения». Теперь откройте код Visual Studio и откройте папку приложения (Файл › Открыть папку…). Чтобы инициализировать приложение NodeJS, по умолчанию вы можете использовать следующую команду в своем терминале или командной строке.
npm init
Заполните необходимые поля значениями по умолчанию, и мы можем двигаться дальше. Теперь создайте новый файл в папке приложения и назовите его index.js. Внутри файла введите наши самые первые коды, как показано ниже.
index.js
console.log('Hello, World!');
Сохраните файл index.js. Что ж, это само собой разумеется, но как напоминание на будущее, каждый раз, когда мы вносим изменения в файл, просто сохраняйте его! Спамите эти кнопки CTRL+S. Теперь давайте запустим наш самый первый код, используя следующую команду в вашем терминале.
node index.js
И он должен вывести Hello, World! на консоль. Поздравляем! У вас есть код, и вы запускаете свое первое бесполезное приложение NodeJS! (Шучу, это не бесполезно, привет мировые программы — самые первые основы в любом учебнике по программированию).
Теперь давайте создадим наш первый веб-сервер, для этого нам нужно сначала установить Express. Используя NPM (менеджер пакетов узлов), просто запустите следующую команду в своем терминале.
npm install --save express
NPM загрузит экспресс из веб-репозитория NPM и установит его в папку node_modules внутри папки вашего приложения. Флаг «--save» сохранит экспресс как зависимость приложения внутри package.json. Теперь давайте изменим наш код в файле index.js для обслуживания веб-сервера.
index.js
const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res, next) => { res.send('Hello, World!'); }); app.listen(port, () => { console.log('listening to port', port); });
Пояснение. В первой строке мы импортируем экспресс-библиотеку, используя ключевое слово require. Во 2-й и 3-й строке мы определили наше приложение и переменные порта. В четвертой строке мы определили нашу самую первую конечную точку API с путем «/» и методом GET, который отправляет «Hello, World!» текст в качестве ответа. И в последней строке мы запускаем приложение и заставляем его слушать переменную порта, которую мы определили.
Теперь перезапустите приложение снова. Советы. Чтобы остановить ранее запущенное приложение NodeJS, перейдите в терминал и нажмите кнопку CTRL+C. Затем снова запустите приложение с помощью команды node index.js.
Откройте приложение Почтальон. Создайте новый запрос методом GET и введите URL-адрес http://localhost:3000. Затем нажмите кнопку Отправить, чтобы получить ответ. Если все пойдет правильно, вы должны получить «Hello, World!» текст в качестве ответа.
Поздравляем еще раз! Вы только что создали свой первый hello world API. Я полагаю, что это все, что мы пройдем в этой части 1 руководства по NodeJS. Тем не менее, я хотел бы немного изменить настройки нашего проекта, чтобы мы могли легко развивать приложение дальше.
Во-первых, нам нужно изменить наш package.json. Package.json — это файл, который описывает наше приложение NodeJS, определяет сценарии для запуска NPM и список зависимостей. А пока просто скопируйте мой следующий package.json и просто перезапишите содержимое package.json в папке приложения.
пакет.json
{ "name": "icecream-store", "version": "1.0.0", "description": "A RESTful web service app for ice cream store ordering", "main": "src/index.js", "scripts": { "build": "rimraf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files", "start": "npm run build && node dist/index.js", "start:dev": "nodemon" }, "keywords": [ "NodeJS" ], "author": "yourname", "license": "ISC", "devDependencies": { "@babel/cli": "^7.16.8", "@babel/core": "^7.16.10", "@babel/node": "^7.16.8", "@babel/preset-env": "^7.16.11", "nodemon": "^2.0.15", "rimraf": "^3.0.2" }, "dependencies": { "express": "^4.17.3" } }
Пояснение. Мы добавили несколько новых скриптов для запуска этого приложения. Мы также добавили несколько новых зависимостей для разработчиков. Раньше, когда мы изменяли файл index.js, нам приходилось вручную перезапускать наше приложение NodeJS с помощью кнопки CTRL+C для завершения. Это так неудобно. Вместо этого мы будем использовать nodemon для перезапуска приложения каждый раз, когда будут какие-либо изменения в файлах в папке нашего приложения. Чтобы сделать nodemon функциональным, нам нужно добавить файл nodemon.json в папку нашего приложения. Поэтому создайте файл с именем nodemon.json и скопируйте следующее.
nodemon.json
{ "restartable": "rs", "verbose": true, "execMap": { "js": "node_modules/.bin/babel-node" }, "watch": ["src/"], "env": { "NODE_ENV": "development" }, "ext": "js,json" }
Пояснение. Файл nodemon.json — это, по сути, конфигурация того, как должен работать nodemon. В этом файле мы указываем nodemon следить за папкой src/ внутри папки нашего приложения (которую мы еще не создали) и выполнять babel-node для запуска нашего приложения NodeJS. Babel-node — наше следующее обсуждение.
Babel — это компилятор JavaScript. Зачем использовать Бабель? Разве раньше мы не запускали javascript только с помощью команды node index.js? NodeJS поставляется со встроенным компилятором commonjs (это старый стиль javascript). С другой стороны, Babel поддерживает последние версии синтаксиса javascript.
Зачем использовать новейший синтаксис javascript?
Почему бы и нет?
Почему мы должны ограничивать себя старым синтаксисом?
Информационные технологии в настоящее время развиваются так быстро, что наши нынешние технологии скоро устареют. Можно также идти в ногу с новыми технологиями.
Чтобы заставить Babel работать, нам также нужно определить аналогичный файл конфигурации. Эта конфигурация определена в файле .babelrc. Итак, теперь нам нужно создать файл с именем .babelrc(обратите внимание на точку .символвпереди)внутри app и скопируйте следующий код.
.babelrc
{ "presets": ["@babel/preset-env"] }
Предустановка @babel/preset-env позволит нам использовать последний доступный в настоящее время синтаксис javascript.
Теперь, чтобы связать все воедино, нам нужно установить nodemon и babel. Ранее мы определили nodemon и babel как зависимости в нашем файле package.json. Теперь нам просто нужен NPM для установки этих зависимостей. Чтобы установить определенные зависимости, используйте следующую команду в терминале.
npm install
Наконец, рекомендуется переместить исходный код в папку src. Создайте новую папку в папке нашего приложения с именем src и переместите наш файл index.js в папку src. Структура папок вашего приложения теперь должна выглядеть примерно так, как показано в следующем блоке кода.
+---src | \---index.js +---.babelrc +---nodemon.json +---package-lock.json +---package.json
Чтобы немного продемонстрировать так называемый «последний синтаксис javascript», давайте изменим наш экспресс-код require в файле index.js. В синтаксисе JavaScript ES6 мы используем ключевое слово import вместо require для импорта библиотеки. Измените первую строку на следующий код.
источник/index.js
import express from 'express';
Давайте попробуем запустить его снова, на этот раз с помощью nodemon. Чтобы запустить скрипт, который мы определили для разработки, используйте следующую команду.
npm run start:dev
Эта команда запустит скрипт start:dev, который мы определили в нашем package.json, который запускает nodemon. Если все работает хорошо, вы должны увидеть что-то вроде следующего снимка экрана в консоли терминала.
Давайте подтвердим, что все работает. Попробуйте отправить тот же запрос GET http://localhost:3000 еще раз в вашем почтальоне и убедитесь, что вы получаете Hello, World! как ответ.
Вот и все, это обертка! В следующей части мы продолжим разработку нашего приложения с реальными полезными API. Нажмите здесь!
Вы можете увидеть полный код первой части в моем общедоступном репозитории на github.
Нажмите здесь!
Спасибо и надеюсь, вам понравится читать. Есть ли какие-либо ошибки или части, которые я не объяснил должным образом? Есть ли что-то, что я должен улучшить?
Если хотите, оставьте заметку для автора и похлопайте, чтобы помочь развитию канала. :)