Блог

Я использую панель мониторинга react-material для просмотра статистики для администратора.

Я хочу показать всех своих пользователей в таблице для просмотра на панели администратора. Я использую Express для получения пользователей из моей базы данных, но когда я запускаю в браузере, я получаю GET http://localhost:3001/api/fetchUsers 404 (Not Found) сообщение об ошибке.

Как я могу отобразить всех своих пользователей на панели мониторинга react-material?

Что я делаю не так?

вот моя структура:

CustomersListResults.js:

 import { useState, useEffect } from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';
import {
  Box,
  Card,
  Table,
  TableCell,
  TableHead,
  TablePagination,
  TableRow,
} from '@material-ui/core';
import Axios from 'axios';

const CustomerListResults = () => {
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(0);
  useEffect(() => {
    Axios.get('http://localhost:3001/api/fetchUsers').then((response) => {
      console.log(response);
    });
  }, []);
  const handleLimitChange = (event) => {
    setLimit(event.target.value);
  };

  const handlePageChange = (event, newPage) => {
    setPage(newPage);
  };

  return (
    <Card>
      <PerfectScrollbar>
        <Box sx={{ minWidth: 1050 }}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>
                  Account
                </TableCell>
                <TableCell>
                  Name
                </TableCell>
                <TableCell>
                  Email
                </TableCell>
                <TableCell>
                  Location
                </TableCell>
                <TableCell>
                  Phone
                </TableCell>
                <TableCell>
                  Registration date
                </TableCell>
                <TableCell>
                  Action
                </TableCell>
              </TableRow>
            </TableHead>
          </Table>
        </Box>
      </PerfectScrollbar>
      <TablePagination
        component="div"
        count={5}
        onPageChange={handlePageChange}
        onRowsPerPageChange={handleLimitChange}
        page={page}
        rowsPerPage={limit}
        rowsPerPageOptions={[5, 10, 25]}
      />
    </Card>
  );
};

export default CustomerListResults;
 

Список клиентов:

 import { Helmet } from 'react-helmet';
import { Box, Container } from '@material-ui/core';
import CustomerListResults from '../components/customer/CustomerListResults';
import CustomerListToolbar from '../components/customer/CustomerListToolbar';

const CustomerList = () => (
  <>
    <Helmet>
      <title>Customers | </title>
    </Helmet>
    <Box
      sx={{
        backgroundColor: 'background.default',
        minHeight: '100%',
        py: 3
      }}
    >
      <Container maxWidth={false}>
        <CustomerListToolbar />
        <Box sx={{ pt: 3 }}>
          <CustomerListResults />
        </Box>
      </Container>
    </Box>
  </>
);

export default CustomerList;
 

Мой Серверный API:

 //API To Get All Users
app.get("api/fetchUsers", (req, res) => {

    db.query("SELECT * FROM users", (req, res) => {
        if (err){
            console.log(err)
        }else{
            console.log(result);
            res.send(result)
        }
      });
});
 

Измените в строке ниже, добавьте / в начало:

 app.get("/api/fetchUsers", (req, res) => {})