Когда вы заинтересованы в изучении интерфейсных технологий, важно знать основы создания клиента узла. Эта статья поможет вам создать простое приложение Node JS с помощью express.
Давай начнем!!!
Предварительное условие:
- Знание о Node, установке пакетов, NVM и использовании любых IDE.
- Основы JavaScript (ES5 или ES6 +)
Первые шаги перед созданием клиента и API:
Откройте свой терминал / командную строку и создайте папку проекта.
mkdir express_demo cd express_demo
Инициализируйте npm, вам будет предложено несколько подробностей о вашем проекте, которые будут обновлены в файле package.json. (Просто нажмите ввод, если хотите пропустить)
npm init
это создает файл package.json, и по умолчанию основным файлом будет index.js (мне нравится иметь его как server.js)
Ваш файл package.json будет выглядеть так
Откройте проект в своей среде IDE и займемся программированием !!
Шаг 1. Установите экспресс
npm i express
Шаг 2: Создайте файл index.js в своем проекте (если вы помните, что ваш основной файл - index.js, прочтите и разберитесь в файле package.json, чтобы получить больше информации)
Структура вашей папки будет выглядеть примерно так
Шаг 3. Откройте index.js и добавьте следующие строки кода.
а. При необходимости импортируйте экспресс и любые другие библиотеки. (В этом примере я буду использовать «es6-prom» и «isomorphic-fetch», так как я также покажу, как сделать вызов fetch для существующего набора данных / api)
Откройте свой терминал и установите эти две библиотеки
npm i es6-promise npm i isomorphic-fetch
б. Как показано выше, «приложение» имеет область действия express, поэтому создайте прослушиватель, который прослушивает определенный порт. В этом примере это номер порта 3000.
c. Ваш клиент готов, откройте свой терминал, перейдите в папку проекта и введите
node index.js
(Проверьте пункт 1 раздела надстроек в конце, чтобы узнать о nodemon)
Откройте браузер и нажмите http: // localhost: 3000 /, чтобы увидеть следующий экран.
Шаг 4. Теперь мы готовы написать наш CRUD API
ПРИМЕЧАНИЕ.. В этом примере я буду использовать api, который есть в городе Чикаго (https://data.cityofchicago.org). Спасибо городу Чикаго за такую замечательную работу.
а. Напишем простой блок get в index.js
Теперь перезапустите клиент узла и обновите браузер, чтобы увидеть следующий экран.
б. Давайте улучшим блок get с помощью fetch, ES6 async и await, чтобы получить некоторые данные
снова перезапустите клиент узла и обновите браузер, чтобы увидеть данные из cityOfChicago api (изучите nodemon для автоматической перезагрузки)
посмотреть полный код в github
Несколько надстроек
- Используйте nodemon, если вы не хотите перезапускать сервер каждый раз при изменении index.js.
npm i nodemon
И вместо «node index.js» используйте «nodemon index.js»
3. Примеры Express CRUD (app.METHOD (PATH, HANDLER))
app.get(‘/’, function (req, res) {
res.send(‘Hello World!’)
})
app.post(‘/’, function (req, res) {
res.send(‘Got a POST request’)
})
app.put(‘/user’, function (req, res) {
res.send(‘Got a PUT request at /user’)
})
app.delete(‘/user’, function (req, res) {
res.send(‘Got a DELETE request at /user’)
})
Ссылки и упоминания
- Портал города Чикаго: https://data.cityofchicago.org/
- Документы ExpressJS: https://expressjs.com/
Узнайте больше обо мне здесь,
Https://www.linkedin.com/in/prashanthnaika
«Https://github.com/pn большая грудь
