جلب المعلومات من قاعدة البيانات في react js

Belkacem Rezzouk · 20 مايو 2022

السلام عليكم
مشكلتي تكمن في عدم قدرتي على استعمال البيانات المجلوبة من قاعدة البيانات في منحنى chart js
استطيع جلبها و اضهارها في الواجهة ولكن لم استطع في chart js
1.png و 2.png و 3.png يعملون بدون مشكل ولكن بدون قاعدة بيانات
4.png الطريقة التي اود استعمالها مع العلم انني اعرف كيف استعمل Axios.get
الخلاصة : كيف امزج بين
employeeList.map((val, key) => {...
و
<Chart data={ userData }
حيث

const userData = [ { name: "Feb", "Active User": 3000, },

شكرا مسبقا

Hassan Hedr · 20 مايو 2022

يرجى استبدال الصور بالشيفرة بشكل نصي ضمن نص السؤال وتنسيقها بتنسيق Code لتحصل على الإجابة ونتمكن من المساعدة

Belkacem Rezzouk · 20 مايو 2022

بتاريخ 1 ساعة قال Hassan Hedr:

يرجى استبدال الصور بالشيفرة بشكل نصي ضمن نص السؤال وتنسيقها بتنسيق Code لتحصل على الإجابة ونتمكن من المساعدة

حسنا تفضل
الرسم البياني chart متواجد في home.jsx
بياناته userdata متواجدة في dummydata.js

انا اود ان البيانات userdata اتي بها من قاعدة البيانات وليس من dummydata.js
لدا استعملت map()
لكن لم تعمل معي كوني لم اعرف

Home.jsx

dummyData.js

index.js

Hassan Hedr · 20 مايو 2022

بتاريخ 9 ساعات قال Nassim Kq:

حسنا تفضل
الرسم البياني chart متواجد في home.jsx
بياناته userdata متواجدة في dummydata.js

انا اود ان البيانات userdata اتي بها من قاعدة البيانات وليس من dummydata.js
لدا استعملت map()
لكن لم تعمل معي كوني لم اعرف

<Chart data={ {employeeList.map((val, key) => { }/>

Home.jsx

dummyData.js

index.js

يرجى استخراج محتويات الملفات وتحرير نص السؤال وإدراجها ضمنه بدلًا من الصور، أيضًا يفضل التأكد أن البيانات يتم جلبها من الخادم بشكل سليم، وإرفاق شكل تلك البيانات الواردة من الخادم

Belkacem Rezzouk · 20 مايو 2022

بتاريخ 9 ساعات قال Hassan Hedr:

يرجى استخراج محتويات الملفات وتحرير نص السؤال وإدراجها ضمنه بدلًا من الصور، أيضًا يفضل التأكد أن البيانات يتم جلبها من الخادم بشكل سليم، وإرفاق شكل تلك البيانات الواردة من الخادم

اخي تريد مني ان اكتب لك الكود الخاص بسؤالي بدلا من ملف js ؟
اما البيانات فانى اتي بها بشكل سليم
لم اعرف استعمالها في المنحنى chart فقط

Hassan Hedr · 20 مايو 2022

بتاريخ 12 دقائق مضت قال Nassim Kq:

اخي تريد مني ان اكتب لك الكود الخاص بسؤالي بدلا من ملف js ؟

نعم عند طرح سؤالك ضمن قسم الأسئلة العامة في الأكاديمية يفضل دومًا إرفاق الشيفرة بشكل نصي بدلًا من الصور أو إرفاق الملفات، وذلك حتى تحصل على إجابة مناسبة

بتاريخ 13 دقائق مضت قال Nassim Kq:

اما البيانات فانى اتي بها بشكل سليم لم اعرف استعمالها في المنحنى chart فقط

من الضروري إرفاق شكل البيانات التي تجلبها (حتى لو كانت بيانات وهمية) لأن طريقة معالجتها وتمريرها إلى المخطط chart يعتمد على شكلها، لذا يرجى إرفاق مثال عن البيانات التي تأتي من الخادم كمثال كي تتوضح المشكلة وتحصل على الحل المناسب لك

Belkacem Rezzouk · 20 مايو 2022

بتاريخ 41 دقائق مضت قال Hassan Hedr:

نعم عند طرح سؤالك ضمن قسم الأسئلة العامة في الأكاديمية يفضل دومًا إرفاق الشيفرة بشكل نصي بدلًا من الصور أو إرفاق الملفات، وذلك حتى تحصل على إجابة مناسبة

من الضروري إرفاق شكل البيانات التي تجلبها (حتى لو كانت بيانات وهمية) لأن طريقة معالجتها وتمريرها إلى المخطط chart يعتمد على شكلها، لذا يرجى إرفاق مثال عن البيانات التي تأتي من الخادم كمثال كي تتوضح المشكلة وتحصل على الحل المناسب لك

اولا home.jsx التي فيها الرسم chart

import Chart from "../../components/chart/Chart";

import FeaturedInfo from "../../components/featuredInfo/FeaturedInfo";

import "./home.css";

import { userData } from "../../dummyData";

import WidgetSm from "../../components/widgetSm/WidgetSm";

import WidgetLg from "../../components/widgetLg/WidgetLg";




export default function Home() {



  return (

    <div className="home">

         

      <FeaturedInfo />

      <Chart data={ userData } title="User Analytics" grid dataKey="Active User"/>



      <div className="homeWidgets">

        <WidgetSm/>

        <WidgetLg/>

      </div>

    </div>

  );

}

ثانيا dummydata.js التي تحتوي على البيانات الخاصة ب الرسم chart

export const userData = [


 {

      name: "Feb",

      "Active User": 3000,

    },

    {

      name: "Mar",

      "Active User": 5000,

    },

    {

      name: "Apr",

      "Active User": 4000,

    },

    {

      name: "May",

      "Active User": 3000,

    },

    {

      name: "Jun",

      "Active User": 2000,

    },

    {

      name: "Jul",

      "Active User": 4000,

    },

    {

      name: "Agu",

      "Active User": 3000,

    },

    {

      name: "Sep",

      "Active User": 4000,

    },

    {

      name: "Oct",

      "Active User": 1000,

    },

    {

      name: "Nov",

      "Active User": 4000,

    },

    {

      name: "Dec",

      "Active User": 3000,

    },

  ];



  export const productData = [

    {

      name: "Jan",

      "Sales": 4000,

    },

    {

      name: "Feb",

      "Sales": 3000,

    },

    {

      name: "Mar",

      "Sales": 5000,

    },

  ];

ثالثا index.js فيها كود السارفر

const express = require("express");

const app = express();

const mysql = require("mysql");

const cors = require("cors");




app.use(cors());

app.use(express.json());



const db = mysql.createConnection({

  user: "root",

  host: "localhost",

  password: "password",

  database: "tp",

});



app.post("/create", (req, res) => {

  const Username = req.body.username;

  const Fullname = req.body.fullname;

  const Date = req.body.date;

  const Email = req.body.email;

  //const Password = req.body.Password;

  const Phone = req.body.phone;

  const Address = req.body.address;






  db.query(

    "INSERT INTO tp.users (Username , Fullname, Date, Email, Phone, Address) VALUES (?,?,?,?,?,?)",

    [Username, Fullname, Date, Email,  Phone, Address],

    (err, result) => {

      if (err) {

        console.log(err);

      } else {

        res.send("Values Inserted");

      }

    }

  );

});




app.post("/newuser", (req, res) => {

  const Username = req.body.username;

  const Fullname = req.body.fullname;

   const Date = req.body.date;

   const Email = req.body.email;

   const Password = req.body.password;

   const Phone = req.body.phone;

   const Address = req.body.address;



   db.query(

    "INSERT INTO tp.newu (Username , Fullname, Date, Email, Password, Phone, Address) VALUES (?,?,?,?,?,?,?)",

    [Username, Fullname, Date, Email, Password, Phone, Address],

    (err, result) => {

      if (err) {

        console.log(err);

      } else {

        res.send("Values Inserted");

      }

    }

  );

});  



app.get("/users", (req, res) => {

  db.query("SELECT * FROM tp.users", (err, result) => {

    if (err) {

      console.log(err);

    } else {

      res.send(result);

    }

  });

});



app.listen(3001, () => {

  console.log("yoo");

});

الان المطلوب هو مكان userdata المتواجدة في home.jsx تحديدا في <Chart data={ userData } title="User Analytics" grid dataKey="Active User"/>
استبدلها ب
ملاحظة : فيما يلي الطريقة وليس كود الخاص بي يعني اعرف تغير المتغيرات بالتي تخصني فقط اود الطريقة

const [employeeList, setEmployeeList] = useState([]);


const getEmployees = () => {

Axios.get("http://localhost:3001/employees").then((response) => {

setEmployeeList(response.data);

});

};

{employeeList.map((val, key) => {

return (

<div className="employee">

<div>

<h3>Name: {val.name}</h3>

<h3>Age: {val.age}</h3>


</div>

);

})}

مع استعمال button طبعا

امل انك فهمتني اخي
نا اود ان البيانات userdata اتي بها من قاعدة البيانات وليس من dummydata.js
لدا استعملت map()
لكن لم تعمل معي كوني لم اعرف

تم التعديل في 20 مايو 2022 بواسطة Hassan Hedr
تنسيق الشيفرة

Hassan Hedr · 20 مايو 2022

بتاريخ 18 دقائق مضت قال Nassim Kq:

لكن لم تعمل معي كوني لم اعرف

شكرًا لك على إرفاق الشيفرة، ما هو شكل البيانات الذي يأتي من المسار employees في التابع التالي:

const getEmployees = () => {
  Axios.get("http://localhost:3001/employees").then((response) => {
    setEmployeeList(response.data); // data شكل البيانات 
  });
};

هل يمكنك إرفاق مثال عنها كما ذكرت لك شكل تلك البيانات مهم لحل المشكلة هل تحوي فقط على name و age، من غير الواضح في شيفرة الخادم ما هو شكل تلك البيانات

Belkacem Rezzouk · 20 مايو 2022

بتاريخ 22 دقائق مضت قال Hassan Hedr:
شكرًا لك على إرفاق الشيفرة، ما هو شكل البيانات الذي يأتي من المسار employees في التابع التالي:
const getEmployees = () => {
  Axios.get("http://localhost:3001/employees").then((response) => {
    setEmployeeList(response.data); // data شكل البيانات 
  });
};
هل يمكنك إرفاق مثال عنها كما ذكرت لك شكل تلك البيانات مهم لحل المشكلة هل تحوي فقط على name و age، من غير الواضح في شيفرة الخادم ما هو شكل تلك البيانات

حسنا اخي تفضل مثال
client.js و server.js :

client.js

import "./App.css";

import { useState } from "react";

import Axios from "axios";

function App() {

const [name, setName] = useState("");

const [age, setAge] = useState(0);

const [country, setCountry] = useState("");

const [position, setPosition] = useState("");

const [wage, setWage] = useState(0);

const [newWage, setNewWage] = useState(0);

const [employeeList, setEmployeeList] = useState([]);

const addEmployee = () => {

Axios.post("http://localhost:3001/create", {

name: name,

age: age,

country: country,

position: position,

wage: wage,

}).then(() => {

setEmployeeList([

...employeeList,

{

name: name,

age: age,

country: country,

position: position,

wage: wage,

},

]);

});

};

const getEmployees = () => {

Axios.get("http://localhost:3001/employees").then((response) => {

setEmployeeList(response.data);

});

};

const updateEmployeeWage = (id) => {

Axios.put("http://localhost:3001/update", { wage: newWage, id: id }).then(

(response) => {

setEmployeeList(

employeeList.map((val) => {

return val.id == id

? {

id: val.id,

name: val.name,

country: val.country,

age: val.age,

position: val.position,

wage: newWage,

}

: val;

})

);

}

);

};

const deleteEmployee = (id) => {

Axios.delete(`http://localhost:3001/delete/${id}`).then((response) => {

setEmployeeList(

employeeList.filter((val) => {

return val.id != id;

})

);

});

};

return (

<div className="App">

<div className="information">

<label>Name:</label>

<input

type="text"

onChange={(event) => {

setName(event.target.value);

}}

/>

<label>Age:</label>

<input

type="number"

onChange={(event) => {

setAge(event.target.value);

}}

/>

<label>Country:</label>

<input

type="text"

onChange={(event) => {

setCountry(event.target.value);

}}

/>

<label>Position:</label>

<input

type="text"

onChange={(event) => {

setPosition(event.target.value);

}}

/>

<label>Wage (year):</label>

<input

type="number"

onChange={(event) => {

setWage(event.target.value);

}}

/>

<button onClick={addEmployee}>Add Employee</button>

</div>

<div className="employees">

<button onClick={getEmployees}>Show Employees</button>

{employeeList.map((val, key) => {

return (

<div className="employee">

<div>

<h3>Name: {val.name}</h3>

<h3>Age: {val.age}</h3>

<h3>Country: {val.country}</h3>

<h3>Position: {val.position}</h3>

<h3>Wage: {val.wage}</h3>

</div>

<div>

<input

type="text"

placeholder="2000..."

onChange={(event) => {

setNewWage(event.target.value);

}}

/>

<button

onClick={() => {

updateEmployeeWage(val.id);

}}

>

{" "}

Update

</button>

<button

onClick={() => {

deleteEmployee(val.id);

}}

>

Delete

</button>

</div>

</div>

);

})}

</div>

</div>

);

}

export default App;

..............................................................................................................................................................
server.js

const express = require("express");

const app = express();

const mysql = require("mysql");

const cors = require("cors");

app.use(cors());

app.use(express.json());

const db = mysql.createConnection({

user: "root",

host: "localhost",

password: "password",

database: "employeeSystem",

});

app.post("/create", (req, res) => {

const name = req.body.name;

const age = req.body.age;

const country = req.body.country;

const position = req.body.position;

const wage = req.body.wage;

db.query(

"INSERT INTO employees (name, age, country, position, wage) VALUES (?,?,?,?,?)",

[name, age, country, position, wage],

(err, result) => {

if (err) {

console.log(err);

} else {

res.send("Values Inserted");

}

}

);

});

app.get("/employees", (req, res) => {

db.query("SELECT * FROM employees", (err, result) => {

if (err) {

console.log(err);

} else {

res.send(result);

}

});

});

app.put("/update", (req, res) => {

const id = req.body.id;

const wage = req.body.wage;

db.query(

"UPDATE employees SET wage = ? WHERE id = ?",

[wage, id],

(err, result) => {

if (err) {

console.log(err);

} else {

res.send(result);

}

}

);

});

app.delete("/delete/:id", (req, res) => {

const id = req.params.id;

db.query("DELETE FROM employees WHERE id = ?", id, (err, result) => {

if (err) {

console.log(err);

} else {

res.send(result);

}

});

});

app.listen(3001, () => {

console.log("Yey, your server is running on port 3001");

});

تم التعديل في 20 مايو 2022 بواسطة Hassan Hedr
تنسيق الشيفرة

Hassan Hedr · 20 مايو 2022

بتاريخ 16 دقائق مضت قال Nassim Kq:

حسنا اخي تفضل مثال
client.js و server.js :

client.js


import "./App.css";

import { useState } from "react";

import Axios from "axios";

function App() {

const [name, setName] = useState("");

const [age, setAge] = useState(0);

const [country, setCountry] = useState("");

const [position, setPosition] = useState("");

const [wage, setWage] = useState(0);

const [newWage, setNewWage] = useState(0);

const [employeeList, setEmployeeList] = useState([]);

const addEmployee = () => {

Axios.post("http://localhost:3001/create", {

name: name,

age: age,

country: country,

position: position,

wage: wage,

}).then(() => {

setEmployeeList([

...employeeList,

{

name: name,

age: age,

country: country,

position: position,

wage: wage,

},

]);

});

};

const getEmployees = () => {

Axios.get("http://localhost:3001/employees").then((response) => {

setEmployeeList(response.data);

});

};

const updateEmployeeWage = (id) => {

Axios.put("http://localhost:3001/update", { wage: newWage, id: id }).then(

(response) => {

setEmployeeList(

employeeList.map((val) => {

return val.id == id

? {

id: val.id,

name: val.name,

country: val.country,

age: val.age,

position: val.position,

wage: newWage,

}

: val;

})

);

}

);

};

const deleteEmployee = (id) => {

Axios.delete(`http://localhost:3001/delete/${id}`).then((response) => {

setEmployeeList(

employeeList.filter((val) => {

return val.id != id;

})

);

});

};

return (

<div className="App">

<div className="information">

<label>Name:</label>

<input

type="text"

onChange={(event) => {

setName(event.target.value);

}}

/>

<label>Age:</label>

<input

type="number"

onChange={(event) => {

setAge(event.target.value);

}}

/>

<label>Country:</label>

<input

type="text"

onChange={(event) => {

setCountry(event.target.value);

}}

/>

<label>Position:</label>

<input

type="text"

onChange={(event) => {

setPosition(event.target.value);

}}

/>

<label>Wage (year):</label>

<input

type="number"

onChange={(event) => {

setWage(event.target.value);

}}

/>

<button onClick={addEmployee}>Add Employee</button>

</div>

<div className="employees">

<button onClick={getEmployees}>Show Employees</button>

{employeeList.map((val, key) => {

return (

<div className="employee">

<div>

<h3>Name: {val.name}</h3>

<h3>Age: {val.age}</h3>

<h3>Country: {val.country}</h3>

<h3>Position: {val.position}</h3>

<h3>Wage: {val.wage}</h3>

</div>

<div>

<input

type="text"

placeholder="2000..."

onChange={(event) => {

setNewWage(event.target.value);

}}

/>

<button

onClick={() => {

updateEmployeeWage(val.id);

}}

>

{" "}

Update

</button>

<button

onClick={() => {

deleteEmployee(val.id);

}}

>

Delete

</button>

</div>

</div>

);

})}

</div>

</div>

);

}

export default App;

..............................................................................................................................................................
server.js


const express = require("express");

const app = express();

const mysql = require("mysql");

const cors = require("cors");

app.use(cors());

app.use(express.json());

const db = mysql.createConnection({

user: "root",

host: "localhost",

password: "password",

database: "employeeSystem",

});

app.post("/create", (req, res) => {

const name = req.body.name;

const age = req.body.age;

const country = req.body.country;

const position = req.body.position;

const wage = req.body.wage;

db.query(

"INSERT INTO employees (name, age, country, position, wage) VALUES (?,?,?,?,?)",

[name, age, country, position, wage],

(err, result) => {

if (err) {

console.log(err);

} else {

res.send("Values Inserted");

}

}

);

});

app.get("/employees", (req, res) => {

db.query("SELECT * FROM employees", (err, result) => {

if (err) {

console.log(err);

} else {

res.send(result);

}

});

});

app.put("/update", (req, res) => {

const id = req.body.id;

const wage = req.body.wage;

db.query(

"UPDATE employees SET wage = ? WHERE id = ?",

[wage, id],

(err, result) => {

if (err) {

console.log(err);

} else {

res.send(result);

}

}

);

});

app.delete("/delete/:id", (req, res) => {

const id = req.params.id;

db.query("DELETE FROM employees WHERE id = ?", id, (err, result) => {

if (err) {

console.log(err);

} else {

res.send(result);

}

});

});

app.listen(3001, () => {

console.log("Yey, your server is running on port 3001");

});

بنفس الطريقة بعد جلب البيانات من الخادم يمكنك معالجتها وتمريرها للمكون Chart باستخدام map، مثلًا إذا أردت رسم مخطط يوضح اسم كل موظف مع قيمة راتبه يمكنك تطبيق ذلك كالتالي:

const employeeData = employeeList.map(employee => ({name: employee.name, wage: employee.name});
                                      
//..
                                      
<Chart data={ employeeData } title="رواتب الموظفين" grid dataKey="wage"/>

هنا عدلنا شكل البيانات القادمة لتصبح من الشكل التالي:

[
 { name: '...', wage: ... },
 ...
]

ومررناها إلى Chart مع تعيين المفتاح إلى القيمة wage من خلال الخاصية dataKey

جلب المعلومات من قاعدة البيانات في react js

السؤال

Belkacem Rezzouk

9 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

Belkacem Rezzouk

Hassan Hedr

Belkacem Rezzouk

Hassan Hedr

Belkacem Rezzouk

Hassan Hedr

Belkacem Rezzouk

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية