front
This commit is contained in:
parent
39067b29fc
commit
94ecf9b53f
31166
front/package-lock.json
generated
Normal file
31166
front/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
front/package.json
Normal file
50
front/package.json
Normal file
@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "pages_react",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.2.3",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.7.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"axios": "^1.1.3",
|
||||
"web-vitals": "^2.1.4",
|
||||
"@fortawesome/fontawesome-free": "^6.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.24",
|
||||
"@types/react-dom": "^18.0.8",
|
||||
"vite": "^3.2.3",
|
||||
"@vitejs/plugin-react": "^2.2.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"json-server": "^0.17.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
14
front/public/index.html
Normal file
14
front/public/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<title>НАЗВАНИЕ</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
35
front/src/App.js
Normal file
35
front/src/App.js
Normal file
@ -0,0 +1,35 @@
|
||||
import Main from './components/Main.jsx';
|
||||
import React from "react";
|
||||
import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom';
|
||||
|
||||
function Router(props) {
|
||||
return useRoutes(props.rootRoute);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const routes = [
|
||||
{ index: true, element: <Main /> },
|
||||
{ path: '/', element: <Main />, label: 'ГЛАВНОЕ' },
|
||||
];
|
||||
const links = routes.filter(route => route.hasOwnProperty('label'));
|
||||
const rootRoute = [
|
||||
{ path: '/', element: render(links), children: routes }
|
||||
];
|
||||
function render(links) {
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="w-100">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Router rootRoute={ rootRoute } />
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
84
front/src/components/Main.jsx
Normal file
84
front/src/components/Main.jsx
Normal file
@ -0,0 +1,84 @@
|
||||
import { Button } from "bootstrap";
|
||||
import { useState, useEffect } from 'react';
|
||||
import DataService from '../services/DataService';
|
||||
|
||||
export default function Main(props) {
|
||||
function getRandomNumber() {
|
||||
fetch(
|
||||
'http://localhost:8080/getRandomNumber',
|
||||
{
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
).then(resp => resp.text()).then(alert);
|
||||
}
|
||||
function req_calc() {
|
||||
console.log(num1);
|
||||
fetch(
|
||||
`http://localhost:8080/sum?val1=${num1}&val2=${num2}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
).then(resp => resp.text()).then(alert);
|
||||
}
|
||||
const [num1, setnum1] = useState('');
|
||||
const [num2, setnum2] = useState('');
|
||||
function valueChanged1(event) {
|
||||
setnum1(event.target.value);
|
||||
}
|
||||
function valueChanged2(event) {
|
||||
setnum2(event.target.value);
|
||||
}
|
||||
function req_length() {
|
||||
console.log(num1);
|
||||
fetch(
|
||||
`http://localhost:8080/length?name=${name}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
).then(resp => resp.text()).then(alert);
|
||||
}
|
||||
const [name, setName] = useState('');
|
||||
function valueChangedName(event) {
|
||||
setName(event.target.value);
|
||||
}
|
||||
function req_upperCase() {
|
||||
console.log(num1);
|
||||
fetch(
|
||||
`http://localhost:8080/upperCase?word=${word}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
).then(resp => resp.text()).then(alert);
|
||||
}
|
||||
const [word, setWord] = useState('');
|
||||
function valueChangedWord(event) {
|
||||
setWord(event.target.value);
|
||||
}
|
||||
return <div>
|
||||
<h1>Сайт...</h1>
|
||||
<div className="row">
|
||||
<h1>Рандомное число</h1>
|
||||
<button className="btn primary" onClick={getRandomNumber}>Get Random Number</button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<h1>Калькулятор</h1>
|
||||
<input type="text" onChange={valueChanged1}></input>
|
||||
<input type="text" onChange={valueChanged2}></input>
|
||||
<button onClick={req_calc}>Press</button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<h1>Посчитать длину строки</h1>
|
||||
<input type="text" onChange={valueChangedName}></input>
|
||||
<button onClick={req_length}>Press</button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<h1>Перевести слово в верхний регистр</h1>
|
||||
<input type="text" onChange={valueChangedWord}></input>
|
||||
<button onClick={req_upperCase}>Press</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
8
front/src/index.js
Normal file
8
front/src/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<App />
|
||||
);
|
||||
42
front/src/services/DataService.js
Normal file
42
front/src/services/DataService.js
Normal file
@ -0,0 +1,42 @@
|
||||
import axios from 'axios';
|
||||
|
||||
function toJSON(data) {
|
||||
const jsonObj = {};
|
||||
const fields = Object.getOwnPropertyNames(data);
|
||||
for (const field of fields) {
|
||||
if (data[field] === undefined) {
|
||||
continue;
|
||||
}
|
||||
jsonObj[field] = data[field];
|
||||
}
|
||||
return jsonObj;
|
||||
}
|
||||
|
||||
export default class DataService {
|
||||
static dataUrlPrefix = 'http://localhost:8080';
|
||||
|
||||
static async readAll(url, transformer) {
|
||||
const response = await axios.get(this.dataUrlPrefix + url);
|
||||
return response.data.map(item => transformer(item));
|
||||
}
|
||||
|
||||
static async read(url, transformer) {
|
||||
const response = await axios.get(this.dataUrlPrefix + url);
|
||||
return transformer(response.data);
|
||||
}
|
||||
|
||||
static async create(url, data) {
|
||||
const response = await axios.post(this.dataUrlPrefix + url, toJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
static async update(url, data) {
|
||||
const response = await axios.put(this.dataUrlPrefix + url, toJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
static async delete(url) {
|
||||
const response = await axios.delete(this.dataUrlPrefix + url);
|
||||
return response.data.id;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user