删除 App.vue
This commit is contained in:
parent
b87a66811b
commit
914f4513fc
354
App.vue
354
App.vue
|
|
@ -1,354 +0,0 @@
|
|||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue'
|
||||
import axios from 'axios';
|
||||
const msg = ref("hello world")
|
||||
//生命周期方法
|
||||
onMounted(() => {
|
||||
console.log("onMounted")
|
||||
myClick()
|
||||
myClick_1()
|
||||
})
|
||||
const booksList = ref(null)
|
||||
const borrowList = ref(null)
|
||||
|
||||
function myClick() {
|
||||
axios({
|
||||
method: 'GET',
|
||||
url: 'http://127.0.0.1:8081/getAllBook'
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
booksList.value = res.data.data.map(book => ({
|
||||
...book,
|
||||
evaluations: book.reviews202201020128List.map(review =>
|
||||
`${review.username}: ${review.evaluate}`)
|
||||
}));
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
function myClick_1() {
|
||||
axios({
|
||||
method: 'GET',
|
||||
url: 'http://127.0.0.1:8081/getAllBorrowRecords'
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
borrowList.value = res.data.data
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
function deleteBook(row) {
|
||||
console.log(row)
|
||||
axios({
|
||||
method: 'POST',
|
||||
url: 'http://127.0.0.1:8081/deleteBook',
|
||||
params: {
|
||||
id: row.id
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
myClick()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
function deleteBorrow(row) {
|
||||
console.log(row)
|
||||
axios({
|
||||
method: 'POST',
|
||||
url: 'http://127.0.0.1:8081/deleteBorrowRecords',
|
||||
params: {
|
||||
id: row.id
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
myClick_1()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const diareview = ref(false)
|
||||
const diaborrow = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
id: null,
|
||||
title: '',
|
||||
author: '',
|
||||
isbn: '',
|
||||
publisher: '',
|
||||
published_date: ''
|
||||
})
|
||||
|
||||
const review = reactive({
|
||||
id: null,
|
||||
evaluate: '',
|
||||
username: '',
|
||||
bookid: ''
|
||||
})
|
||||
|
||||
const borrow = reactive({
|
||||
id: null,
|
||||
borrowid: '',
|
||||
recordsid: ''
|
||||
})
|
||||
|
||||
function updateBook(row) {
|
||||
console.log(row)
|
||||
dialogVisible.value = true
|
||||
Object.assign(form, {
|
||||
id: row.id,
|
||||
title: row.title,
|
||||
author: row.author,
|
||||
isbn: row.isbn,
|
||||
publisher: row.publisher,
|
||||
published_date: row.published_date
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function updateReview(row_1) {
|
||||
console.log(row_1)
|
||||
diareview.value = true
|
||||
Object.assign(review, {
|
||||
id: row_1.id,
|
||||
evaluate: row_1.evaluate,
|
||||
username: row_1.username,
|
||||
bookid: row_1.bookid
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function updateBorrow(row) {
|
||||
console.log(row)
|
||||
diaborrow.value = true
|
||||
Object.assign(borrow, {
|
||||
id: row.id,
|
||||
borrowid: row.borrowid,
|
||||
recordsid: row.recordsid
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function updateBookcommit() {
|
||||
axios({
|
||||
method: 'POST',
|
||||
url: 'http://127.0.0.1:8081/updateBookcommit',
|
||||
params: form
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
dialogVisible.value = false
|
||||
myClick()
|
||||
myClick_1()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
function updateReviewcommit() {
|
||||
axios({
|
||||
method: 'POST',
|
||||
url: 'http://127.0.0.1:8081/updateReviewcommit',
|
||||
params: review
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
diareview.value = false
|
||||
myClick()
|
||||
myClick_1()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
function updateBorrowcommit() {
|
||||
axios({
|
||||
method: 'POST',
|
||||
url: 'http://127.0.0.1:8081/updateBorrowRecordscommit',
|
||||
params: borrow
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
diaborrow.value = false
|
||||
myClick()
|
||||
myClick_1()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function addBook() {
|
||||
dialogVisible.value = true
|
||||
Object.assign(from, {
|
||||
id: null,
|
||||
title: '',
|
||||
author: '',
|
||||
isbn: '',
|
||||
publisher: '',
|
||||
published_date: ''
|
||||
})
|
||||
}
|
||||
|
||||
function addReview() {
|
||||
diareview.value = true
|
||||
Object.assign(review, {
|
||||
id: null,
|
||||
evaluate: '',
|
||||
username: '',
|
||||
bookid: ''
|
||||
})
|
||||
}
|
||||
|
||||
function addBorrow() {
|
||||
diaborrow.value = true
|
||||
Object.assign(borrow, {
|
||||
id: null,
|
||||
borrowid: '',
|
||||
recordsid: ''
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-table :data="booksList" stripe style="width: 100%;" class="table-spacing">
|
||||
<el-table-column prop="id" label="id" width="180" />
|
||||
<el-table-column prop="title" label="书名" width="180" />
|
||||
<el-table-column prop="author" label="作者" width="180" />
|
||||
<el-table-column prop="isbn" label="ISBN" width="180" />
|
||||
<el-table-column prop="publisher" label="出版社" width="180" />
|
||||
<el-table-column prop="published_date" label="出版日期" width="180" />
|
||||
<el-table-column label="评论">
|
||||
<template #default="{ row }">
|
||||
<ul>
|
||||
<li v-for="evaluation in row.evaluations" :key="evaluation">{{ evaluation }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="借阅信息">
|
||||
<template #default="{ row }">
|
||||
<ul>
|
||||
<li v-for="borrow in row.borrowList" :key="borrow.id">
|
||||
{{borrow.username}} - {{borrow.status}}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" min-width="120">
|
||||
<template #default="{row}">
|
||||
<el-button type="danger" size="small" @click="deleteBook(row)">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" @click="updateBook(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="增加或修改" width="500" :before-close="handleClose">
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="id">
|
||||
<el-input v-model="form.id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="书名">
|
||||
<el-input v-model="form.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="作者">
|
||||
<el-input v-model="form.author" />
|
||||
</el-form-item>
|
||||
<el-form-item label="ISBN">
|
||||
<el-input v-model="form.isbn" />
|
||||
</el-form-item>
|
||||
<el-form-item label="出版社">
|
||||
<el-input v-model="form.publisher" />
|
||||
</el-form-item>
|
||||
<el-form-item label="出版时间">
|
||||
<el-input v-model="form.published_date" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="updateBookcommit()">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="diareview" title="增加或修改" width="500" :before-close="handleClose">
|
||||
<el-form :model="review" label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="id">
|
||||
<el-input v-model="review.id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="评论">
|
||||
<el-input v-model="review.evaluate" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="review.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="bookid">
|
||||
<el-input v-model="review.bookid" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="diareview = false">取消</el-button>
|
||||
<el-button type="primary" @click="updateReviewcommit()">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-button @click="addBook">增加书籍</el-button>
|
||||
<el-button @click="addReview">增加评论</el-button>
|
||||
<el-table :data="borrowList" stripe style="width: 100%;">
|
||||
<el-table-column prop="id" label="id" width="180" />
|
||||
<el-table-column prop="borrowid" label="书名id" width="180" />
|
||||
<el-table-column prop="recordsid" label="用户id" width="180" />
|
||||
<el-table-column fixed="right" label="操作" min-width="120">
|
||||
<template #default="{row}">
|
||||
<el-button type="danger" size="small" @click="deleteBorrow(row)">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" @click="updateBorrow(row_2)">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog v-model="diaborrow" title="增加或修改" width="500" :before-close="handleClose">
|
||||
<el-form :model="borrow" label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="id">
|
||||
<el-input v-model="borrow.id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户id">
|
||||
<el-input v-model="borrow.borrowid" />
|
||||
</el-form-item>
|
||||
<el-form-item label="书id">
|
||||
<el-input v-model="borrow.recordsid" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="diareview = false">取消</el-button>
|
||||
<el-button type="primary" @click="updateBorrowcommit()">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-button @click="addBorrow">增加评论</el-button>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.table-spacing {
|
||||
margin-bottom: 20px;
|
||||
/* 调整这个值来控制两个表格之间的间隔 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue