اذهب إلى المحتوى
  • 0

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

Belkacem Rezzouk

بواسطة Belkacem Rezzouk

 مشاركة

السؤال

Belkacem Rezzouk عضو نشيط

Belkacem Rezzouk

نشر
نشر

السلام عليكم
مشكلتي تكمن في عدم قدرتي على استعمال البيانات المجلوبة من قاعدة البيانات في منحنى 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, },

شكرا مسبقا

1.PNG

2.PNG

3.PNG

4.PNG

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

Recommended Posts

  • 0
Hassan Hedr عضو نشيط

Hassan Hedr

نشر
نشر
بتاريخ 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

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Belkacem Rezzouk عضو نشيط

Belkacem Rezzouk

نشر
  • الكاتب
نشر
بتاريخ 1 ساعة قال Hassan Hedr:

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

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

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

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

Home.jsx

dummyData.js

index.js

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Hassan Hedr عضو نشيط

Hassan Hedr

نشر
نشر
بتاريخ 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

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

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Belkacem Rezzouk عضو نشيط

Belkacem Rezzouk

نشر
  • الكاتب
نشر
بتاريخ 9 ساعات قال Hassan Hedr:

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Hassan Hedr عضو نشيط

Hassan Hedr

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

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

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

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

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

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

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Belkacem Rezzouk عضو نشيط

Belkacem Rezzouk

نشر
  • الكاتب
نشر (معدل)
بتاريخ 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() 
لكن لم تعمل معي كوني لم اعرف 

تم التعديل في بواسطة Hassan Hedr
تنسيق الشيفرة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Hassan Hedr عضو نشيط

Hassan Hedr

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

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

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

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

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

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Belkacem Rezzouk عضو نشيط

Belkacem Rezzouk

نشر
  • الكاتب
نشر (معدل)
بتاريخ 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");

});

Capture.PNG

Capture d’écran (31).png

Capture d’écran (32).png

تم التعديل في بواسطة Hassan Hedr
تنسيق الشيفرة
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...