Обработка на уеб формуляри на сървъра с Node.js и Express

В днешното учебно ръководство ще ти покажа как да приемаш данни от формуляр на сървър с Node.js и Express. Заедно ще създадем прост сървър и ще преминем през необходимите стъпки за създаване на формуляри, които да изпращат данни към този сървър. Това ръководство е предназначено за всички, които имат основно разбиране за JavaScript и Node.js и искат да разширят уменията си в областта на уеб разработката.

Най-важни изводи:

• Основи за създаване на прост Node.js сървър с Express
• Създаване на проектната директория и инсталиране на необходимите пакети
• Създаване на HTML файл за показване и използване на формуляри
• Обработка на изпратени данни на сървъра

Стъпка по стъпка насоки

Първо трябва да създадем сървър, за да обработим пристигащите данни от формуляра. Затова започваме със създаването на нов проект Node.js.

Отвори редактора си, например Visual Studio Code, и отвори терминал. Можеш също да използваш обикновен терминал. Увери се, че Node.js е инсталиран на компютъра ти.

Навигирай към основната си директория и създай нова поддиректория за твоето приложение на сървъра. Препоръчвам да наречеш директорията „FormServerApp“.

Влез в новосъздадената си директория и инициализирай нов проект Node.js чрез командата npm init. Ще ти бъде поискано да въведеш някои информации, като името на проекта, версията и файлът за стартова точка. Можеш да приемеш стандартните стойности или да въведеш свои собствени.

След като създадеш проекта, ще видиш файл package.json в директорията. Този файл съдържа всички метаданни на твоя проект. Сега трябва да инсталираме Express, следователно изпълняваме командата npm install express.

След като инсталацията завърши, провери във файла package.json дали Express е изброен сред зависимостите. Важно е да бъде уверен, че инсталацията е успешна, преди да продължиш напред.

Сега създаваме нов файл с името index.js, който да служи като стартова точка на нашето приложение. Този файл ще съдържа основната логика за нашия Express сървър.

За начало можеш да направиш кратко тестване, като добавиш console.log("FormServer"); в index.js файл и го изпълниш с node index.js, за да се увериш, че всичко работи правилно.

Сега е моментът да използваш Express в твоя файл index.js. Добави необходимия код за импортиране на Express и създаване на Express-приложение. Ето прост код за инициализиране на Express приложение и слушане на определен порт.

Увери се, че стартираш сървъра на определен порт, например 3000. Провери дали приложението функционира коректно, като отвориш в браузъра localhost:3000. Трябва да видиш изхода „Hello World“.

За да поддържаш формулярите в приложението си, сега е необходимо да създадеш файл index.html, който да съдържа HTML структурата за нашия формуляр. Създай първо нова папка с име „public“. В нея постави файл index.html.

В файл index.html можеш да вмъкнеш проста HTML структура с формуляр. Този формуляр ще изпраща данни към сървъра по-късно.

За предоставяне на статични файлове (HTML, CSS, JS) през сървъра на Express, използвайте метода app.use(), за да зададете папката "public" като статичен каталог. По този начин браузърът може да поиска index.html файл, когато отворите localhost:3000/index.html.

Сега, след като стартирате сървъра и заредите index.html в браузъра, трябва да можете правилно да визуализирате формуляра. Въпреки това, когато попълните и изпратите формуляра, нищо не се случва все още, тъй като не сме имплементирали още сървърната логика.

В следващата стъпка ще се фокусираме върху обработката на сървърните данни от формуляра. Това означава, че трябва да добавим маршрут, който приема и обработва данните, изпратени от формуляра. Подгответе се за следващите стъпки, за да развиете вашия уеб сайт и да добавите функционалности!

Резюме

В този урок научихте как да настроите прост сървър с Node.js и Express. Разбрахте основите за създаване на Node.js проекти, инсталиране на зависимости и запознаване с HTML формите. Тези стъпки са от съществено значение за обработка на уеб формуляри от страна на сървъра.