تنظیم کامل پرکس با React ، Node.js ، Express و MongoDB

تنظیم کامل پرکس با React ، Node.js ، Express و MongoDB
Feathersjs یک چارچوب سبک برای ساخت برنامه های کاربردی در زمان واقعی با API های استراحت و WebSocket است. در این راهنما ، ما از طریق راه اندازی یک برنامه Fitly FeatherJS با یک Resuct Frontend ، Node.JS + Express Backend و MongoDB به عنوان پایگاه داده قدم می زنیم.
پیش نیازهای
قبل از شروع ، مطمئن شوید که موارد زیر را نصب کرده اید:
- node.js (v16 یا بعد)
- منگوله (در حال اجرا به صورت محلی یا سرویس ابری مانند اطلس MongoDB)
- جنجال یا NPM
تنظیم باطن (Featherjs + بیان کردن + mongoDB)
مرحله 1: یک برنامه پرها را آغاز کنید
ابتدا بیایید یک برنامه Featherjs برای باطن ایجاد کنیم:
npx @feathersjs/cli generate app
ارسال ها را دنبال کنید و گزینه های زیر را انتخاب کنید:
- حمل: استراحت و وب سایت
- مجموعه پایگاه داده: mongoDB
- احراز هویت: بله (احراز هویت مبتنی بر JWT را انتخاب کنید)
مرحله 2: اتصال MongoDB را پیکربندی کنید
آداپتور MongoDB را نصب کنید:
yarn add @feathersjs/mongodb mongodb
تغییر دادن src/app.js
برای اتصال به MongoDB:
const { MongoClient } = require('mongodb');
const mongoClient = new MongoClient('mongodb://localhost:27017');
mongoClient.connect().then(() => {
const db = mongoClient.db('feathers_app');
app.set('mongoClient', db);
});
مرحله 3: ایجاد یک سرویس
برای ایجاد یک سرویس جدید ، اجرا کنید:
npx @feathersjs/cli generate service
گزینه های زیر را انتخاب کنید:
-
نام سرویس:
users
- آداپتور پایگاه داده: mongoDB
-
مسیر:
/users
مرحله 4: احراز هویت را پیکربندی کنید
با اصلاح تأیید اعتبار را فعال کنید src/authentication.js
:
app.configure(authentication({ secret: 'your-secret-key' }));
سپس سرور خود را مجدداً راه اندازی کنید:
yarn dev
باطن شما اکنون در حال اجرا است http://localhost:3030
بشر
تنظیم Frontend (React + Feathersjs Client)
مرحله 1: یک برنامه React را آغاز کنید
npx create-react-app feathers-client
cd feathers-client
مرحله 2: مشتری پرها را نصب کنید
در داخل برنامه React خود ، وابستگی های مشتری Featherjs را نصب کنید:
yarn add @feathersjs/client axios
مرحله 3: به Backend Feathersjs وصل شوید
ایجاد a feathers.js
در src/
:
import feathers from '@feathersjs/client';
import io from 'socket.io-client';
const socket = io('http://localhost:3030');
const client = feathers();
client.configure(feathers.socketio(socket));
client.configure(feathers.authentication());
export default client;
مرحله 4: داده ها را از سرویس پرها واگذار کنید
تغییر دادن App.js
برای واکشی کاربران:
import { useEffect, useState } from 'react';
import client from './feathers';
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
client.service('users').find().then((response) => {
setUsers(response.data);
});
}, []);
return (
<div>
<h1>FeathersJS Users</h1>
<ul>
{users.map((user) => (
<li key={user._id}>{user.email}</li>
))}
</ul>
</div>
);
}
export default App;
مرحله 5: احراز هویت با Feathersjs
تغییر دادن feathers.js
شامل احراز هویت:
client.authenticate({
strategy: 'local',
email: 'test@example.com',
password: 'password'
}).then(response => console.log('Authenticated!', response))
.catch(e => console.error('Authentication failed', e));
اجرای برنامه تمام پشته
باطن را شروع کنید:
yarn dev
جلوی را شروع کنید:
yarn start
اکنون ، Frontend React شما باید بتواند با Backend Featherjs ارتباط برقرار کند ، کاربران را واگذار کرده و تأیید اعتبار را انجام دهد.
پایان
FeathersJS ساخت برنامه های زمان واقعی را با پشتیبانی استراحت و WebSocket آسان می کند. در این راهنما ، ما یک برنامه Fitly FeatherJS را با استفاده از React ، Node.js ، Express و MongoDB تنظیم کردیم. می توانید با افزودن خدمات بیشتر ، ادغام با ارائه دهندگان تأیید اعتبار یا استقرار برنامه ، این کار را بیشتر گسترش دهید.
چه چیزی بعدی؟
- API خود را با کنترل دسترسی مبتنی بر نقش (RBAC) ایمن کنید
- برنامه خود را با استفاده از Docker یا ارائه دهنده ابر مستقر کنید
- مشتری FeatherJS را گسترش دهید تا جریان احراز هویت کاربر را شامل شود
سوالی یا پیشنهادی دارید؟ آنها را در نظرات زیر رها کنید!