菜单 搜索
首页 前端知识 6云图书管理系统-图书展示

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

2024-10-29 11:10:31 前端知识 前端哥 966 172 我要收藏

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 = newInfo
        isAdmin.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)
    //保存token
    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组件添加如下代码，用户登录成功之后，在首页获取用户信息，并根据是管理员还是普通用户，实现不同组件显示

// 导入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();
    //存储pinia
    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'

// 导入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();
    //存储pinia
    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 () => {
                //用户点击了确认
                //清空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>

9 普通用户登录

在这里插入图片描述

10 管理员登录

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/19406.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

nlohmann/json的介绍和使用详解

2024-11-02 11:11:09

使用python读写txt和json（jsonl）大文件

2024-11-02 11:11:02

python将字典数据保存为json文件

2024-11-02 11:11:55

【geojson 各国数据获取指引】

2024-11-02 11:11:55

settings.json：Visual Studio Code的深度定制化核心

2024-11-02 11:11:55

如何使用 Python 批量检测和转换 JSONL 文件编码为 UTF-8

2024-11-02 11:11:19

执行npm run serve 找不到vite模块 Error: Cannot find module

2024-11-02 11:11:16

前端使用 npm install后会报code ERESOLVEERESOLVE unable to resolve dependency tree等导入依赖错误

2024-11-02 11:11:09

问题：无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\npm.ps1，因为在此系统上禁止运行脚本。

2024-11-02 11:11:07

共享依赖的新选择：探索 PNPM 在低代码开发中的威力

2024-11-02 11:11:56

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！