Въведение:
В днешната дигитална ера изграждането на надеждни приложения изисква комбинация от мощни бекенд технологии и елегантни предни рамки. Една популярна комбинация е използването на Node.js като backend сървър и Flutter като frontend framework. В тази публикация в блога ще проучим как да интегрираме бекенд на Node.js с фронтенд на Flutter, за да създадем страница за вход. Ще предоставим инструкции стъпка по стъпка и примери за код както за бекенда, така и за предния компонент. Така че нека се потопим и научим как да обединим тези технологии!
Предпоставки:
Преди да започнем, уверете се, че имате инсталиран следния софтуер на вашата машина:
- Node.js: Посетете официалния уебсайт на Node.js (https://nodejs.org) и изтеглете най-новата стабилна версия.
- Flutter SDK: Инсталирайте Flutter, като следвате официалната документация (https://flutter.dev/docs/get-started/install).
Настройване на бекенда:
- Създайте нова директория за вашия бекенд проект Node.js и навигирайте в нея.
- Инициализирайте нов проект Node.js, като изпълните командата
npm init -y
. - Инсталирайте необходимите зависимости, като изпълните
npm install express bcrypt jsonwebtoken
. - Създайте нов файл с име
app.js
и го отворете в предпочитания от вас редактор на кодове. - Добавете следния код, за да настроите основен Express сървър:
const express = require('express'); const bcrypt = require('bcrypt'); const jwt = require('jsonwebtoken'); const app = express(); app.use(express.json()); // Mock user data (replace with your own user authentication system) const users = [ { id: 1, username: 'user1', password: '$2b$10$9l1rjc5xsv3lR.5ghS0XquFbmN2f/2SL4CKugkAaEQZU4azAsqtcK' }, // password: 'password1' { id: 2, username: 'user2', password: '$2b$10$Fmdk6XkqzWcMZTG.M5NCxeDKF5wh3IlC57seegTJKe9hBxrl2HNZ.' }, // password: 'password2' ]; app.post('/login', (req, res) => { const { username, password } = req.body; // Find user by username const user = users.find((user) => user.username === username); if (!user) { return res.status(404).json({ error: 'User not found' }); } // Compare passwords bcrypt.compare(password, user.password, (err, result) => { if (err) { return res.status(500).json({ error: 'Internal server error' }); } if (!result) { return res.status(401).json({ error: 'Invalid password' }); } // Generate JWT const token = jwt.sign({ id: user.id, username: user.username }, 'your_secret_key'); // Return the token to the client res.json({ token }); }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); });
Обяснение:
- Започваме с импортиране на необходимите модули:
express
,bcrypt
иjsonwebtoken
. - Ние дефинираме основен Express сървър и настройваме необходимия междинен софтуер за анализиране на входящи JSON данни.
- Маршрутът
/login
обработва заявката за влизане. - Ние търсим потребителя по предоставеното потребителско име във фалшивите потребителски данни (вие бихте заменили това с вашата собствена система за удостоверяване на потребителя).
- Ако потребителят не бъде намерен, връщаме код за състояние 404.
- Използваме
bcrypt.compare
, за да сравним предоставената парола с хешираната парола, съхранена в потребителските данни. - Ако паролите не съвпадат, връщаме код за състояние 401.
- Ако паролите съвпадат, ние генерираме JWT с помощта на
jsonwebtoken.sign
и включваме идентификатора и потребителското име на потребителя. - Накрая изпращаме генерирания токен обратно на клиента.
Забележка: Не забравяйте да замените 'your_secret_key'
със силен таен ключ за подписване на вашите JWT.
Настройване на интерфейса:
- Създайте нов проект Flutter, като изпълните командата
flutter create my_app
във вашия терминал. - Навигирайте в директорията на проекта, като използвате
cd my_app
. - Отворете файла
lib/main.dart
в предпочитания от вас редактор на код. - Заменете съществуващия код със следния примерен код:
import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Login Page', theme: ThemeData( primarySwatch: Colors.blue, ), home: LoginPage(), ); } } class LoginPage extends StatelessWidget { final TextEditingController emailController = TextEditingController(); final TextEditingController passwordController = TextEditingController(); void login() async { final response = await http.post( Uri.parse('http://localhost:3000/login'), body: { 'email': emailController.text, 'password': passwordController.text, }, ); if (response.statusCode == 200) { // Handle successful login } else { // Handle login error } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Login'), ), body: Padding( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( controller: emailController, decoration: InputDecoration( labelText: 'Email', ), ), TextField( controller: passwordController, obscureText: true, decoration: InputDecoration( labelText: 'Password', ), ), SizedBox(height: 16.0), ElevatedButton( onPressed: login, child: Text('Login'), ), ], ), ), ); } }
Обяснение:
- Кодът на интерфейса създава приложение Flutter с
LoginPage
изпълним модул, който съдържа прост формуляр за влизане. - Функцията
login
изпраща POST заявка до/login
маршрута на бекенда с въведените имейл и парола. - Можете да обработвате отговора за влизане в блока if-else в рамките на функцията
login
.
Заключение:
Честито! Успешно сте интегрирали Node.js бекенд с Flutter frontend, за да създадете страница за вход. Тази комбинация ви позволява да създавате мощни и отзивчиви приложения. Можете допълнително да подобрите тази страница за вход чрез внедряване на функции като обработка на грешки, валидиране на формуляр и удостоверяване, базирано на токени. Не забравяйте да проучите допълнителни ресурси на Flutter и Node.js, за да разширите знанията си и да създадете още по-сложни приложения. Приятно кодиране!