pecvhqap2
/
pyx_gitkeshe
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

更新后前端文档

Browse Source
hyx_brand
hyx 2 months ago
parent 466d816aa2
commit ddc810f5ed
13 changed files with 88 additions and 136 deletions
Show Stats Download Patch File Download Diff File

14
library_system/src/components/BookCard.vue
Unescape View File

@ -5,15 +5,15 @@
</div>
<div class="book-info">
<h3 class="book-title">{{ book.title }}</h3>
<div class="book-meta">
<div class="book-meta" v-if="showMeta">
<el-tag type="info" size="small">{{ book.content }}</el-tag>
<el-tag type="success" size="small">￥{{ book.money }}/天</el-tag>
</div>
<div class="book-status">
<el-tag :type="book.number > 0 ? 'success' : 'danger'" size="small">
{{ book.number > 0 ? '可借' : '已借完' }}
<div class="book-status"v-if="showMeta">
<el-tag :type="book.state" size="small">
{{ book.state }}
</el-tag>
<span>库存: {{ book.number }}本</span>
<span>阅读量: {{ book.number }}次</span>
</div>
</div>
</el-card>
@ -24,6 +24,10 @@ defineProps({
book: {
type: Object,
required: true
},
showMeta: {
type: Boolean,
default: true
}
})
</script>

34
library_system/src/views/Admin/AllBorrowRecords.vue
Unescape View File

@ -26,7 +26,7 @@
</div>
<el-table :data="records" border style="width: 100%">
<el-table-column prop="username" label="用户名" width="150" />
<el-table-column prop="borrower" label="用户名" width="150" />
<el-table-column prop="book_title" label="书名" width="200" />
<el-table-column prop="borrow_time" label="借阅时间" width="200">
<template #default="scope">
@ -85,45 +85,17 @@
const presetRecords = [
{
id: 1,
username: 'zhangsan',
borrower: 'zhangsan',
book_title: '三体',
borrow_time: '2023-10-15 09:30:00',
return_time: null // 未归还
},
{
id: 2,
username: 'lisi',
borrower: 'lisi',
book_title: '人类简史',
borrow_time: '2023-10-10 14:20:00',
return_time: '2023-10-20 16:10:00' // 已归还
},
{
id: 3,
username: 'wangwu',
book_title: '百年孤独',
borrow_time: '2023-09-25 11:15:00',
return_time: null
},
{
id: 4,
username: 'zhangsan',
book_title: '活着',
borrow_time: '2023-09-20 10:00:00',
return_time: '2023-10-05 15:30:00'
},
{
id: 5,
username: 'zhaoliu',
book_title: '小王子',
borrow_time: '2023-10-08 09:45:00',
return_time: null
},
{
id: 6,
username: 'lisi',
book_title: '追风筝的人',
borrow_time: '2023-09-15 16:20:00',
return_time: '2023-09-30 10:10:00'
}
]

17
library_system/src/views/Admin/BookManagement.vue
Unescape View File

@ -25,18 +25,17 @@
</div>
<el-table :data="books" border style="width: 100%">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column label="封面" width="100">
<el-table-column prop="id" label="ID" width="100" />
<el-table-column prop="url"label="封面" width="120">
<template #default="scope">
<el-image :src="scope.row.url" width="60" height="80" fit="cover" />
</template>
</el-table-column>
<el-table-column prop="title" label="书名" />
<el-table-column prop="category" label="分类" width="120" />
<el-table-column prop="money" label="日租金" width="100" />
<el-table-column prop="number" label="库存" width="80" />
<el-table-column prop="borrowCount" label="借阅次数" width="100" />
<el-table-column label="状态" width="100">
<el-table-column prop="title" label="书名" width="150"/>
<el-table-column prop="content" label="内容" />
<el-table-column prop="money" label="日租金" width="120" />
<el-table-column prop="number" label="阅读量" width="120" />
<el-table-column prop="state" label="状态" width="120">
<template #default="scope">
<el-tag :type="scope.row.number > 0 ? 'success' : 'danger'">
{{ scope.row.number > 0 ? '可借' : '已借完' }}
@ -122,7 +121,7 @@
}
const goToAddBook = () => {
router.push('/api/add')
router.push('/books/add')
}
const handleDelete = async (book) => {

4
library_system/src/views/Books/AddBook.vue
Unescape View File

@ -37,7 +37,7 @@
:step="0.1"
:precision="2" />
</el-form-item>
<el-form-item label="库存数量" prop="number">
<el-form-item label="阅读量" prop="number">
<el-input-number v-model="form.number" :min="1" />
</el-form-item>
<el-form-item>
@ -84,7 +84,7 @@ const rules = ref({
{ required: true, message: '请输入价格', trigger: 'blur' }
],
number: [
{ required: true, message: '请输入库存数量', trigger: 'blur' }
{ required: true, message: '请输入阅读量', trigger: 'blur' }
]
})

16
library_system/src/views/Books/BookDetail.vue
Unescape View File

@ -6,20 +6,20 @@
<div class="book-info">
<h1 class="title">{{ book.title }}</h1>
<div class="meta">
<el-tag type="info" size="large">{{ book.content }}</el-tag>
<!-- <el-tag type="info" size="large">{{ book.content }}</el-tag> -->
<el-tag type="success" size="large">￥{{ book.money }}/天</el-tag>
</div>
<div class="status">
<el-tag :type="book.number > 0 ? 'success' : 'danger'" size="large">
{{ book.number > 0 ? '可借' : '已借完' }}
{{ book.state }}
</el-tag>
<span>库存: {{ book.number }}本</span>
<span>阅读量: {{ book.number }}</span>
</div>
<div class="actions">
<el-button
type="primary"
size="large"
:disabled="book.number <= 0"
:disabled="book.state = '维护中'"
@click="borrowBook"
v-if="!isAdmin">
立即借阅
@ -39,7 +39,7 @@
<div class="book-description">
<h3>书籍简介</h3>
<p>{{ book.description || '暂无简介' }}</p>
<p>{{ book.content || '暂无简介' }}</p>
</div>
</el-card>
</div>
@ -79,10 +79,8 @@ const fetchBook = async () => {
url: 'https://picsum.photos/id/24/300/400',
money: 5.00,
number: 8,
content: '文学小说',
description: '这是一本示例书籍，用于展示书籍详情页面的效果。包含了书籍的基本信息和详细介绍，用户可以在这里查看书籍的具体内容并进行借阅操作。',
author: '示例作者',
publishDate: '2023-01-15'
content: '这是一本示例书籍，用于展示书籍详情页面的效果。包含了书籍的基本信息和详细介绍，用户可以在这里查看书籍的具体内容并进行借阅操作。',
state: '维护中',
}
}
}

28
library_system/src/views/Books/BookList.vue
Unescape View File

@ -39,7 +39,7 @@
<div class="book-info">
<h3 class="book-title">{{ book.title }}</h3>
<div class="book-meta">
<el-tag type="info" size="small">{{ book.category }}</el-tag>
<el-tag type="info" size="small">{{ book.content }}</el-tag>
<el-tag type="success" size="small">￥{{ book.money }}/天</el-tag>
</div>
<div class="book-status">
@ -48,7 +48,7 @@
size="small">
{{ book.state }}
</el-tag>
<span>库存: {{ book.number }}本</span>
<span>阅读量: {{ book.number }}次</span>
</div>
</div>
</el-card>
@ -103,18 +103,18 @@ const fetchBooks = async () => {
console.error('获取书籍列表失败:', error)
ElMessage.error('获取书籍列表失败')
books.value = [
{ id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12, state: '可借', category: '科幻' },
{ id: 2, title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10, state: '可借', category: '历史' },
{ id: 3, title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 0, state: '已借完', category: '文学' },
{ id: 4, title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15, state: '可借', category: '小说' },
{ id: 5, title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9, state: '可借', category: '小说' },
{ id: 6, title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7, state: '可借', category: '小说' },
{ id: 7, title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20, state: '可借', category: '童话' },
{ id: 8, title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18, state: '可借', category: '文学' },
{ id: 9, title: '月亮与六便士', url: 'https://picsum.photos/id/32/200/300', money: 5, number: 16, state: '可借', category: '小说' },
{ id: 10, title: '哈利波特', url: 'https://picsum.photos/id/33/200/300', money: 7, number: 25, state: '可借', category: '魔幻' },
{ id: 11, title: '水浒传', url: 'https://picsum.photos/id/34/200/300', money: 6, number: 14, state: '可借', category: '古典' },
{ id: 12, title: '三国演义', url: 'https://picsum.photos/id/35/200/300', money: 6, number: 12, state: '可借', category: '古典' }
{ id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12, state: '可借', content: '科幻' },
{ id: 2, title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10, state: '可借', content: '历史' },
{ id: 3, title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 0, state: '维护中', content: '文学' },
{ id: 4, title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15, state: '可借', content: '小说' },
{ id: 5, title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9, state: '可借', content: '小说' },
{ id: 6, title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7, state: '可借', content: '小说' },
{ id: 7, title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20, state: '可借', content: '童话' },
{ id: 8, title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18, state: '可借', content: '文学' },
{ id: 9, title: '月亮与六便士', url: 'https://picsum.photos/id/32/200/300', money: 5, number: 16, state: '可借', content: '小说' },
{ id: 10, title: '哈利波特', url: 'https://picsum.photos/id/33/200/300', money: 7, number: 25, state: '可借', content: '魔幻' },
{ id: 11, title: '水浒传', url: 'https://picsum.photos/id/34/200/300', money: 6, number: 14, state: '可借', content: '古典' },
{ id: 12, title: '三国演义', url: 'https://picsum.photos/id/35/200/300', money: 6, number: 12, state: '可借',content: '古典' }
]
total.value = books.value.length
}

22
library_system/src/views/Borrow/BorrowBook.vue
Unescape View File

@ -73,14 +73,18 @@ const fetchBooks = async () => {
ElMessage.error('获取书籍列表失败')
// 预设数据
books.value = [
{ id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12 },
{ id: 2, title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10 },
{ id: 3, title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 0 },
{ id: 4, title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15 },
{ id: 5, title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9 },
{ id: 6, title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7 },
{ id: 7, title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20 },
{ id: 8, title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18 }
{ id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12, state: '可借', content: '科幻' },
{ id: 2, title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10, state: '可借', content: '历史' },
{ id: 3, title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 0, state: '维护中', content: '文学' },
{ id: 4, title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15, state: '可借', content: '小说' },
{ id: 5, title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9, state: '可借', content: '小说' },
{ id: 6, title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7, state: '可借', content: '小说' },
{ id: 7, title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20, state: '可借', content: '童话' },
{ id: 8, title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18, state: '可借', content: '文学' },
{ id: 9, title: '月亮与六便士', url: 'https://picsum.photos/id/32/200/300', money: 5, number: 16, state: '可借', content: '小说' },
{ id: 10, title: '哈利波特', url: 'https://picsum.photos/id/33/200/300', money: 7, number: 25, state: '可借', content: '魔幻' },
{ id: 11, title: '水浒传', url: 'https://picsum.photos/id/34/200/300', money: 6, number: 14, state: '可借', content: '古典' },
{ id: 12, title: '三国演义', url: 'https://picsum.photos/id/35/200/300', money: 6, number: 12, state: '可借',content: '古典' }
]
total.value = books.value.length
}
@ -94,7 +98,7 @@ const searchBooks = () => {
const handleBorrow = async (book) => {
try {
if (book.number <= 0) {
ElMessage.warning('该书籍已无库存')
ElMessage.warning('该书籍维护中，无法借阅')
return
}

2
library_system/src/views/Home.vue
Unescape View File

@ -18,6 +18,7 @@
v-for="book in weeklyRank"
:key="book.id || book.title"
:book="book"
:show-meta="false"
@click="goToBookDetail(book.id)" />
</div>
<div class="section-more">
@ -32,6 +33,7 @@
v-for="book in monthlyRank"
:key="book.id || book.title"
:book="book"
:show-meta="false"
@click="goToBookDetail(book.id)" />
</div>
<div class="section-more">

26
library_system/src/views/Ranking/MonthlyRank.vue
Unescape View File

@ -11,19 +11,13 @@
</template>
</el-table-column>
<el-table-column prop="title" label="书名" width="200" />
<el-table-column prop="number" label="租借次数" width="120" />
<el-table-column prop="number" label="阅读量" width="120" />
<el-table-column prop="money" label="价格(元/天)" width="120">
<template #default="scope">
￥{{ scope.row.money }}
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="scope">
<el-tag :type="scope.row.number > 0 ? 'success' : 'danger'">
{{ scope.row.number > 0 ? '可借' : '已借完' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button
@ -64,14 +58,14 @@ const fetchMonthlyRank = async () => {
ElMessage.error('获取本月热租榜失败')
// 预设数据
books.value = [
{ id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12, borrowCount: 128 },
{ id: 2, title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10, borrowCount: 112 },
{ id: 3, title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 8, borrowCount: 98 },
{ id: 4, title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15, borrowCount: 92 },
{ id: 5, title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9, borrowCount: 85 },
{ id: 6, title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7, borrowCount: 76 },
{ id: 7, title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20, borrowCount: 72 },
{ id: 8, title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18, borrowCount: 68 }
{ title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12},
{ title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10 },
{ title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 8},
{ title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15 },
{ title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9 },
{ title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7 },
{ title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20 },
{ title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18 }
]
}
}

23
library_system/src/views/Ranking/WeeklyRank.vue
Unescape View File

@ -17,13 +17,6 @@
￥{{ scope.row.money }}
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="scope">
<el-tag :type="scope.row.number > 0 ? 'success' : 'danger'">
{{ scope.row.number > 0 ? '可借' : '已借完' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button
@ -64,14 +57,14 @@ const fetchWeeklyRank = async () => {
ElMessage.error('获取本周热租榜失败')
// 预设数据
books.value = [
{ id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12, borrowCount: 128 },
{ id: 2, title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10, borrowCount: 112 },
{ id: 3, title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 8, borrowCount: 98 },
{ id: 4, title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15, borrowCount: 92 },
{ id: 5, title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9, borrowCount: 85 },
{ id: 6, title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7, borrowCount: 76 },
{ id: 7, title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20, borrowCount: 72 },
{ id: 8, title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18, borrowCount: 68 }
{ title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12},
{ title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10 },
{ title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 8},
{ title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15 },
{ title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9 },
{ title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7 },
{ title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20 },
{ title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18 }
]
}
}

15
library_system/src/views/User/BorrowRecords.vue
Unescape View File

@ -53,25 +53,22 @@ const fetchRecords = async () => {
ElMessage.error('获取借阅记录失败')
records.value = [
{
id: 1,
book_title: '三体',
title: '三体',
borrow_time: '2023-10-01 10:30:00',
return_time: null,
status: '未归还'
},
{
id: 2,
book_title: '人类简史',
title: '人类简史',
borrow_time: '2023-09-15 09:15:00',
return_time: '2023-09-30 16:40:00',
status: '已归还'
},
{
id: 3,
book_title: '百年孤独',
title: '百年孤独',
borrow_time: '2023-08-20 15:20:00',
return_time: '2023-09-05 11:30:00',
status: '已归还'
}
]
}

21
library_system/src/views/User/Profile.vue
Unescape View File

@ -6,7 +6,7 @@
<div class="user-info">
<h2>{{ user.username }}</h2>
<div class="vip-level">
<el-tag type="warning" size="large">VIP{{ vipLevel }}级</el-tag>
<el-tag type="warning" size="large">VIP{{ vip }}级</el-tag>
</div>
<div class="balance">
<el-text type="primary" size="large">
@ -29,8 +29,7 @@
</el-descriptions-item>
<el-descriptions-item label="注册时间">{{ formatDate(user.create_time) }}</el-descriptions-item>
<el-descriptions-item label="最后登录时间">{{ formatDate(user.update_time) }}</el-descriptions-item>
<el-descriptions-item label="当前借阅数量">{{ borrowedBooks.length }}本</el-descriptions-item>
<el-descriptions-item label="累计借阅">{{ user.totalBorrowed || 0 }}本</el-descriptions-item>
</el-descriptions>
</div>
@ -54,9 +53,9 @@ const router = useRouter()
const user = computed(() => store.state.user || {})
const balance = computed(() => store.state.balance)
const vipLevel = computed(() => store.state.vipLevel)
const vip = computed(() => store.state.vip)
const isAdmin = computed(() => store.getters.isAdmin)
const borrowedBooks = computed(() => store.state.borrowedBooks)
onMounted(async () => {
try {
@ -64,17 +63,7 @@ onMounted(async () => {
}catch (error) {
console.error('获取用户信息失败:', error)
ElMessage.error('获取用户信息失败，展示示例数据')
// 预设用户数据
store.commit('setUser', {
username: 'testuser',
passworf:111111,
pic: 'https://picsum.photos/id/64/100/100',
admin: false
})
store.commit('setBalanceAndVip', {
balance: 100.50,
vip: 2
})
}
})

2
library_system/src/views/User/Recharge.vue
Unescape View File

@ -31,7 +31,7 @@
<h3>快捷充值</h3>
<div class="options-grid">
<el-button
v-for="amount in [10, 50, 100, 200, 500]"
v-for="amount in [10, 50, 100,150,200,300,400,500]"
:key="amount"
@click="quickRecharge(amount)">
￥{{ amount }}

Write Preview
Loading…
Cancel
Save