6云图书管理系统-图书展示

1 /src/store中新增userInfo.js，用于保存用户的登录信息

import { defineStore } from "pinia"
import { ref } from 'vue'export const userInfoStore = defineStore('userInfo', () => {//1.定义用户信息const info = ref({})const isAdmin = ref(false)//2.定义修改用户信息的方法const setInfo = (newInfo) => {info.value = newInfoisAdmin.value = newInfo.userRole === 'ADMIN'}//3.定义清空用户信息的方法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)//保存tokenconsole.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组件添加如下代码，用户登录成功之后，在首页获取用户信息，并根据是管理员还是普通用户，实现不同组件显示

// 导入ref
import { ref } from 'vue'
//导入接口函数
import { userInfoGetService } from '@/api/user.js'
//导入pinia
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();//存储piniauseruserInfoStore.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'// 导入ref
import { ref } from 'vue'
//导入接口函数
import { userInfoGetService } from '@/api/user.js'
//导入pinia
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();//存储piniauseruserInfoStore.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 () => {//用户点击了确认//清空pinia中的token和个人信息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中添加图书查询接口

// 导入request.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("收到查询请求");List<Book> 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)// 导入 token
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore()// 添加图书
const addBook = () => {console.log("借书功能");
}
// 写借阅图书的方法 borrowBook
const borrowBook = (bookId) => {console.log("借书功能");
}</script><template><el-card class="page-container"><template #header><div class="header"><!-- <span>图书管理</span> --><!-- 如果isAdmin值为真就显示组件 --><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><!-- 如果是普通用户并且图书状态为0 就显示  row.bookStatus == 0--><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>