Estoy desarrollando una aplicación web usando reactjs nodejs y la base de datos mysql.
Quiero enumerar los datos creados en una tabla que creé en la base de datos en el navegador a través de un enlace (http://localhost:5000/api/v/companies). ¿Qué código debo escribir en una página creada en reactsjs? Aquí está el código en el archivo index.js, el backend de la tabla que creé:
const express = require("express"); const app = express(); const cors = require("cors"); const pe = require('parse-error'); const logger = require('morgan'); const database = require('./mysql'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false, limit: '800mb' })); // CORS app.options("*", cors()); app.use(cors()); database.connect(function(err) { if (err) throw err; console.log("==> MySQL Connected Successfully!"); // The main page app.get('/', function (req, res) { res.json({ version: 'v1', status: true }); }); const stations = require('./routes/stations'); const companies = require('./routes/companies'); app.use('/api/v1', [stations, companies]); }); app.listen(5000, () => { console.log("Server is running on port 5000"); }); process.on('unhandledRejection', error => { console.error('Uncaught Error', pe(error)); });así como otros archivos creados en el backend
const database = require('./../mysql'); /** * List all companies */ const getAllCompanies = async function(req, res, next) { try { database.query('SELECT * FROM infos_stations.Companies', function (err, result, fields) { if (err) throw err; return res.status(200).json(result); }); } catch (err) { return res.status(500).send({ code: 500, status: false, data: "Internal Server Error" }); } }; module.exports = { getAllCompanies, };En la aplicación reactjs, debe instalar cualquier biblioteca para solicitudes HTTP. Axios es una biblioteca de Javascript que se utiliza para realizar solicitudes HTTP desde node.js o XMLHttpRequests desde el navegador que también es compatible con ES6 Promise.
En el backend, debe crear una ruta que acepte la solicitud HTTP de Frontend.
app.post('/getdata', function (req, res) { // database queries etc. //sending response(database result)at frontend. } En reactjs, puede crear una solicitud HTTP al hacer clic en un botón o puede crear una solicitud en renderizaciones de componentes usando el gancho UseEffect .
axios({ method: 'POST', url: 'htttp//localhost/getdata', responseType: 'stream' }) .then(function (response) { // response.data have all data of database. //store response data in any reactjs state. });Use la función de mapa de la matriz de estado en la que almacena una respuesta que contiene todos los registros de la base de datos. Cómo mapear listas ¿Cómo representar una matriz de objetos en React?