LabWork04: Работа готова (Фронт)

This commit is contained in:
Safgerd 2023-04-18 01:53:36 +04:00
parent 5ec74ef311
commit 2918fee687
12 changed files with 18118 additions and 0 deletions

1
.gitignore vendored
View File

@ -4,6 +4,7 @@ build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/
lab4-vue-front/node_modules
### STS ###
.apt_generated

19
lab4-vue-front/README.md Normal file
View File

@ -0,0 +1,19 @@
# lab4-vue-front
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

17576
lab4-vue-front/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,29 @@
{
"name": "lab4_vue_front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@popperjs/core": "^2.11.7",
"axios": "^1.3.4",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.1.6",
"vuex": "^4.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<title>LabWork04 - Social Network</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div id="app"></div>
</body>
</html>

View File

@ -0,0 +1,48 @@
<template>
<div>
<p class='text-center m-3 h3'>LabWork04 - Social Network</p>
</div>
<div class="nav row">
<div class="nav-left col-4">
<router-link to="/customers" class="text-decoration-none m-3">Профили</router-link>
<router-link to="/posts" class="text-decoration-none m-3">Посты</router-link>
<select class="form-select mt-4" style="font-size: 16px; max-height: 35px; max-width: 180px;" v-model="currentCustomerId">
<option value="-1" selected class="button dark outline" :on-click="updateCurrentCustomer()">Не выбран</option>
<option v-for="customer in customers" v-bind:value="customer['id']" class="button dark outline" :on-click="updateCurrentCustomer()">{{ customer['username'] }}</option>
</select>
</div>
</div>
<router-view></router-view>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
currentCustomerId: -1,
customers: []
}
},
methods: {
async updateCurrentCustomer() {
history.replaceState(this.currentCustomerId, "");
}
},
async beforeMount() {
setInterval(async () => {
const response = await axios.get('http://localhost:8080/customer');
this.customers = [];
response.data.forEach(element => {
this.customers.push(element);
console.log(element);
});
}, 500)
},
}
</script>
<style lang="">
</style>

View File

@ -0,0 +1,154 @@
<template>
<div class="ms-5">
<p class='h4 m-3'>Пользователи</p>
<button type='button' class="btn btn-primary ms-3 mb-3" data-bs-toggle="modal" data-bs-target="#customerCreate">
Добавить нового пользователя
</button>
<p class='h4 ms-3'>Список</p>
<div class="row">
<div class="col-5">
<div v-for="customer in customers" class="row card is-left mb-3">
<div class="row is-left">
<div class="row is-left h3">{{ customer['username'] }}</div>
</div>
<p class="row is-left"></p>
<div class="row" v-if="!(customer['posts'].length == 0)">
<p class="h4">Посты:</p>
<div class="col">
<div v-for="post in customer['posts']" class="row is-left card mb-3">
<div class="row is-left h4">{{ post['title'] }}</div>
<div class="row is-left h5">{{ post['content'] }}</div>
</div>
</div>
</div>
<div class="row is-left" v-if="!(customer['comments'].length == 0)">
<p class="h4">Комментарии:</p>
<div class="col">
<div v-for="comment in customer['comments']" class="row is-left card mb-3">
<div class="row is-left h5">"{{ comment['content'] }}" - к посту '{{ comment['postTitle'] }}' от пользователя {{ comment['postAuthor'] }}</div>
</div>
</div>
</div>
<div class="row" v-if="customer['id'] == currentCustomerId">
<button v-on:click="deleteUser(customer['id'])" class="col button dark outline">Удалить</button>
<button v-on:click="selectedCustomer = customer; usernameModal=customer['username'];passwordModal=customer['password']" class="col button primary outline" data-bs-toggle="modal" data-bs-target="#customerEdit">Редактировать</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="customerCreate" tabindex="-1" role="dialog" aria-labelledby="customerCreateLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="customerCreateLabel">Создать пользователя</h5>
</div>
<div class="modal-body text-center">
<p>Имя пользователя</p>
<textarea v-model='usernameModal' id="usernameText" cols="30" rows="1"></textarea>
<p>Пароль</p>
<textarea v-model='passwordModal' id="passwordText" cols="30" rows="1"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-primary" v-on:click='createUser'>Создать</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="customerEdit" tabindex="-1" role="dialog" aria-labelledby="customerEditLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="customerEditLabel">Изменение пользователя</h5>
</div>
<div class="modal-body text-center">
<p>Имя пользователя</p>
<textarea v-model='usernameModal' id="usernameText" cols="30" rows="1"></textarea>
<p>Пароль</p>
<textarea v-model='passwordModal' id="passwordText" cols="30" rows="1"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-primary" v-on:click='editUser'>Применить</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
customers: [],
usernameModal: '',
passwordModal: '',
selectedCustomer: {},
currentCustomerId: -1
}
},
methods: {
async createUser(){
const response = await axios.post('http://localhost:8080/customer?username=' + this.usernameModal + '&password=' + this.passwordModal);
this.refreshList();
},
async deleteUser(id) {
const response = await axios.delete('http://localhost:8080/customer/' + id);
this.refreshList();
},
async editUser() {
const response = await axios.put('http://localhost:8080/customer/' + this.selectedCustomer['id'] + '?username=' + this.usernameModal + '&password=' + this.passwordModal);
this.refreshList();
},
async refreshList() {
this.customers = [];
if (this.$route.params.id === "") {
const response = await axios.get('http://localhost:8080/customer');
response.data.forEach(element => {
this.customers.push(element);
console.log(element);
});
} else {
const response = await axios.get('http://localhost:8080/customer/' + this.$route.params.id);
this.customers.push(response.data)
}
},
},
async mounted() {
this.currentCustomerId = history.state;
setInterval(async () => this.currentCustomerId = history.state, 50)
if (this.$route.params.id === "") {
const response = await axios.get('http://localhost:8080/customer');
response.data.forEach(element => {
this.customers.push(element);
console.log(element);
});
} else {
const response = await axios.get('http://localhost:8080/customer/' + this.$route.params.id);
this.customers.push(response.data)
}
},
async beforeRouteUpdate(to, from) {
this.$route.params.id = to.params.id;
this.refreshList();
},
}
</script>
<style lang="">
</style>

View File

@ -0,0 +1,219 @@
<template>
<div class="ms-5">
<p class='h3 m-3'>Посты</p>
<div class="row" v-if="currentCustomerId != -1">
<div class="col-7">
<div class="row is-left">
<p class="col-2 is-left mb-2">Заголовок:</p>
<input type="text" class="col-5" v-model="titleModal"/>
</div>
<div class="row is-left">
<p class="col-2 is-left mb-2">Текст:</p>
<textarea type="textarea" class="col-5" v-model="postContentModal"/>
</div>
<div class="row is-left">
<button type='button' class="button btn-primary col-7" v-on:click='createPost'>
Опубликовать
</button>
</div>
</div>
</div>
<div v-if="!(posts.length == 0)" class="row">
<div class="col-5">
<div class="row mb-5 card" v-for="post in posts">
<div class="col">
<div class="row is-left my-3">
<p class="h2"><router-link v-bind:to="'/customers/' + post['customerId']" class="text-primary">{{ post['customerName'] }}</router-link></p>
</div>
<div class="row text-left">
<span class="h2">{{ post['title'] }}</span>
<span class="h3">{{ post['content'] }}</span>
</div>
<div class="row">
<div v-if="!(post['comments'].length == 0)">
<p class="row h3 is-left my-3">Комментарии:</p>
<div class="row text-left mb-4 card" v-for="comment in post['comments']">
<div class="row is-left">
<span class="h2"><router-link v-bind:to="'/customers/' + post['customerId']" class="text-primary">{{ post['customerName'] }}</router-link></span>
<span class="h3">{{ comment['content'] }}</span>
</div>
<div v-if="selectedCustomerContainsComment(comment) == true" class="row mt-3">
<button v-on:click="selectedCommentId = comment['id']; selectedPostTitle = post['title']" class="button primary outline col" data-bs-toggle="modal" data-bs-target="#commentEdit">Изменить</button>
<button v-on:click="deleteComment(comment['id'])" class="button error col">Удалить</button>
</div>
</div>
</div>
<div class="row" v-if="currentCustomerId != -1">
<input type="text" v-bind:id="'post-comment-' + post['id']" class="col-7"/>
<button type="button" v-on:click="selectedPostId = post['id']; selectedPostTitle = post['title']; createComment()" class="button col-5 secondary outline">Комментировать</button>
</div>
</div>
<div class="row" v-if="post['customerId'] == currentCustomerId">
<button type="button" v-on:click="deletePost(post['id'])" class="col button dark outline">Удалить пост</button>
<button type="button" v-on:click="selectedPostId = post['id']" class="col button primary outline" data-bs-toggle="modal" data-bs-target="#postEdit">Изменить пост</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="postEdit" tabindex="-1" role="dialog" aria-labelledby="postEditLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="postEditLabel">Редактировать пост</h5>
</div>
<div class="modal-body text-center">
<p>{{ currentCustomer['username'] }}</p>
<p>Заголовок</p>
<textarea v-model='titleModal' id="editModalTitle" cols="30" rows="1"></textarea>
<p>Содержание</p>
<textarea v-model='postContentModal' id="editModalPostContent" cols="30" rows="1"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary" v-on:click='editPost'>Изменить</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="commentEdit" tabindex="-1" role="dialog" aria-labelledby="commentEditLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="commentEditLabel">Изменить комментарий</h5>
</div>
<div class="modal-body text-center">
<p>Под именем:</p>
<p>{{ currentCustomer['username'] }}</p>
<p>К посту:</p>
<p>{{ selectedPostTitle }}</p>
<p>Комментарий</p>
<textarea v-model='contentModal' id="editModalText" cols="30" rows="1"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary" v-on:click='editComment'>Изменить</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
customers: [],
selectedCustomerId: 0,
currentCustomer: {},
posts: [],
selectedPostId: 0,
selectedPostTitle: '',
contentModal: '',
titleModal: '',
postContentModal: '',
selectedCommentId: 0,
currentCustomerId: -1,
}
},
methods: {
selectedCustomerContainsComment(comment) {
var customer = this.customers.find(element => element['id'] == this.currentCustomerId);
console.log(customer);
if (customer == null) return false;
var flag = false;
customer['comments'].forEach(commentIn => {
if (commentIn['id'] == comment['id']) {
flag = true;
}
});
return flag;
},
async createComment() {
const content = document.getElementById("post-comment-" + this.selectedPostId).value
await axios.post('http://localhost:8080/comment?text=' + content + '&ownerId=' + this.currentCustomerId + '&postId=' + this.selectedPostId);
document.getElementById("post-comment-" + this.selectedPostId).value = ''
this.refreshList();
},
async deleteComment(commentId) {
await axios.delete('http://localhost:8080/comment/' + commentId);
this.refreshList();
},
async editComment(){
await axios.put('http://localhost:8080/comment/' + this.selectedCommentId + '?text=' + this.contentModal);
this.refreshList();
},
async createPost() {
const response = await axios.post('http://localhost:8080/post?title=' + this.titleModal + '&content=' + this.postContentModal + '&authorId=' + this.currentCustomerId);
this.titleModal = ''
this.postContentModal = ''
this.refreshList();
},
async deletePost(postId) {
const response = await axios.delete('http://localhost:8080/post/' + postId);
this.refreshList();
},
async editPost(){
const response = await axios.put('http://localhost:8080/post/' + this.selectedPostId + '?title=' + this.titleModal + '&content=' + this.postContentModal);
this.refreshList();
},
async refreshList(){
this.customers = [];
this.posts = [];
const responseCustomer = await axios.get('http://localhost:8080/customer');
responseCustomer.data.forEach(element => {
this.customers.push(element);
console.log(element);
});
const responsePost = await axios.get('http://localhost:8080/post');
responsePost.data.forEach(element => {
this.posts.splice(0, 0, element);
console.log(element);
});
}
},
async beforeMount() {
this.currentCustomerId = history.state;
setInterval(async () => this.currentCustomerId = history.state, 50)
const responseCustomer = await axios.get('http://localhost:8080/customer');
responseCustomer.data.forEach(element => {
this.customers.push(element);
if (element['id'] == this.currentCustomerId) {
this.currentCustomer = element;
}
console.log(element);
});
const responsePost = await axios.get('http://localhost:8080/post');
responsePost.data.forEach(element => {
this.posts.splice(0, 0, element);
console.log(element);
});
}
}
</script>
<style lang="">
</style>

View File

@ -0,0 +1,29 @@
import {createApp} from 'vue'
import App from './App'
import { createRouter, createWebHistory } from "vue-router"
import Customers from './components/Customers'
import Posts from './components/Posts'
const routes = [
{
path: '/customers/:id?',
name: "Customers",
component: Customers,
props: true
},
{
path: '/posts',
name: "Posts",
component: Posts,
props: true
}
]
const router = createRouter({
routes,
history: createWebHistory()
})
createApp(App).use(router).mount('#app')

View File

@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})