共计 9094 个字符，预计需要花费 23 分钟才能阅读完成。
1 /src/store 中新增 userInfo.js，用于保存用户的登录信息
import { defineStore } from "pinia"
import { ref } from 'vue'
export const userInfoStore = defineStore('userInfo', () => {
const info = ref({})
const isAdmin = ref(false)
const setInfo = (newInfo) => {
info.value = newInfo
isAdmin.value = newInfo.userRole === 'ADMIN'
}
const removeInfo = () => {
info.value = {}
}
return { info, isAdmin, setInfo, removeInfo }
}, {
persist: true
})
2 Login.vue 组件登录成功之后，保存 token
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore()
c
onst login = async () => {
let result = await loginService(registerData.value)
console.log("结果是" + result);
tokenStore.setToken(result.data)
ElMessage.success(result.msg ? result.msg : '登录成功')
router.push('/')
}
3 /api/user.js 中添加获取用户个人信息的接口
export const userInfoGetService = () => {
return request.get('/user/userinfo');
}
4 首页 LayoutVue.vue 组件添加如下代码，用户登录成功之后，在首页获取用户信息，并根据是管理员还是普通用户，实现不同组件显示
import { ref } from 'vue'
import { userInfoGetService } from '@/api/user.js'
import { userInfoStore } from '@/stores/userInfo.js'
const useruserInfoStore = userInfoStore();
const isAdmin = ref(useruserInfoStore.isAdmin)
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();
const getUserInf = async () => {
let result = await userInfoGetService();
useruserInfoStore.setInfo(result.data);
}
getUserInf()
5 首页 LayoutVue 完整代码如下
script setup>
import {
Management,
Promotion,
UserFilled,
User,
Crop,
EditPen,
SwitchButton,
CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { ref } from 'vue'
import { userInfoGetService } from '@/api/user.js'
import { userInfoStore } from '@/stores/userInfo.js'
const useruserInfoStore = userInfoStore();
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();
const getUserInf = async () => {
let result = await userInfoGetService();
useruserInfoStore.setInfo(result.data);
}
getUserInf()
const isAdmin = ref(useruserInfoStore.isAdmin.value)
import router from '@/router'
import { ElMessage, ElMessageBox } from 'element-plus'
const handleCommand = (command) => {
if (command == 'logout') {
ElMessageBox.confirm(
'你确认退出登录码？',
'温馨提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(async () => {
useruserInfoStore.setInfo('')
tokenStore.token = ''
router.push('/login')
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消退出',
})
})
} else {
router.push(`/user/${command}`);
}
}
/script>
template>
el-container class="layout-container">
!-- 左侧菜单 -->
el-aside width="200px">
div class="el-aside__logo">/div>
el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>
el-menu-item index="/book/resources">
el-icon>
Book />
/el-icon>
span>图书资源/span>
/el-menu-item>
!-- 如果是管理员就显示用户管理组件 否则就显示借阅记录组件 -->
el-menu-item v-if="!useruserInfoStore.isAdmin" index="/book/records">
el-icon>
User />
/el-icon>
span>借阅记录/span>
/el-menu-item>
el-menu-item v-else index="/user/manage">
el-icon>
Document />
/el-icon>
span>用户管理/span>
/el-menu-item>
el-sub-menu>
template #title>
el-icon>
UserFilled />
/el-icon>
span>个人中心/span>
/template>
el-menu-item index="/user/info">
el-icon>
User />
/el-icon>
span>基本资料/span>
/el-menu-item>
el-menu-item index="/user/avatar">
el-icon>
Crop />
/el-icon>
span>更换头像/span>
/el-menu-item>
el-menu-item index="/user/password">
el-icon>
EditPen />
/el-icon>
span>重置密码/span>
/el-menu-item>
/el-sub-menu>
/el-menu>
/el-aside>
!-- 右侧主区域 -->
el-container>
!-- 头部区域 -->
el-header>
div>当前用户：strong>{{ useruserInfoStore.info.userName }}/strong>/div>
el-dropdown placement="bottom-end" @command="handleCommand">
span class="el-dropdown__box">
el-avatar src="@/assets/default.png" />
el-icon>
CaretBottom />
/el-icon>
/span>
template #dropdown>
el-dropdown-menu>
el-dropdown-item command="info" :icon="User">基本资料/el-dropdown-item>
el-dropdown-item command="avatar" :icon="Crop">更换头像/el-dropdown-item>
el-dropdown-item command="password" :icon="EditPen">重置密码/el-dropdown-item>
el-dropdown-item command="logout" :icon="SwitchButton">退出登录/el-dropdown-item>
/el-dropdown-menu>
/template>
/el-dropdown>
/el-header>
!-- 中间区域 -->
el-main>
!-- div style="width: 1290px; height: 570px;border: 1px solid red;">
内容展示区
/div> -->
router-view>/router-view>
/el-main>
!-- 底部区域 -->
el-footer>软件之声论坛 ©2024 Created by xumj/el-footer>
/el-container>
/el-container>
/template>
style lang="scss" scoped>
.layout-container {
height: 100vh;
.el-aside {
background-color: #232323;
&__logo {
height: 120px;
background: url('@/assets/logo.png') no-repeat center / 120px auto;
}
.el-menu {
border-right: none;
}
}
.el-header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.el-dropdown__box {
display: flex;
align-items: center;
.el-icon {
color: #999;
margin-left: 10px;
}
&:active,
&:focus {
outline: none;
}
}
}
.el-footer {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #666;
}
}
/style>
6 /api/book.js 中添加图书查询接口
import request from '@/utils/request.js'
export const bookListService = () => {
return request.get('/book/allBook')
}
7 后台 Java 处理代码
@GetMapping("/allBook")
public Result getAllBook(){
System.out.println("收到查询请求");
ListBook> bookList = iBookService.list();
return Result.success(bookList);
}
8 /books/BookResourcesVue.vue 组件中添加如下代码
script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { userInfoStore } from '@/stores/userInfo.js'
const useruserInfoStore = userInfoStore();
const isAdmin = ref(useruserInfoStore.isAdmin)
const bookModel = ref({
bookId: '',
bookName: '',
bookIsbn: '',
bookPress: '',
bookAuthor: '',
bookPagination: '',
bookPrice: '',
bookUploadtime: '',
bookStatus: '',
bookBorrower: '',
bookBorrowtime: '',
bookReturntime: ''
})
const formRef = ref(null)
const state = ref('全部')
const books = ref([
{
"bookId": 1,
"bookName": "西游记",
"bookIsbn": "978-7-115-58402-8",
"bookPress": "人民邮电出版社",
"bookAuthor": "张三",
"bookPagination": "256 页",
"bookPrice": "45.00 元",
"bookUploadtime": "2023-09-03 11:55:30",
"bookStatus": "可借阅",
"bookBorrower": "",
"bookBorrowtime": "",
"bookReturntime": ""
},
])
const rules = {
bookName: [{ required: true, message: '请输入书名', trigger: 'blur' }],
bookIsbn: [{ required: true, message: '请输入 ISBN', trigger: 'blur' }],
bookPress: [{ required: true, message: '请输入出版社', trigger: 'blur' }],
bookAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
bookPagination: [
{ required: true, message: '请输入页数', trigger: 'blur' },
{ type: 'number', message: '页数必须是数字', trigger: 'blur' }
],
bookPrice: [{ required: true, message: '请输入价格', trigger: 'blur' }]
}
import { bookListService } from '@/api/book.js'
const getBooks = async () => {
let result = await bookListService()
books.value = result.data
}
getBooks()
const visibleDrawer = ref(false)
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore()
const addBook = () => {
console.log("借书功能");
}
const borrowBook = (bookId) => {
console.log("借书功能");
}
script>
template>
el-card class="page-container">
template #header>
div class="header">
span v-if="isAdmin">
el-button type="primary" @click="visibleDrawer = true">添加图书el-button>
span>
div>
template>
el-form inline>
el-form-item label="状态：">
el-select placeholder="请选择" v-model="state">
el-option label="可借阅 " value=" 可借阅">el-option>
el-option label="已借出 " value=" 已借出">el-option>
el-select>
el-form-item>
el-form-item>
el-button type="primary" @click="getBooks">搜索el-button>
el-button @click="state = ''">重置el-button>
el-form-item>
el-form>
el-table :data="books" style="width: 100%">
el-table-column label="书名" prop="bookName">el-table-column>
el-table-column label="ISBN" prop="bookIsbn">el-table-column>
el-table-column label="出版社" prop="bookPress">el-table-column>
el-table-column label="作者" prop="bookAuthor">el-table-column>
el-table-column label="页数" prop="bookPagination">el-table-column>
el-table-column label="价格" prop="bookPrice">el-table-column>
el-table-column label="上传时间" prop="bookUploadtime">el-table-column>
el-table-column label="状态" prop="bookStatus">el-table-column>
el-table-column label="借阅人" prop="bookBorrower">el-table-column>
el-table-column label="借阅时间" prop="bookBorrowtime">el-table-column>
el-table-column label="归还时间" prop="bookReturntime">el-table-column>
el-table-column v-if="isAdmin" label="操作" width="100">
template #default="{row}">
el-button :icon="Edit" circle plain type="primary">el-button>
el-button :icon="Delete" circle plain type="danger">el-button>
template>
el-table-column>
el-table-column v-else label="操作" width="100">
template #default="{row}">
el-button v-if="row.bookStatus == 0" plain type="primary"
@click="borrowBook(row.bookId)">借阅el-button>
el-button v-if="row.bookStatus == 1" plain disabled type="primary"
@click="borrowBook(row.bookId)">借阅el-button>
template>
el-table-column>
template #empty>
el-empty description="没有数据" />
template>
el-table>
el-drawer v-model="visibleDrawer" title="添加图书" direction="rtl" size="50%">
el-form :model="bookModel" :rules="rules" ref="formRef" label-width="100px">
el-form-item label="书名" prop="bookName">
el-input v-model="bookModel.bookName" placeholder="请输入书名">el-input>
el-form-item>
el-form-item label="ISBN" prop="bookIsbn">
el-input v-model="bookModel.bookIsbn" placeholder="请输入 ISBN">el-input>
el-form-item>
el-form-item label="出版社" prop="bookPress">
el-input v-model="bookModel.bookPress" placeholder="请输入出版社">el-input>
el-form-item>
el-form-item label="作者" prop="bookAuthor">
el-input v-model="bookModel.bookAuthor" placeholder="请输入作者">el-input>
el-form-item>
el-form-item label="页数" prop="bookPagination">
el-input v-model.number="bookModel.bookPagination" placeholder="请输入页数">el-input>
el-form-item>
el-form-item label="价格" prop="bookPrice">
el-input v-model="bookModel.bookPrice" placeholder="请输入价格">el-input>
el-form-item>
el-form-item>
el-button type="primary" @click="addBook">保存el-button>
el-form-item>
el-form>
el-drawer>
el-card>
template>
style scoped>
style>
9 普通用户登录
10 管理员登录
原文地址: 6 云图书管理系统 - 图书展示
正文完
