Lab1
This commit is contained in:
parent
a6d16481da
commit
f0fec374ff
60
Front/index.html
Normal file
60
Front/index.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Лабораторная 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-sm p-3">
|
||||
<form id="calc">
|
||||
<h2 class="text-center mb-3">Произведение</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="number" class="form-control" placeholder="V1" aria-label="First Number" name="v1" autocomplete="off">
|
||||
<span class="input-group-text">*</span>
|
||||
<input type="number" class="form-control" placeholder="V2" aria-label="Second Number" name="v2" autocomplete="off">
|
||||
<span class="input-group-text" id="calc_result">0</span>
|
||||
<button type="submit" class="btn btn-primary">Подтвердить</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="toUpperCase">
|
||||
<h2 class="text-center mb-3">Поднять регистр</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="text" class="form-control" placeholder="String" aria-label="Your String" name="value" autocomplete="off">
|
||||
<span class="input-group-text" id="tuc_result"></span>
|
||||
<button type="submit" class="btn btn-primary">Подтвердить</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="split">
|
||||
<h2 class="text-center mb-3">Разделить строку</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="text" class="form-control" placeholder="String" aria-label="Your String" name="value" autocomplete="off">
|
||||
<input type="text" class="form-control" placeholder="Separator" aria-label="Your String" name="sep" autocomplete="off">
|
||||
<button type="submit" class="btn btn-primary">Подтвердить</button>
|
||||
</div>
|
||||
<span class="input-group-text" id="ss_result"></span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="toHex">
|
||||
<h2 class="text-center mb-3">16-ая система</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="number" class="form-control" placeholder="Number" aria-label="Your Number" name="value" autocomplete="off">
|
||||
<span class="input-group-text" id="nth_result"></span>
|
||||
<button type="submit" class="btn btn-primary">Подтвердить</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<script type="module" src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
71
Front/main.js
Normal file
71
Front/main.js
Normal file
@ -0,0 +1,71 @@
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import serverRequest from "./serverRequsest.js";
|
||||
|
||||
const $forms = document.querySelectorAll("form");
|
||||
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
|
||||
switch (form.id) {
|
||||
case "calc" : {
|
||||
calc(form)
|
||||
break;
|
||||
}
|
||||
case "toUpperCase" : {
|
||||
tuc(form)
|
||||
break;
|
||||
}
|
||||
case "split" : {
|
||||
split(form)
|
||||
break;
|
||||
}
|
||||
case "toHex" : {
|
||||
nth(form)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const calc = (form) => {
|
||||
const v1 = form.v1.value;
|
||||
const v2 = form.v2.value;
|
||||
|
||||
serverRequest.calc(v1, v2).then(data => {
|
||||
const $res = document.getElementById("calc_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
const tuc = (form) => {
|
||||
const value = form.value.value;
|
||||
|
||||
serverRequest.toUpperCase(value).then(data => {
|
||||
const $res = document.getElementById("tuc_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
const split = (form) => {
|
||||
const value = form.value.value;
|
||||
const sep = form.sep.value;
|
||||
|
||||
serverRequest.split(value, sep).then(data => {
|
||||
const $res = document.getElementById("ss_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
const nth = (form) => {
|
||||
const value = form.value.value;
|
||||
|
||||
serverRequest.toHex(value).then(data => {
|
||||
const $res = document.getElementById("nth_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
$forms.forEach(item => {
|
||||
item.onsubmit = onSubmit;
|
||||
})
|
||||
|
||||
1115
Front/package-lock.json
generated
Normal file
1115
Front/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
Front/package.json
Normal file
19
Front/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "interface_project",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "./node_modules/.bin/vite",
|
||||
"build": "./node_modules/.bin/vite build",
|
||||
"preview": "./node_modules/.bin/vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ajax": "^0.0.4",
|
||||
"axios": "^1.3.2",
|
||||
"bootstrap": "^5.2.3"
|
||||
}
|
||||
}
|
||||
27
Front/serverRequsest.js
Normal file
27
Front/serverRequsest.js
Normal file
@ -0,0 +1,27 @@
|
||||
import axios from "axios";
|
||||
|
||||
export default class serverRequest {
|
||||
static #url = "http://localhost:8080/";
|
||||
|
||||
static async calc(v1 = 0, v2 = 0) {
|
||||
const { data } = await axios.get(this.#url + `calc?v1=${v1}&v2=${v2}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
static async toUpperCase(str = "") {
|
||||
const { data } = await axios.get(this.#url + `toUpperCase?value=${str}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
static async split(str= "", sep = "") {
|
||||
if (sep === " ") return;
|
||||
const { data } = await axios.get(this.#url + `split?value=${str}&sep=${sep}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
static async toHex(number = 0) {
|
||||
const { data } = await axios.get(this.#url + `toHex?number=${number}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user