Mohammed Rahal

جزاك الله كل خير أخي

السلام عليكم. أساتذتنا الكرام . 

لقد تعلمت API rest  باستعمال mongodb , express  . لكن أريد أن اتعلم   mysql ,  فهل يجب علي تعلم php  أو sequelize مع express  . أنا حائر في الحقيقة . لانني تعلمت جافا سكريبت كلغة برمجة . وأنا جديد في باك اند . اريد نصيحتكم من فضلكم . كل شيئ من فضلكم

جزاك الله خيرا . 

Nodemailer  . عندما ارسل طلب تسجيل الدخول يظهر خطأ 

"Error: Internal server error (nodeMailer) \n at module.exports (E:\\code\\blog-pro\\back-end\\utils\\sendEmail.js:23:15)\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async E:\\code\\blog-pro\\back-end\\controllers\\registerController.js:56:9"

السلام عليكم ,  لدي form  من 3 inputs   و زر  وأحاول ربطها مع redux toolket  المشكلة أن الفورم  تعطي القيمة السابقة دائما . 

بتاريخ 3 ساعة قال Chihab Hedidi:

سأفترض أنك تستخدم axios لإرسال الطلبات HTTP، و أيضا  لديك حالة في Redux لتخزين الـ token.

// في ملف authSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// استخدمنا createAsyncThunk لتحويل الطلبات الى حالات متقدمة (pending, fulfilled, rejected)
export const fetchToken = createAsyncThunk('auth/fetchToken', async (_, thunkAPI) => {
  try {
    // هنا يمكنك استخدام thunkAPI.getState() للوصول إلى حالة Redux
    const state = thunkAPI.getState();

    // استخدم state.auth.token كطريقة للوصول إلى الـ token
    const response = await axios.post('url/to/token/endpoint', { username: state.auth.username, password: state.auth.password });

    // قم بإرجاع البيانات التي تم استلامها من الطلب كقيمة معادة الوعد
    return response.data.token;
  } catch (error) {
    // في حالة وجود أي خطأ، قم بإرجاع الخطأ
    return thunkAPI.rejectWithValue(error.response.data);
  }
});

// الجزء الخاص بتحديث الحالة بناءً على حالة الطلب
const authSlice = createSlice({
  name: 'auth',
  initialState: {
    token: null,
  },
  reducers: {
    // يمكنك إضافة reducers إضافية هنا
  },
  extraReducers: (builder) => {
    // اتبع createAsyncThunk لتحديث الحالة بناءً على حالة الطلب
    builder.addCase(fetchToken.fulfilled, (state, action) => {
      state.token = action.payload;
    });
    builder.addCase(fetchToken.rejected, (state, action) => {
      // يمكنك تحديد كيف تتعامل مع حالة الرفض هنا، مثلاً قم بتحديث حالة الخطأ
    });
  },
});

// تصدير action و reducer
export const { /* أي reducers إضافية تريد تصديرها */ } = authSlice.actions;
export default authSlice.reducer;

في الكود الذي ارفقته استخدمت createAsyncThunk  لإنشاء fetchToken واستخدمنا getState الخاصة ب thunkAPI للوصول إلى حالة Redux و ايضا استخدمنا state.auth.token كقيمة للـ token.

 

 

شكرا أخي جزاك الله خيرا .  بقيت لي نقطة فقط سأتحقق منها و أعود . 

السلام عليكم . كيف أعمل getState()  في toolket redux  باستخدام thunkAPI  من أجل احضار token  واستعماله في ملفات form data.  

أريد أي شرح أو أي مثال مشابه .   أستطيع احضار المعلومات بالطريقة القديمة . فقط انا اريد ان اراها في createAsyncThunk  

بتاريخ 3 دقائق مضت قال Chihab Hedidi:

في Express.js، يمكن استخدام الشرط الذي يحتوي على return كجزء من middleware. Middleware في Express.js هو وظيفة تأخذ ثلاثة معاملات: request (طلب), response (استجابة), و next (وظيفة للانتقال إلى middleware التالي في السلسلة).

الـ return يمكن استخدامه لإيقاف تنفيذ middleware والرد على العميل مباشرة دون الحاجة للمرور إلى middleware التالي. 

بالنسبة للاستبدال، يمكن استخدام middleware لتنفيذ العديد من الأشياء مثل التحقق من الصلاحيات، تنقية البيانات، إعداد البيئة، وغيرها. إذا كنت بحاجة إلى تنفيذ تفاصيل محددة داخل شرط if، يمكنك استبداله بمشتق middleware واستخدامه في التطبيق بنفس الطريقة.

و هذا مثال بسيط للكود:

// Middleware الأصلي بشرط if
function customMiddleware(req, res, next) {
  if (someCondition) {
    return res.status(403).send('تم رفض الوصول');
  }
  next();
}

// استبدله بمشتق middleware
function customMiddleware(req, res, next) {
  // تنفيذ الشرط هنا
  if (someCondition) {
    return res.status(403).send('تم رفض الوصول');
  }
  next();
}

يعني يمكنك استبدال شرط if بمشتق middleware إذا كان هذا الشرط يناسب احتياجات تطبيقك بشكل أفضل.

شكرا . جزاك الله خيرا أخي

السلام عليكم : 

في express.js هل الشرط if الذي يحتوي على return  يمكن اعتباره  middlewar  وإذا كان كذالك . هل يمكن استبدال middleware به .

بتاريخ 5 دقائق مضت قال عبدالباسط ابراهيم:

إذا كان الملف "imagePath" غير موجود، فسترجع الدالة "undefined".

لإصلاح هذا الخطأ، تأكد من أن الملف "imagePath" موجود بالفعل. يمكنك القيام بذلك باستخدام الدالة "fs.existsSync()". إذا كان الملف موجودًا، فيمكنك حذفه باستخدام الدالة "fs.unlinkSync()".

إليك مثال على كيفية إصلاح الخطأ:

 

const fs = require("fs");
const imagePath = "/path/to/image";
// Check if the file exists
if (fs.existsSync(imagePath)) {
  // Delete the file
  fs.unlinkSync(imagePath);
} else {
  // The file does not exist
  console.log("The file does not exist.");
}

 

جزاك الله ووالديك خيرا

     fs.unlinkSync(imagePath)

لماذا يظهر خطا : Synchronous unlink(2). Returns undefined

بتاريخ 5 دقائق مضت قال Mustafa Suleiman:

الأمر طبيعي لأنك لا ترسل البيانات بالشكل المطلوب إلى قالب ejs، بل تقوم بإرسال الرد من الخادم على هيئة كائن، والطريقة الصحيحة لتمرير البيانات إلى القالب هي كالتالي:

// في ملف التطبيق Express
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const jsonData = {
    link: 'http://example.com'
  };

  res.render('index.ejs', { data: jsonData });
});

في ملف القالب:

<!-- في ملف قالب EJS (مثلاً index.ejs) -->
<!DOCTYPE html>
<html>
  <body>
    <a href="{{data.link}}">الرابط</a>
  </body>
</html>

 

 جزاك الله كل خير . شكرا 

عندما ارسل ملف json  يحتوي على link  إلى المتصفح من express.js ejs engin  فإنه يكون عبارة عن نص و غير قابل للضغط  

[

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:

لاحظ أنك تكتب view.engine والصحيح هو view engine كالتالي:

app.set('view engine', 'ejs');

وإليك مثال كامل:

import express from 'express';

const app = express();

// ✅ Configure EJS as your view engine
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('home', {
    title: 'hsoub.com',
    message: 'Example message: hsoub.com',
  });
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

 

جزاك الله ووالديك خيرا

استعمل ejs  مع اكسبرس  وتظهر لي رسالة الخطأ هذه . في المتصفح . 

{"message": "No default engine was specified and no extension was provided."} 

بتاريخ 9 دقائق مضت قال Adnane Kadri:

هنالك خلط قليلا في التعامل مع الوعود Promises في الشيفرة الخاصة بك، فأنت تقوم باستقبال عائد الطلب دون إعادته كخرج للدالة.

لا داعي من عبارة then في الشيفرة الأولى، قم بتعديل الشيفرة الخاصة بك لتكون على نحو:

let getPost = async (id) => {
    let res = await axios.get(baseURL + '/posts/' + id)
    return res.data.data
}

const viewAllComments = async (id) => {
   let posts = await getPost(id)
   console.log(posts)
}

viewAllComments(99)

جزاك الله خيرا ووالديك .

لدي مشكل . الدالة getPost()  لا ترجع قيمة  return الخاص بها مع انها تطبع القيمة في console .

السطر  457 يطبع في console. لكن السطر 464 يطبع undifined . 

بتاريخ 13 دقائق مضت قال Mustafa Suleiman:

المشكلة تكمن في أنك تستخدم نفس الهوية (id) "myForm" لجميع العناصر في الحلقة for داخل الدالة AllNames().

أي أن جميع الأزرار "show" تشير إلى نفس العنصر myForm، وبالتالي عليك جعل كل زر "show" يفتح العنصر المرتبط به، من خلال تمرير معرف فريد لكل عنصر، كالتالي:

<script>
      const arrays = [
        { id: 123, name: 'yasser', age: 33, job: 'engenner' },
        { id: 643, name: 'bakkar', age: 12, job: 'devloper' },
        { id: 908, name: 'hamed', age: 21, job: 'backEnd' },
        { id: 435, name: 'Umar', age: 32, job: 'fronEnd' },
        { id: 254, name: 'saber', age: 15, job: 'master' },
        { id: 765, name: 'iman', age: 11, job: 'secrit' },
      ];

      const AllNames = () => {
        for (array of arrays) {
          let content = `
                <div class="card">
                    <h1>name: ${array.name}</h1>
                    <h3>age: ${array.age}</h3>
                    <h3>job: ${array.job}</h3>
                    <div class="myForm" id= myForm-${array.id} style="display:none">
                        <input type="text" />
                        <button class="Edit" onclick="handle()">Edit</button>
                    </div>
                    <button class="show" onclick="showForm(${array.id})">show</button>
                </div>`;
          document.getElementById('divAll').innerHTML += content;
        }
      };

      const handle = () => {
        console.log(this.array);
      };

      const showForm = id => {
        document.getElementById(`myForm-${id}`).style.display = 'block';
      };

      AllNames();
    </script>

 

جزاك الله

لدي مشكلة عندما أضغط على button show أريد أن يظهر ليtesting.zip form الخاص به فقط . المشكلة أنه يظهر الاول فقط 

بتاريخ 5 ساعة قال عمر قره محمد:

فقط عدل الـ Headers إلى headers حيث ان الاولى ليس خاصية في axios، ليصبح الكود الخاص بك بالشكل التالي :

const createPost = () => {

  const title = document.getElementById("post_title").value;
  const body = document.getElementById("post_body").value;
  const token = localStorage.getItem("token");

  const params = { title, body }


  try {
    axios.post("https://tarmeezacademy.com/api/v1/posts", params, {
      headers: {
        "authorization": `Bearer ${token}`
      }
    }).then((res) => {
      console.log(res)
    })
  } catch (err) {
    console.log("the err is : " + err)
  }
}

 

جزاك الله خيرا

أتعلم على  تطبيق تواصل اجتماعي هو عبارة عن صفحة html . ولدي خطأ 401 في دالة createPost()  لا تتعرف على token أرجوا المساعدة من فضلكم 

ملاحظة : زر +  الازرق بالاسفل الذي يظهر بعد تسجيل الدخول هو الذي يتفاعل مع createPost()

New folder.zip

بتاريخ 10 دقائق مضت قال Mustafa Suleiman:

استخدم هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback().

الكود سيكون كالتالي:

import { useEffect, useState, useCallback } from 'react';
import { Col, Row } from 'react-bootstrap';
import moment from 'moment';

function Test() {
  const [today, setToday] = useState({});

  const getToday = useCallback(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    console.log(getToday);
    setToday(getToday);
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{today?.date}</Col>
      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>
        <h2>{today?.time}</h2>
      </Col>
    </Row>
  );
}

export default Test;

 

عافاك الله , في جزئية أن الوقت ليس ديناميكيا : هل هناك من حل أضيفه على هذا الكود

بتاريخ 2 دقائق مضت قال يحيى بوحسي:

عافاك الله , في جزئية أن الوقت ليس ديناميكيا : هل هناك من حل أضيفه على هذا الكود

استاذ جزاك الله . لقد توصلت للحل : 

import { useEffect, useState, useCallback } from 'react';

import { Col, Row } from 'react-bootstrap';

import moment from 'moment';

function Test() {

  const [today, setToday] = useState({});

  const getToday=() => {

    const t = moment();

    return {

      time: t.format('hh:mm:ss a'),

      date: t.format('D/MMM/YYYY'),

    };

  };

  useEffect(()=>{

    const interval= setInterval(() => {

      setToday(getToday);

  }, 1000);

  return ()=>{

    clearInterval(interval)

  }

},[])

  return (

    <Row>

      <Col className='colTop'>{today.date}</Col>

      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>

        <h2>{today.time}</h2>

      </Col>

    </Row>

  );

}

export default Test;

بتاريخ 14 دقائق مضت قال Mustafa Suleiman:

السبب هو أن الدالة useEffect() يتم تنفيذها كل مرة يتم فيها تحديث حالة المكون today، وحيث أن الدالة useEffect() تحدد حالة المكون today ، فإن ذلك يؤدي إلى حلقة لا نهاية لها من التحديثات.

عليك القيام بالتالي:

• إضافة حالة المكون today إلى مصفوفة الاعتماديات dependencies الخاصة بالدالة useEffect() من أجل منع تنفيذ الدالة useEffect() كلما تم تحديث حالة المكون today.
• استخدام الدالة useMemo() لتخزين نتيجة الدالة moment() لإعادة حساب نتيجة الدالة moment() فقط عند تغير قيمة مدخلاتها.

import React, { useEffect, useState, useMemo, useCallback } from 'react';
import {Col, Row} from 'react-bootstrap'
import moment from 'moment';

function Test() {
  const [today, setToday]= useState({});

  const getToday = useMemo(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    setToday(getToday());
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{getToday().date}</Col>
      <Col className='colTop' style={{fontSize:'1.6rem',textAlign: "center"}}><h2>{getToday().time}</h2></Col>
    </Row>
  );
}

export default Test;

 

ظهر خطا يقول getToday is not a function at Test.js;

يشير إلى السطر الذي داخل <Col>{getToday().time}</Col>

لقد وضعت عداد  في useEffact عن طريق usestate  وهو شغال لكن هناك تحذير من أن render يعاد بكثرة في useEffact : ماهو الحل ؟ ملاحظة مكتبة moment i هي للوقت وأعتقد أنها تتحدث بأجزاء الثانية مما يسبب كثرة render : 

هناك الخطأ مرفق مع ملف js  الذي أعمل عليه , فقط يحتاج مكتبة moment  من اجل اشتغال الوقتTest.zip

:

بتاريخ 2 دقائق مضت قال Adnane Kadri:

رسالة الخطأ تشرح نفسها، أين تحدث المشكلة عندما يكون هنالك متغير حالة يتم تجاوز قيمته في كل render داخل الخطاف useEffect، وفي نفس الوقت يتم إعادة تنفيذ الشيفرة ما داخل الخطاف useEffect كل مرة يتم فيها تغيير قيمته. الأمر الذي يحدث حلقة لا نهائية من التنفيذات.

يمكنك تقييد عملية تحديث الحالة بناءا على الحالة السابقة:

useEffect(() => {
  const t = moment();

  setToday((prevToday) => {
    // تحديث الحالة بناءً على الحالة السابقة
    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  });
}, [moment(), timings]);

أيضا ان كان المتغير timings يتم تغييره هو الآخر بحسب قيمة today فستحتاج ازالته هو الآخر من مصفوفة الاعتماديات:

useEffect(() => {
  const t = moment();

  setToday((prevToday) => {
    // تحديث الحالة بناءً على الحالة السابقة
    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  });
}, [moment()]);

شكرا جزيلا