LabWork04: Работа готова (Фронт)
This commit is contained in:
parent
5ec74ef311
commit
2918fee687
1
.gitignore
vendored
1
.gitignore
vendored
@ -4,6 +4,7 @@ build/
|
|||||||
!gradle/wrapper/gradle-wrapper.jar
|
!gradle/wrapper/gradle-wrapper.jar
|
||||||
!**/src/main/**/build/
|
!**/src/main/**/build/
|
||||||
!**/src/test/**/build/
|
!**/src/test/**/build/
|
||||||
|
lab4-vue-front/node_modules
|
||||||
|
|
||||||
### STS ###
|
### STS ###
|
||||||
.apt_generated
|
.apt_generated
|
||||||
|
|||||||
19
lab4-vue-front/README.md
Normal file
19
lab4-vue-front/README.md
Normal 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/).
|
||||||
5
lab4-vue-front/babel.config.js
Normal file
5
lab4-vue-front/babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
19
lab4-vue-front/jsconfig.json
Normal file
19
lab4-vue-front/jsconfig.json
Normal 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
17576
lab4-vue-front/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
lab4-vue-front/package.json
Normal file
29
lab4-vue-front/package.json
Normal 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"
|
||||||
|
]
|
||||||
|
}
|
||||||
15
lab4-vue-front/public/index.html
Normal file
15
lab4-vue-front/public/index.html
Normal 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>
|
||||||
48
lab4-vue-front/src/App.vue
Normal file
48
lab4-vue-front/src/App.vue
Normal 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>
|
||||||
154
lab4-vue-front/src/components/Customers.vue
Normal file
154
lab4-vue-front/src/components/Customers.vue
Normal 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>
|
||||||
219
lab4-vue-front/src/components/Posts.vue
Normal file
219
lab4-vue-front/src/components/Posts.vue
Normal 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>
|
||||||
29
lab4-vue-front/src/main.js
Normal file
29
lab4-vue-front/src/main.js
Normal 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')
|
||||||
4
lab4-vue-front/vue.config.js
Normal file
4
lab4-vue-front/vue.config.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user