Вступление
В этой статье мы узнаем, как использовать таблицу Material-UI в приложениях React. Material UI — одна из самых популярных платформ пользовательского интерфейса, разработанная Google. Библиотека пользовательского интерфейса для материалов разработана для более быстрой, простой и удобной разработки пользовательского интерфейса. Теперь Material-UI поддерживается во всех основных браузерах и платформах.
Предпосылки
- Мы должны иметь базовые знания о React.js и веб-API.
- Visual Studio и Visual Studio Code IDE должны быть установлены в вашей системе.
- SQL Server Management Studio
- Базовые знания о React Strap и HTML
Шаги реализации
- Создать базу данных и таблицу
- Создать Asp.net Web API Project
- Создать приложение React
- Установить Material-UI
- Установить Axios
Вам также может понравиться: Как изучить React.js, Часть 1: Дорожная карта React для современных веб-разработчиков.
Создать таблицу в базе данных
Откройте SQL Server Management Studio, создайте базу данных с именем «Сотрудник» и в этой базе данных создайте таблицу. Дайте этой таблице имя типа «Сотрудник».
Джава
1
CREATE TABLE [dbo].[Employee](
2
[Id] [int] IDENTITY(1,1) NOT NULL,
3
[Name] [varchar](50) NULL,
4
[Age] [int] NULL,
5
[Address] [varchar](50) NULL,
6
[City] [varchar](50) NULL,
7
[ContactNum] [varchar](50) NULL,
8
[Salary] [decimal](18, 0) NULL,
9
[Department] [varchar](50) NULL,
10
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
11
(
12
[Id] ASC
13
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
14
) ON [PRIMARY]
15
GO
Теперь добавьте демонстрационные данные в эту таблицу.
Создать новый проект веб-API
Откройте Visual Studio и создайте новый проект.
Измените имя на MatUITable.
Выберите шаблон «Веб-API».
Щелкните правой кнопкой мыши папку «Модели» в обозревателе решений и выберите «Добавить» >> «Новый элемент» >> «Данные».
Нажмите кнопку «Модель данных объекта ADO.NET» и нажмите «Добавить».
Выберите EF Designer из базы данных и нажмите кнопку «Далее».
Добавьте свойства соединения, выберите имя базы данных на следующей странице и нажмите OK.
Проверьте флажок «Таблица». Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку «Готово».
Теперь наша модель данных успешно создана.
Щелкните правой кнопкой мыши папку «Контроллеры» и добавьте новый контроллер. Назовите его «Контроллер сотрудника» и добавьте следующее пространство имен в контроллер «Сотрудник».
Джава
xxxxxxxxxx
1
using MatUITable.Models;
Теперь добавьте метод для извлечения данных из базы данных.
Джава
xxxxxxxxxx
1
[HttpGet]
2
[Route("employee")]
3
public object Getrecord()
4
{
5
var emp = DB.Employees.ToList();
6
return emp;
7
}
Полный Код Контролера Сотрудника
Джава
xxxxxxxxxx
1
using System;
2
using System.Collections.Generic;
3
using System.Linq;
4
using System.Net;
5
using System.Net.Http;
6
using System.Web.Http;
7
using MatUITable.Models;
8
namespace MatUITable.Controllers
9
{
10
11
[RoutePrefix("Api/Emp")]
12
public class EmployeeController : ApiController
13
{
14
EmployeeEntities DB = new EmployeeEntities();
15
[HttpGet]
16
[Route("employee")]
17
public object Getrecord()
18
19
{
20
var emp = DB.Employees.ToList();
21
return emp;
22
}
23
}
24
}
Теперь давайте включим CORS . Зайдите в Инструменты, откройте диспетчер пакетов NuGet, найдите CORS и установите пакет «Microsoft.Asp.Net.WebApi.Cors». Откройте Webapiconfig.cs и добавьте следующие строки.
Джава
xxxxxxxxxx
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
2
config.EnableCors(cors);
Создать проект ReactJS
Теперь давайте сначала создадим приложение React с помощью следующей команды.
Джава
xxxxxxxxxx
1
npx create-react-app matform
Откройте только что созданный проект в Visual Studio Code и установите Material-UI.
Установить Material-UI
Теперь установите Material-UI с помощью следующей команды:
Джава
xxxxxxxxxx
1
npm install -ui/core --save
Теперь установите библиотеку Axios с помощью следующей команды. Узнайте больше об Axios здесь.
Джава
xxxxxxxxxx
1
npm install --save axios
Теперь перейдите в папку src и добавьте два новых компонента; в одном компоненте мы будем использовать классы, а в другом мы будем использовать хуки.
- MatTable.js
- MatPaginationTable.js
Теперь откройте компонент MatTable.js и импортируйте необходимую ссылку для таблицы пользовательского интерфейса материала.
JavaScript
xxxxxxxxxx
1
import Table from '@material-ui/core/Table';
2
import TableBody from '@material-ui/core/TableBody';
3
import TableCell from '@material-ui/core/TableCell';
4
import TableContainer from '@material-ui/core/TableContainer';
5
import TableHead from '@material-ui/core/TableHead';
6
import TableRow from '@material-ui/core/TableRow';
7
import Paper from '@material-ui/core/Paper';
Добавьте следующий код в этот компонент.
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import Table from '@material-ui/core/Table';
3
import TableBody from '@material-ui/core/TableBody';
4
import TableCell from '@material-ui/core/TableCell';
5
import TableContainer from '@material-ui/core/TableContainer';
6
import TableHead from '@material-ui/core/TableHead';
7
import TableRow from '@material-ui/core/TableRow';
8
import Paper from '@material-ui/core/Paper';
9
import axios from 'axios';
10
11
export class MatTable extends Component {
12
constructor(props) {
13
super(props)
14
this.state = {
15
ProductData: []
16
17
}
18
}
19
componentDidMount() {
20
axios.get('http://localhost:51760/Api/Emp/employee').then(response => {
21
console.log(response.data);
22
this.setState({
23
ProductData: response.data
24
});
25
});
26
}
27
render() {
28
console.log(this.state.ProductData);
29
return (
30
<TableContainer component={Paper}>
31
<Table stickyHeader aria-label="sticky table">
32
<TableHead>
33
<TableRow>
34
<TableCell>Id</TableCell>
35
<TableCell align="right">Name</TableCell>
36
<TableCell align="right">Age</TableCell>
37
<TableCell align="right">Address</TableCell>
38
<TableCell align="right">City</TableCell>
39
<TableCell align="right">ContactNum</TableCell>
40
<TableCell align="right">Salary</TableCell>
41
<TableCell style={{paddingRight:"60px"}} align="right" >Department</TableCell>
42
</TableRow>
43
</TableHead>
44
<TableBody>
45
{
46
this.state.ProductData.map((p, index) => {
47
return <TableRow key={index}>
48
<TableCell component="th" scope="row">
49
{p.Id}
50
</TableCell>
51
<TableCell align="right">{p.Name}</TableCell>
52
<TableCell align="right">{p.Age}</TableCell>
53
<TableCell align="right">{p.Address}</TableCell>
54
<TableCell align="right">{p.City}</TableCell>
55
<TableCell align="right">{p.ContactNum}</TableCell>
56
<TableCell align="right">{p.Salary}</TableCell>
57
<TableCell style={{paddingRight:"114px"}} align="right">{p.Department}</TableCell>
58
</TableRow>
59
})
60
}
61
</TableBody>
62
</Table>
63
</TableContainer>
64
);
65
}
66
}
67
68
export default MatTable
Теперь запустите проект с помощью команды npm start и проверьте результат.
Теперь откройте MatPaginationTable.js и добавьте следующий код, чтобы показать таблицу с нумерацией страниц.
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import { makeStyles } from '@material-ui/core/styles';
3
import Paper from '@material-ui/core/Paper';
4
import Table from '@material-ui/core/Table';
5
import TableBody from '@material-ui/core/TableBody';
6
import TableCell from '@material-ui/core/TableCell';
7
import TableContainer from '@material-ui/core/TableContainer';
8
import TableHead from '@material-ui/core/TableHead';
9
import TablePagination from '@material-ui/core/TablePagination';
10
import TableRow from '@material-ui/core/TableRow';
11
import axios from 'axios';
12
import { useState, useEffect } from 'react'
13
14
15
const useStyles = makeStyles({
16
root: {
17
width: '100%',
18
},
19
container: {
20
maxHeight: 440,
21
},
22
});
23
24
export default function MatPaginationTable() {
25
const classes = useStyles();
26
const [page, setPage] = React.useState(0);
27
const [data, setData] = useState([]);
28
const [rowsPerPage, setRowsPerPage] = React.useState(5);
29
useEffect(() => {
30
const GetData = async () => {
31
const result = await axios('http://localhost:51760/Api/Emp/employee');
32
setData(result.data);
33
}
34
GetData();
35
console.log(data);
36
}, []);
37
const handleChangePage = (event, newPage) => {
38
setPage(newPage);
39
};
40
41
const handleChangeRowsPerPage = event => {
42
setRowsPerPage(+event.target.value);
43
setPage(0);
44
};
45
46
return (
47
<Paper className={classes.root}>
48
<TableContainer className={classes.container}>
49
<Table stickyHeader aria-label="sticky table">
50
<TableHead>
51
<TableRow>
52
<TableCell>Id</TableCell>
53
<TableCell align="right">Name</TableCell>
54
<TableCell align="right">Age</TableCell>
55
<TableCell align="right">Address</TableCell>
56
<TableCell align="right">City</TableCell>
57
<TableCell align="right">ContactNum</TableCell>
58
<TableCell align="right">Salary</TableCell>
59
<TableCell align="right">Department</TableCell>
60
</TableRow>
61
</TableHead>
62
<TableBody>
63
{data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => {
64
return (
65
<TableRow >
66
<TableCell component="th" scope="row">
67
{row.Id}
68
</TableCell>
69
<TableCell align="right">{row.Name}</TableCell>
70
<TableCell align="right">{row.Age}</TableCell>
71
<TableCell align="right">{row.Address}</TableCell>
72
<TableCell align="right">{row.City}</TableCell>
73
<TableCell align="right">{row.ContactNum}</TableCell>
74
<TableCell align="right">{row.Salary}</TableCell>
75
<TableCell align="right">{row.Department}</TableCell>
76
</TableRow>
77
78
);
79
})}
80
</TableBody>
81
</Table>
82
</TableContainer>
83
<TablePagination
84
rowsPerPageOptions={[5, 10, 15]}
85
component="div"
86
count={data.length}
87
rowsPerPage={rowsPerPage}
88
page={page}
89
onChangePage={handleChangePage}
90
onChangeRowsPerPage={handleChangeRowsPerPage}
91
/>
92
</Paper>
93
);
94
}
Добавьте ссылку на этот компонент в файл app.js.
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import MatTable from './MatTable'
5
import MatPaginationTable from "./MatPaginationTable";
6
7
function App() {
8
return (
9
<div className="App">
10
<MatPaginationTable/>
11
{/* <MatTable/> */}
12
</div>
13
);
14
}
15
16
export default App;
Теперь запустите проект.
Дальнейшее чтение
Устранение ошибки в ReactJS / Material-UI
Топ 5 Google Material Design Framework, которые вы должны изучить