برنامه نویسی

تنظیم کامل پرکس با 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 را گسترش دهید تا جریان احراز هویت کاربر را شامل شود

سوالی یا پیشنهادی دارید؟ آنها را در نظرات زیر رها کنید!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا