add frontend

This commit is contained in:
maxnes3 2023-02-19 21:44:05 +04:00
parent 673233ea88
commit 4fb650e3d1
14 changed files with 5424 additions and 1 deletions

View File

@ -17,7 +17,7 @@ public class UserController {
}
@GetMapping("/split")
public String workSprit(HttpServletResponse response, @RequestParam String str1, @RequestParam String str2){
public String workSplit(HttpServletResponse response, @RequestParam String str1, @RequestParam String str2){
response.addHeader("Access-Control-Allow-Origin", "*");
String[] array = str1.split(str2);
return String.format("Result = %s", String.join(" ", array));

View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

View File

@ -0,0 +1,7 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

View File

@ -0,0 +1,19 @@
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}

View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<title>String Compiler</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,26 @@
{
"name": "spa-vue",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"fake-server": "json-server --watch data.json -p 8079",
"start": "npm-run-all --parallel dev fake-server",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.41",
"vue-router": "^4.1.6",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"@fortawesome/fontawesome-free": "^6.2.1"
},
"devDependencies": {
"vite": "^3.2.3",
"@vitejs/plugin-vue": "^3.2.0",
"npm-run-all": "^4.1.5",
"json-server": "^0.17.1"
}
}

View File

@ -0,0 +1,9 @@
<script setup>
</script>
<template>
<router-view>
</router-view>
</template>

View File

@ -0,0 +1,17 @@
<template>
<footer class="container pt-4 my-md-5 pt-md-5 text-center fixed-bottom border-top">
<div class="row">
<div class="col-12 col-md">
<h5 class=""><strong>End</strong></h5>
</div>
</div>
</footer>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,11 @@
<template>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand" href="#">
<strong>{ S } Strings Compiler</strong>
</a>
</div>
</nav>
</header>
</template>

View File

@ -0,0 +1,7 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/router.js"
const app = createApp(App)
app.use(router).mount("#app");

View File

@ -0,0 +1,56 @@
<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default{
components:{
Header,
Footer
},
data(){
return {
action: "",
str_1: "",
str_2: "",
result: ""
}
},
methods:{
GetRepuest(){
console.log("http://localhost:8080/" + this.action + "?" + this.str_1 + "&" + this.str_2)
fetch("http://localhost:8080/" + this.action + "?" + this.str_1 + "&" + this.str_2)
.then(res => res.text())
.then(res => {
this.result = res;
})
}
}
}
</script>
<template>
<Header></Header>
<main class="container" style="margin-top: 50pt;">
<div class="input-group mb-2 my-5">
<span class="input-group-text bg-primary text-white" id="basic-addon1"><strong>Действие</strong></span>
<input type="text" class="form-control" placeholder="Выберите действие" v-model="action">
</div>
<div class="input-group mb-2">
<span class="input-group-text bg-primary text-white" id="basic-addon1"><strong>Строка#01</strong></span>
<input type="text" class="form-control" placeholder="Введите превую строку" v-model="str_1">
</div>
<div class="input-group mb-2">
<span class="input-group-text bg-primary text-white" id="basic-addon1"><strong>Строка#02</strong></span>
<input type="text" class="form-control" placeholder="Введите вторую строку" v-model="str_2">
</div>
<div class="input-group mb-2">
<span class="input-group-text bg-success text-white" id="basic-addon1"><strong>Вывод:</strong></span>
<input type="text" class="form-control" placeholder="Выводит рузультат здесь" v-model="result">
</div>
<button type="submit" class="btn btn-success" @click.prevent="GetRepuest"><strong>GET</strong></button>
</main>
<Footer></Footer>
</template>
<style scoped>
</style>

View File

@ -0,0 +1,14 @@
import {createRouter, createWebHistory} from "vue-router"
import Index from '../pages/Index.vue'
const routes = [
{path: '/', component: Index},
]
const router = createRouter({
history: createWebHistory(),
linkActiveClass: 'active',
routes
})
export default router;

View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})