├── public
    └── favicon.ico
├── src
    ├── App.vue
    ├── methods
    │   ├── logout.js
    │   ├── admin.js
    │   ├── register.js
    │   ├── login.js
    │   ├── reader.js
    │   ├── book.js
    │   └── borrow.js
    ├── assets
    │   ├── logo.svg
    │   ├── main.css
    │   └── base.css
    ├── stores
    │   ├── token.js
    │   ├── admin.js
    │   └── reader.js
    ├── main.js
    ├── css
    │   └── main.css
    ├── router
    │   └── index.js
    ├── util
    │   └── request.js
    ├── components
    │   ├── SideView.vue
    │   └── HeaderView.vue
    └── views
    │   ├── UserView.vue
    │   ├── RegisterView.vue
    │   ├── LoginView.vue
    │   ├── BorrowView.vue
    │   ├── admin
    │       ├── ReaderView.vue
    │       └── AdminBookView.vue
    │   └── BookView.vue
├── jsconfig.json
├── .eslintrc.cjs
├── vue3-vite.iml
├── index.html
├── .gitignore
├── package.json
├── LICENSE
├── vite.config.js
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caolib/vue3-vite/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <script setup>
2 | import { RouterView } from 'vue-router'
3 | </script>
4 | 
5 | <template>
6 |   <RouterView/>
7 | </template>
8 | 
9 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./src/*"]
5 |     }
6 |   },
7 |   "exclude": ["node_modules", "dist"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/methods/logout.js:
--------------------------------------------------------------------------------
 1 | import request from "@/util/request.js";
 2 | // 用户退出登录
 3 | const logoutService = function () {
 4 |     // 调用后端接口清除redis中的令牌
 5 |     return request.delete('/logout');
 6 | }
 7 | 
 8 | export {logoutService}
 9 | 
10 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | module.exports = {
 3 |   root: true,
 4 |   'extends': [
 5 |     'plugin:vue/vue3-essential',
 6 |     'eslint:recommended'
 7 |   ],
 8 |   parserOptions: {
 9 |     ecmaVersion: 'latest'
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/methods/admin.js:
--------------------------------------------------------------------------------
 1 | import request from "@/util/request";
 2 | 
 3 | 
 4 | /**
 5 |  * 更新管理员信息
 6 |  */
 7 | const updateAdminService = function (admin) {
 8 |     return request.put('/admin/update',admin);
 9 | };
10 | 
11 | export {updateAdminService};


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/methods/register.js:
--------------------------------------------------------------------------------
 1 | import request from "@/util/request";
 2 | // 读者注册
 3 | const registerService = function (reader) {
 4 |     return request.post('/reader/register',reader);
 5 | };
 6 | 
 7 | // 管理员注册
 8 | const adminRegisterService = (admin)=>{
 9 |     return request.post('/admin/register',admin)
10 | }
11 | 
12 | export {registerService,adminRegisterService};


--------------------------------------------------------------------------------
/src/methods/login.js:
--------------------------------------------------------------------------------
 1 | import request from "@/util/request";
 2 | 
 3 | // 读者登录
 4 | const loginService = function (reader) {
 5 |     return request.post('/reader/login', reader);
 6 | };
 7 | 
 8 | // 管理员登录
 9 | const adminLoginService = function (admin) {
10 |     return request.post('/admin/login', admin);
11 | }
12 | 
13 | 
14 | export {loginService, adminLoginService};


--------------------------------------------------------------------------------
/vue3-vite.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
4 |     <exclude-output />
5 |     <content url="file://$MODULE_DIR$" />
6 |     <orderEntry type="inheritedJdk" />
7 |     <orderEntry type="sourceFolder" forTests="false" />
8 |   </component>
9 | </module>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <link rel="icon" href="/favicon.ico">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>图书借阅管理系统</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <script type="module" src="/src/main.js"></script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 
30 | *.tsbuildinfo
31 | 


--------------------------------------------------------------------------------
/src/methods/reader.js:
--------------------------------------------------------------------------------
 1 | import request from "@/util/request";
 2 | 
 3 | // 修改用户信息
 4 | const updateReaderService = function (reader) {
 5 |     return request.post('/reader/update', reader);
 6 | };
 7 | 
 8 | // 查询所有用户信息
 9 | const getAllReaderService = (condition) => {
10 |     return request.post('/reader', condition);
11 | }
12 | 
13 | 
14 | // 根据id删除读者信息
15 | const deleteReaderService = (id) => {
16 |     return request.delete('/reader/' + id);
17 | }
18 | export {
19 |     updateReaderService,
20 |     getAllReaderService,
21 |     deleteReaderService
22 | };


--------------------------------------------------------------------------------
/src/methods/book.js:
--------------------------------------------------------------------------------
 1 | import request from "@/util/request";
 2 | // 条件分页查询
 3 | const getAllBookService = function (condition) {
 4 |     return request.post("/book", condition);
 5 | };
 6 | 
 7 | // 添加书籍
 8 | const addBookService = (book)=>{
 9 |     return request.post("/book/add", book);
10 | }
11 | 
12 | // 删除书籍
13 | const deleteBookService = (isbn)=>{
14 |     return request.delete("/book/"+isbn);
15 | }
16 | 
17 | // 更新书籍信息
18 | const updateBookService = (book)=>{
19 |     return request.put("/book",book)
20 | }
21 | 
22 | export {getAllBookService,addBookService,deleteBookService,updateBookService};
23 | 


--------------------------------------------------------------------------------
/src/stores/token.js:
--------------------------------------------------------------------------------
 1 | import {defineStore} from "pinia";
 2 | import {ref} from 'vue';
 3 | 
 4 | export const useTokenStore = defineStore('token', () => {
 5 |         //1.定义描述token
 6 |         const token = ref('')
 7 |         //2.定义修改token的方法
 8 |         const setToken = (newToken) => {
 9 |             token.value = newToken
10 |         }
11 |         //3.定义移除token的方法
12 |         const removeToken = () => {
13 |             token.value = ''
14 |         }
15 |         return {
16 |             token, setToken, removeToken
17 |         }
18 |     },
19 |     {
20 |         //使用persis插件持久化
21 |         persis: true
22 |     }
23 | )


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0 auto;
 6 |   padding: 2rem;
 7 |   font-weight: normal;
 8 | }
 9 | 
10 | a,
11 | .green {
12 |   text-decoration: none;
13 |   color: hsla(160, 100%, 37%, 1);
14 |   transition: 0.4s;
15 |   padding: 3px;
16 | }
17 | 
18 | @media (hover: hover) {
19 |   a:hover {
20 |     background-color: hsla(160, 100%, 37%, 0.2);
21 |   }
22 | }
23 | 
24 | @media (min-width: 1024px) {
25 |   body {
26 |     display: flex;
27 |     place-items: center;
28 |   }
29 | 
30 |   #app {
31 |     display: grid;
32 |     grid-template-columns: 1fr 1fr;
33 |     padding: 0 2rem;
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import "./assets/main.css";
 2 | 
 3 | import { createApp } from "vue";
 4 | import App from "./App.vue";
 5 | import router from "@/router";
 6 | import ElementPlus from "element-plus";
 7 | import "element-plus/dist/index.css";
 8 | import "element-plus/theme-chalk/dark/css-vars.css";
 9 | import "@/css/main.css";
10 | 
11 | import { createPinia } from "pinia";
12 | import { createPersistedState } from "pinia-persistedstate-plugin";
13 | 
14 | // 导入element-plus中文语言
15 | import zhCn from "element-plus/dist/locale/zh-cn.mjs";
16 | 
17 | const app = createApp(App);
18 | 
19 | // 使用pinia和persist保存状态并持久化
20 | const pinia = createPinia();
21 | const persist = createPersistedState();
22 | pinia.use(persist);
23 | 
24 | app.use(ElementPlus, { locale: zhCn });
25 | app.use(router);
26 | app.use(pinia);
27 | 
28 | app.mount("#app");
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-project",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview",
10 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
11 |   },
12 |   "dependencies": {
13 |     "@element-plus/icons-vue": "^2.3.1",
14 |     "@vueuse/core": "^10.7.1",
15 |     "axios": "^1.6.5",
16 |     "element-plus": "^2.4.4",
17 |     "pinia": "^2.1.7",
18 |     "pinia-persistedstate-plugin": "^0.1.0",
19 |     "vue": "^3.3.11",
20 |     "vue-router": "^4.2.5",
21 |     "vuex": "^4.0.2"
22 |   },
23 |   "devDependencies": {
24 |     "@vitejs/plugin-vue": "^4.5.2",
25 |     "eslint": "^8.49.0",
26 |     "eslint-plugin-vue": "^9.17.0",
27 |     "unplugin-auto-import": "^0.17.3",
28 |     "unplugin-vue-components": "^0.26.0",
29 |     "vite": "^5.1.2"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/stores/admin.js:
--------------------------------------------------------------------------------
 1 | import {defineStore} from "pinia";
 2 | import {ref} from 'vue';
 3 | 
 4 | /**
 5 |  * 保存登录时的管理员信息
 6 |  */
 7 | export const useAdminStore = defineStore('admin', () => {
 8 |         const admin = ref({
 9 |             id: '',
10 |             username: '',
11 |             nickname: '',
12 |             token:''
13 |         });
14 |         // 是否为管理员
15 |         let isAdmin = ref();
16 |         const setIsAdmin = (flag)=>{
17 |             isAdmin.value = flag;
18 |         }
19 |         const setAdmin = (data) => {
20 |             admin.value = data;
21 |         }
22 |         //清除信息
23 |         const clearAdmin = ()=>{
24 |             admin.value.id = '';
25 |             admin.value.username = '';
26 |             admin.value.nickname = '';
27 |             admin.value.token = '';
28 |         }
29 | 
30 |         return {
31 |             admin, setAdmin,isAdmin,setIsAdmin,clearAdmin
32 |         }
33 |     },
34 |     // 持久化，pinia保存在内存中，刷新即丢失
35 |     {
36 |         persis: true
37 |     }
38 | )
39 | 


--------------------------------------------------------------------------------
/src/stores/reader.js:
--------------------------------------------------------------------------------
 1 | import {defineStore} from "pinia";
 2 | import {ref} from 'vue';
 3 | 
 4 | /**
 5 |  * 保存登录时用户的信息
 6 |  */
 7 | export const useReaderStore = defineStore('reader', () => {
 8 |         const reader = ref({
 9 |             id: '',
10 |             username: '',
11 |             nickname: '',
12 |             gender: '',
13 |             age: '',
14 |             tel: '',
15 |             token: ''
16 |         });
17 |         const setReader = (data) => {
18 |             reader.value = data;
19 |         }
20 |         //清除信息
21 |         const clearReader = () => {
22 |             reader.value.id = '';
23 |             reader.value.username = '';
24 |             reader.value.nickname = '';
25 |             reader.value.gender = '';
26 |             reader.value.age = '';
27 |             reader.value.tel = '';
28 |             reader.value.token = '';
29 |         }
30 |         return {
31 |             reader, setReader, clearReader
32 |         }
33 |     },
34 |     {
35 |         persis: true
36 |     }
37 | )
38 | 


--------------------------------------------------------------------------------
/src/css/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   /*背景图片*/
 3 |   background-image: url("https://dogefs.s3.ladydaily.com/~/source/wallhaven/full/jx/wallhaven-jxl3qp.jpg?w=2560&h=1440&fmt=webp");
 4 |   background-repeat: no-repeat;
 5 |   background-size: cover;
 6 | }
 7 | 
 8 | body::after {
 9 |   content: "";
10 |   position: absolute;
11 |   top: 0;
12 |   right: 0;
13 |   bottom: 0;
14 |   left: 0;
15 |   background: rgba(0, 0, 0, 0.2); /* 这里的0.5是遮罩的透明度*/
16 |   z-index: -1;
17 | }
18 | 
19 | #checkTheme {
20 |   background-color: rgba(0, 0, 0, 0);
21 | }
22 | 
23 | /* 表格添加圆角 */
24 | .el-table {
25 |   opacity: 0.75;
26 |   border-radius: 10px; /* 圆角半径 */
27 |   overflow: hidden; /* 隐藏超出边界的内容 */
28 |   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
29 | }
30 | 
31 | .el-header {
32 |   height: 550px;
33 |   border-top-left-radius: 10px;
34 |   border-top-right-radius: 10px;
35 |   overflow: hidden;
36 | }
37 | 
38 | .el-aside {
39 |   border-bottom-left-radius: 10px;
40 |   overflow: hidden;
41 |   height: 550px;
42 | }
43 | 
44 | .el-dialog {
45 |   border-radius: 20px;
46 | }
47 | 


--------------------------------------------------------------------------------
/src/methods/borrow.js:
--------------------------------------------------------------------------------
 1 | import request from "@/util/request";
 2 | 
 3 | // 查询个人的借书记录
 4 | const getBorrowByReaderIdService = function () {
 5 |     return request.get('/borrow');
 6 | };
 7 | 
 8 | //借书
 9 | const borrowService = function (isbn, dueDate) {
10 |     return request.get('/borrow/borrowBook', {
11 |         params: {
12 |             isbn: isbn,
13 |             dueDate: dueDate
14 |         }
15 |     });
16 | };
17 | // 还书
18 | const returnBookService = function (id, isbn) {
19 |     console.log(id);
20 |     return request.get('/borrow/returnBook', {
21 |         params: {
22 |             id: id,
23 |             isbn: isbn
24 |         }
25 |     });
26 | };
27 | 
28 | // 删除借书记录
29 | const deleteByIdService = function (id) {
30 |     return request.delete('/borrow', {
31 |         params: {id: id},
32 |     });
33 | };
34 | 
35 | //批量删除借阅记录
36 | const deleteBorrowBatchService = function (ids) {
37 |     return request.post('/borrow/batch', ids);
38 | };
39 | 
40 | export {
41 |     getBorrowByReaderIdService,
42 |     borrowService,
43 |     returnBookService,
44 |     deleteByIdService,
45 |     deleteBorrowBatchService
46 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 LiBin Cao
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from "node:url";
 2 | 
 3 | import { defineConfig } from "vite";
 4 | import vue from "@vitejs/plugin-vue";
 5 | import AutoImport from "unplugin-auto-import/vite";
 6 | import Components from "unplugin-vue-components/vite";
 7 | import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 8 | 
 9 | // https://vitejs.dev/config/
10 | export default defineConfig({
11 |   plugins: [
12 |     vue(),
13 |     AutoImport({
14 |       resolvers: [ElementPlusResolver()],
15 |     }),
16 |     Components({
17 |       resolvers: [ElementPlusResolver()],
18 |     }),
19 |   ],
20 |   resolve: {
21 |     alias: {
22 |       "@": fileURLToPath(new URL("./src", import.meta.url)),
23 |     },
24 |   },
25 |   //代理http请求，解决跨域问题
26 |   server: {
27 |     // host: '192.168.0.66',
28 |     // 前端地址
29 |     host: "localhost",
30 |     port: 5173,
31 |     proxy: {
32 |       "/api": {
33 |         //匹配请求路径中含有 /api 的请求
34 |         // target: 'http://47.115.226.138:8080', //后端服务地址
35 |         target: "http://laptop:10086", //后端服务地址
36 |         changeOrigin: true,
37 |         rewrite: (path) => path.replace(/^\/api/, ""), //去除路径中的/api，还原请求路径
38 |       },
39 |     },
40 |   },
41 | });
42 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import {createRouter, createWebHistory} from "vue-router";
 2 | 
 3 | const router = createRouter({
 4 |     history: createWebHistory(import.meta.env.BASE_URL),
 5 |     routes: [
 6 |         {
 7 |             path: "/",
 8 |             name: "home",
 9 |             component: () => import("../views/LoginView.vue"),
10 |         },
11 |         {
12 |             path: "/book",
13 |             name: "book",
14 |             component: () => import("../views/BookView.vue"),
15 |         },
16 |         {
17 |             path: "/admin/book",
18 |             name: "adminBorrow",
19 |             component: () => import("../views/admin/AdminBookView.vue"),
20 |         },
21 |         {
22 |             path: "/login",
23 |             name: "login",
24 |             component: () => import("../views/LoginView.vue"),
25 |         },
26 |         {
27 |             path: "/register",
28 |             name: "register",
29 |             component: () => import("../views/RegisterView.vue"),
30 |         },
31 |         {
32 |             path: "/user",
33 |             name: "user",
34 |             component: () => import("../views/UserView.vue"),
35 |         },
36 |         {
37 |             path: "/borrow",
38 |             name: "borrow",
39 |             component: () => import("../views/BorrowView.vue"),
40 |         },
41 |         {
42 |             path: "/reader",
43 |             name: "reader",
44 |             component: () => import("../views/admin/ReaderView.vue"),
45 |         },
46 |     ],
47 | });
48 | 
49 | export default router;
50 | 


--------------------------------------------------------------------------------
/src/util/request.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import {ElMessage} from "element-plus";
 3 | import router from "@/router";
 4 | import {useTokenStore} from "@/stores/token.js";
 5 | 
 6 | const baseURL = "/api";
 7 | const instance = axios.create({baseURL});
 8 | const tokenStore = useTokenStore();
 9 | 
10 | 
11 | //响应拦截器，状态码为2xx时执行成功回调，否则执行失败回调
12 | instance.interceptors.response.use(
13 |     //成功回调
14 |     (result) => {
15 |         // 如果状态码为0，后端发生异常
16 |         if (result.data.code === 0) {
17 |             ElMessage.error(result.data.msg);
18 |             return Promise.reject(result);
19 |         }
20 |         return result.data;
21 |     },
22 |     //失败回调
23 |     (error) => {
24 |         const code = error.response.status;
25 |         switch (code) {
26 |             case 401:
27 |                 ElMessage({message: '请先登录！', type: "error",});
28 |                 break;
29 |             case 419:
30 |                 ElMessage.error("身份已过期,请重新登录！");
31 |                 break;
32 |             default:
33 |                 ElMessage.error("服务器异常！" + code);
34 |                 break;
35 |         }
36 |         router.push('/login');
37 |         window.local.reload();
38 | 
39 | 
40 |         // 将异步的状态设置为失败状态
41 |         return Promise.reject(error);
42 |     }
43 | );
44 | 
45 | // 请求拦截器
46 | instance.interceptors.request.use(
47 |     (config) => {
48 |         //登录请求不需要token
49 |         if (config.url.endsWith('/login') || config.url.endsWith('/register')) {
50 |             return config;
51 |         }
52 |         //如果有token，将token放入请求头中
53 |         const token = tokenStore.token;
54 |         if (token != null) {
55 |             config.headers['token'] = token;
56 |         } else {
57 |             router.push('/login');
58 |             ElMessage({message: '请先登录！', type: "error",});
59 |             return Promise.reject('token不存在！');
60 |         }
61 |         return config;
62 |     },
63 |     (err) => {
64 |         //请求错误的回调
65 |         return Promise.reject(err);
66 |     }
67 | );
68 | 
69 | export default instance;
70 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Typing SVG](https://readme-typing-svg.herokuapp.com?font=cascadia+code&size=38&duration=3500&pause=1000&color=00ADFF&center=true&vCenter=true&random=false&width=1000&height=100&lines=Book+lending+management+system;图书借阅管理系统)](https://git.io/typing-svg)
 2 | 
 3 | <div style="text-align: center;">
 4 |   <img src="https://img.shields.io/github/v/release/tankingcao/vue3-vite?include_prereleases&display_name=release&labelColor=red&cacheSeconds=3600" alt="GitHub Release"/>
 5 |   <img src="https://img.shields.io/badge/vue-v3.3.11-blue?style=plastic&logo=vue.js&logoColor=%234FC08D&labelColor=white" alt="Vue"/>
 6 |   <img src="https://img.shields.io/badge/ElementPlus-v2.3.1-blue?style=plastic&labelColor=white" alt="ElementPlus"/>
 7 |   <img src="https://img.shields.io/badge/Axios-v1.6.5-white?style=plastic&logo=axios&logoColor=%235A29E4" alt="Axios"/>
 8 |   <img src="https://img.shields.io/badge/nodejs-blue?logo=node.js&logoColor=green&labelColor=white" alt="Node.js"/>
 9 |   <img src="https://img.shields.io/badge/vite-blue?logo=vite&logoColor=green&labelColor=white" alt="Vite"/>
10 |   <img src="https://img.shields.io/badge/pinia-red" alt="Pinia"/>
11 | </div>
12 | 
13 | > [!important]
14 | >
15 | > 简介：图书借阅管理系统前端，使用vue3框架
16 | >
17 | > **这是对应的 [后端项目地址](https://github.com/caolib/java_design)**
18 | 
19 | ## 快速使用
20 | 
21 | ### 1.进入项目根目录，使用npm命令下载项目所需的依赖模块
22 | 
23 | > [!caution]
24 | >
25 | > :boom:**注意：要先安装nodejs，最好以管理员身份执行命令！！！**:boom:
26 | 
27 | ```cmd
28 | npm install
29 | ```
30 | 
31 | ### 2.修改配置文件
32 | 
33 | 打开`vite.config.js`文件,可以自行修改前端地址，也可以修改向后端请求的地址，但是要相应地修改后端项目的启动路径
34 | 
35 | ```js
36 | //代理http请求，解决跨域问题
37 | server: {
38 |     // 前端项目启动路径，localhost:5173
39 |     host: 'localhost',
40 |     port: 5173,
41 |     proxy: {
42 |         '/api': { //匹配请求路径中含有 /api 的请求
43 |             target: 'http://localhost:8080', //后端服务地址
44 |             changeOrigin: true,
45 |             rewrite: (path) => path.replace(/^\/api/, '') //去除路径中的/api，还原请求路径
46 |         }
47 |     }
48 | },
49 | ```
50 | 
51 | ### 3.执行命令，启动项目
52 | 
53 | ```cmd
54 | npm run dev
55 | ```
56 | 
57 | ## 项目目录结构
58 | 
59 | - `components`：公共组件，包括顶部导航和侧栏
60 | - `css`：全局样式
61 | - `methods`：前端所有向后端发送的请求api
62 | - `router`：界面路由
63 | - `stores`：pinia存储
64 | - `util`：工具方法
65 | - `views`：页面
66 | - `main.js`：入口文件，app的初始化
67 | - `package.json`：项目的各种依赖，执行脚本等
68 | - `vite.config.js`：项目配置文件
69 | 
70 | ![image](https://github.com/user-attachments/assets/5f309b3a-f6cc-4cd1-90e5-29927150b2bf)
71 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --vt-c-white: #ffffff;
 4 |   --vt-c-white-soft: #f8f8f8;
 5 |   --vt-c-white-mute: #f2f2f2;
 6 | 
 7 |   --vt-c-black: #181818;
 8 |   --vt-c-black-soft: #222222;
 9 |   --vt-c-black-mute: #282828;
10 | 
11 |   --vt-c-indigo: #2c3e50;
12 | 
13 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 | 
18 |   --vt-c-text-light-1: var(--vt-c-indigo);
19 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 |   --vt-c-text-dark-1: var(--vt-c-white);
21 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 | 
24 | /* semantic color variables for this project */
25 | :root {
26 |   --color-background: var(--vt-c-white);
27 |   --color-background-soft: var(--vt-c-white-soft);
28 |   --color-background-mute: var(--vt-c-white-mute);
29 | 
30 |   --color-border: var(--vt-c-divider-light-2);
31 |   --color-border-hover: var(--vt-c-divider-light-1);
32 | 
33 |   --color-heading: var(--vt-c-text-light-1);
34 |   --color-text: var(--vt-c-text-light-1);
35 | 
36 |   --section-gap: 160px;
37 | }
38 | 
39 | @media (prefers-color-scheme: dark) {
40 |   :root {
41 |     --color-background: var(--vt-c-black);
42 |     --color-background-soft: var(--vt-c-black-soft);
43 |     --color-background-mute: var(--vt-c-black-mute);
44 | 
45 |     --color-border: var(--vt-c-divider-dark-2);
46 |     --color-border-hover: var(--vt-c-divider-dark-1);
47 | 
48 |     --color-heading: var(--vt-c-text-dark-1);
49 |     --color-text: var(--vt-c-text-dark-2);
50 |   }
51 | }
52 | 
53 | *,
54 | *::before,
55 | *::after {
56 |   box-sizing: border-box;
57 |   margin: 0;
58 |   font-weight: normal;
59 | }
60 | 
61 | body {
62 |   min-height: 100vh;
63 |   color: var(--color-text);
64 |   background: var(--color-background);
65 |   transition:
66 |     color 0.5s,
67 |     background-color 0.5s;
68 |   line-height: 1.6;
69 |   font-family:
70 |     Inter,
71 |     -apple-system,
72 |     BlinkMacSystemFont,
73 |     'Segoe UI',
74 |     Roboto,
75 |     Oxygen,
76 |     Ubuntu,
77 |     Cantarell,
78 |     'Fira Sans',
79 |     'Droid Sans',
80 |     'Helvetica Neue',
81 |     sans-serif;
82 |   font-size: 15px;
83 |   text-rendering: optimizeLegibility;
84 |   -webkit-font-smoothing: antialiased;
85 |   -moz-osx-font-smoothing: grayscale;
86 | }
87 | 


--------------------------------------------------------------------------------
/src/components/SideView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-menu v-model="activeIndex" class="el-menu-vertical-demo">
 3 |     <el-menu-item index="1" @click="route">
 4 |       <el-icon>
 5 |         <Notebook/>
 6 |       </el-icon>
 7 |       <el-button link :type="'primary'">图书信息</el-button>
 8 |     </el-menu-item>
 9 | 
10 |     <el-menu-item
11 |         v-if="!adminStore.isAdmin"
12 |         index="2"
13 |         @click="router.push('/borrow')"
14 |     >
15 |       <el-icon>
16 |         <search/>
17 |       </el-icon>
18 |       <el-button link :type="'primary'">借阅记录</el-button>
19 |     </el-menu-item>
20 | 
21 |     <el-menu-item index="3" @click="router.push('/user')">
22 |       <el-icon>
23 |         <User/>
24 |       </el-icon>
25 |       <el-button link :type="'primary'">个人信息</el-button>
26 |     </el-menu-item>
27 | 
28 |     <el-menu-item
29 |         v-if="adminStore.isAdmin"
30 |         index="4"
31 |         @click="router.push('/reader')"
32 |     >
33 |       <el-icon>
34 |         <setting/>
35 |       </el-icon>
36 |       <el-button link :type="'primary'">用户管理</el-button>
37 |     </el-menu-item>
38 | 
39 |     <el-menu-item index="5" @click="logout">
40 |       <el-icon>
41 |         <switch-button/>
42 |       </el-icon>
43 |       <el-button link :type="'danger'">退出登录</el-button>
44 |     </el-menu-item>
45 |   </el-menu>
46 | </template>
47 | 
48 | <script lang="ts" setup>
49 | import {Notebook, Search, Setting, SwitchButton, User} from "@element-plus/icons-vue";
50 | 
51 | import {ref} from "vue";
52 | 
53 | const activeIndex = ref("1");
54 | 
55 | import {useRouter} from "vue-router";
56 | import {useTokenStore} from "@/stores/token";
57 | import {useReaderStore} from "@/stores/reader";
58 | import {useAdminStore} from "@/stores/admin";
59 | import {logoutService} from "@/methods/logout.js";
60 | import {ElMessage} from "element-plus";
61 | 
62 | 
63 | const adminStore = useAdminStore();
64 | const tokenStore = useTokenStore();
65 | const readerStore = useReaderStore();
66 | 
67 | const router = useRouter();
68 | 
69 | const logout = async () => {
70 |   await logoutService();
71 |   ElMessage.success("已退出登录!")
72 |   // 退出后清除token、reader和admin信息
73 |   tokenStore.setToken(null);
74 |   readerStore.clearReader();
75 |   adminStore.clearAdmin();
76 |   await router.push("/login");
77 | };
78 | 
79 | const route = () => {
80 |   if (adminStore.isAdmin) {
81 |     router.push("/admin/book");
82 |   } else {
83 |     router.push("/book");
84 |   }
85 | };
86 | </script>
87 | 
88 | 
89 | 


--------------------------------------------------------------------------------
/src/components/HeaderView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {useDark} from "@vueuse/core";
  3 | import {useReaderStore} from "@/stores/reader.js";
  4 | import {useAdminStore} from "@/stores/admin.js";
  5 | import {ref} from "vue";
  6 | import {Link, Moon, Sunny, SwitchButton} from "@element-plus/icons-vue";
  7 | import router from "@/router/index.js";
  8 | import {logoutService} from "@/methods/logout.js";
  9 | import {ElMessage} from "element-plus";
 10 | import {useTokenStore} from "@/stores/token.js";
 11 | 
 12 | 
 13 | const adminStore = useAdminStore();
 14 | const readerStore = useReaderStore();
 15 | const tokenStore = useTokenStore();
 16 | 
 17 | const isAdmin = adminStore.isAdmin;
 18 | 
 19 | //显示名字标签
 20 | let tag = ref();
 21 | tag.value = isAdmin ? adminStore.admin.nickname : readerStore.reader.nickname;
 22 | 
 23 | // 切换深浅色
 24 | const isDark = useDark();
 25 | 
 26 | // 头像下拉菜单命令
 27 | const handleCommand = async (command) => {
 28 |   switch (command) {
 29 |       // 退出登录
 30 |     case "logout":
 31 |       await logoutService();
 32 |       ElMessage.success("已退出登录!")
 33 |       // 退出后清除token、reader和admin信息
 34 |       tokenStore.setToken(null);
 35 |       readerStore.clearReader();
 36 |       adminStore.clearAdmin();
 37 |       await router.push("/login");
 38 |       break;
 39 |       // 跳转到前端项目
 40 |     case "frontend":
 41 |       window.open("https://github.com/TankingCao/vue3-vite");
 42 |       break;
 43 |       // 跳转到后端项目
 44 |     case "backend":
 45 |       window.open("https://github.com/TankingCao/java_design");
 46 |       break;
 47 |   }
 48 | };
 49 | 
 50 | // 头像图片
 51 | const url = ref("https://pic.imgdb.cn/item/65a271fe871b83018a8f9a8f.gif");
 52 | </script>
 53 | 
 54 | <template>
 55 |   <div class="demo-fit header-view">
 56 |     <el-menu mode="horizontal">
 57 |       <!--头像-->
 58 |       <el-dropdown @command="handleCommand">
 59 |         <el-menu-item index="1">
 60 |           <el-avatar
 61 |               @click="router.push('/user')"
 62 |               shape="square"
 63 |               :size="42"
 64 |               :fit="'cover'"
 65 |               :src="url"
 66 |           />
 67 |         </el-menu-item>
 68 |         <template #dropdown>
 69 |           <el-dropdown-menu>
 70 |             <el-dropdown-item command="frontend">
 71 |               <el-button link type="primary" :icon="Link">前端项目</el-button>
 72 |             </el-dropdown-item>
 73 | 
 74 |             <el-dropdown-item command="backend">
 75 |               <el-button link type="primary" :icon="Link">后端项目</el-button>
 76 |             </el-dropdown-item>
 77 | 
 78 |             <el-dropdown-item command="logout">
 79 |               <el-button link type="danger" :icon="SwitchButton"
 80 |               >退出登录
 81 |               </el-button
 82 |               >
 83 |             </el-dropdown-item>
 84 |           </el-dropdown-menu>
 85 |         </template>
 86 |       </el-dropdown>
 87 | 
 88 |       <!--昵称标签-->
 89 |       <el-menu-item h="full">
 90 |         <el-tag type="success" size="large" round>
 91 |           {{ tag }}
 92 |         </el-tag>
 93 |       </el-menu-item>
 94 | 
 95 |       <el-menu-item h="full">
 96 |         <el-tag v-if="isAdmin" type="warning" size="large" round>
 97 |           管理员
 98 |         </el-tag>
 99 |         <el-tag v-else size="large" round> 读者</el-tag>
100 |       </el-menu-item>
101 | 
102 |       <!--深浅色图标-->
103 |       <el-menu-item>
104 |         <el-switch
105 |             v-model="isDark"
106 |             size="large"
107 |             :active-action-icon="Moon"
108 |             :inactive-action-icon="Sunny"
109 |             style="
110 |             --el-switch-on-color: rgba(19, 206, 102, 0.7);
111 |             --el-switch-off-color: rgb(74,163,252);
112 |           "
113 |         />
114 |       </el-menu-item>
115 |     </el-menu>
116 |   </div>
117 | </template>
118 | 


--------------------------------------------------------------------------------
/src/views/UserView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useReaderStore } from "@/stores/reader.js";
  3 | import { ref } from "vue";
  4 | import router from "@/router/index.js";
  5 | import { updateReaderService } from "@/methods/reader.js";
  6 | import { ElMessage } from "element-plus";
  7 | import HeaderView from "@/components/HeaderView.vue";
  8 | import { useAdminStore } from "@/stores/admin.js";
  9 | import { updateAdminService } from "@/methods/admin.js";
 10 | 
 11 | const adminStore = useAdminStore();
 12 | const isAdmin = adminStore.isAdmin;
 13 | const admin = adminStore.admin;
 14 | const readerStore = useReaderStore();
 15 | 
 16 | let reader;
 17 | let isMan;
 18 | 
 19 | if (!isAdmin) {
 20 |   reader = readerStore.reader;
 21 |   isMan = ref(reader.gender === "男");
 22 | }
 23 | 
 24 | const saveReader = async () => {
 25 |   await updateReaderService(reader);
 26 |   router.push("/book");
 27 |   ElMessage.success("已保存");
 28 | };
 29 | 
 30 | const updateAdmin = async () => {
 31 |   console.log(admin);
 32 |   await updateAdminService(admin);
 33 |   ElMessage.success("已保存");
 34 |   router.push("/book");
 35 | };
 36 | </script>
 37 | 
 38 | <template>
 39 |   <el-container>
 40 |     <!--侧栏-->
 41 |     <el-aside width="200px">
 42 |       <!--<side-view/>-->
 43 |     </el-aside>
 44 |     <el-container>
 45 |       <el-header>
 46 |         <header-view />
 47 |       </el-header>
 48 |       <el-main>
 49 |         <!--读者个人信息-->
 50 |         <el-form
 51 |           v-if="!isAdmin"
 52 |           ref="ruleFormRef"
 53 |           :model="reader"
 54 |           status-icon
 55 |           label-width="120px"
 56 |           class="centered-form"
 57 |         >
 58 |           <el-form-item class="form-row">
 59 |             <h2>个人信息</h2>
 60 |           </el-form-item>
 61 | 
 62 |           <el-form-item label="用户名" class="form-row">
 63 |             <el-input v-model="reader.username" disabled />
 64 |           </el-form-item>
 65 | 
 66 |           <el-form-item label="密码" class="form-row">
 67 |             <el-input v-model="reader.password" />
 68 |           </el-form-item>
 69 | 
 70 |           <el-form-item label="昵称" class="form-row">
 71 |             <el-input v-model="reader.nickname" />
 72 |           </el-form-item>
 73 | 
 74 |           <el-form-item label="年龄" class="form-row">
 75 |             <el-input v-model="reader.age" />
 76 |           </el-form-item>
 77 | 
 78 |           <el-form-item label="电话" class="form-row">
 79 |             <el-input v-model="reader.tel" />
 80 |           </el-form-item>
 81 | 
 82 |           <el-form-item prop="gender" class="form-row">
 83 |             <el-switch
 84 |               v-model="isMan"
 85 |               class="mb-2"
 86 |               style="
 87 |                 --el-switch-on-color: #13ce66;
 88 |                 --el-switch-off-color: #ff4949;
 89 |               "
 90 |               active-text="男"
 91 |               inactive-text="女"
 92 |               @change="reader.gender = isMan ? '男' : '女'"
 93 |             />
 94 |           </el-form-item>
 95 | 
 96 |           <div class="button-row">
 97 |             <el-form-item>
 98 |               <el-button type="primary" @click="saveReader()">保存</el-button>
 99 |               <el-button type="danger" @click="router.push('/book')"
100 |                 >取消</el-button
101 |               >
102 |             </el-form-item>
103 |           </div>
104 |         </el-form>
105 | 
106 |         <!--管理员个人信息-->
107 |         <el-form
108 |           v-if="isAdmin"
109 |           ref="ruleFormRef"
110 |           :model="admin"
111 |           status-icon
112 |           label-width="120px"
113 |           class="centered-form"
114 |         >
115 |           <el-form-item class="form-row">
116 |             <h2>个人信息</h2>
117 |           </el-form-item>
118 |           <el-form-item label="昵称" class="form-row">
119 |             <el-input v-model="admin.nickname" />
120 |           </el-form-item>
121 | 
122 |           <el-form-item label="密码" class="form-row">
123 |             <el-input v-model="admin.password" />
124 |           </el-form-item>
125 |           <div class="button-row">
126 |             <el-form-item>
127 |               <el-button type="primary" @click="updateAdmin">保存</el-button>
128 |               <el-button type="danger" @click="router.push('/admin/book')"
129 |                 >取消</el-button
130 |               >
131 |             </el-form-item>
132 |           </div>
133 |         </el-form>
134 |       </el-main>
135 |     </el-container>
136 |   </el-container>
137 | </template>
138 | 


--------------------------------------------------------------------------------
/src/views/RegisterView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from "vue";
  3 | import router from "@/router";
  4 | import { ElMessage } from "element-plus";
  5 | import { adminRegisterService, registerService } from "@/methods/register.js";
  6 | 
  7 | const isAdmin = ref(false);
  8 | 
  9 | // 注册表单
 10 | const registerForm = ref({
 11 |   username: "",
 12 |   password: "",
 13 |   nickname: "",
 14 |   gender: "男",
 15 |   age: "",
 16 |   tel: "",
 17 | });
 18 | 
 19 | // 表单验证规则
 20 | const formRef = ref();
 21 | const rules = {
 22 |   username: [
 23 |     { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "change" },
 24 |   ],
 25 |   password: [
 26 |     { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "change" },
 27 |   ],
 28 |   tel: [
 29 |     { min: 3, max: 11, message: "长度在 3 到 11 个字符", trigger: "change" },
 30 |   ],
 31 |   nickname: [{ min: 0, max: 16, message: "最长16位", trigger: "change" }],
 32 |   age: [
 33 |     { min: 0, max: 200, message: "年龄在 0 到 200 之间", trigger: "change" },
 34 |     { type: "number", message: "请输入数字" },
 35 |   ],
 36 | };
 37 | 
 38 | // 注册
 39 | const register = async () => {
 40 |   console.log(registerForm.value);
 41 | 
 42 |   if (isAdmin.value) {
 43 |     adminForm.value.username = registerForm.value.username;
 44 |     adminForm.value.password = registerForm.value.password;
 45 |     adminForm.value.nickname = registerForm.value.nickname;
 46 |     await adminRegisterService(adminForm.value);
 47 |   } else {
 48 |     await registerService(registerForm.value);
 49 |   }
 50 | 
 51 |   await router.push("/login");
 52 |   ElMessage.success({
 53 |     message: "注册成功,现在可以登录了！",
 54 |     duration: 2000,
 55 |   });
 56 | };
 57 | 
 58 | let isMan = ref(true);
 59 | 
 60 | // 管理员注册信息
 61 | const adminForm = ref({
 62 |   username: "",
 63 |   password: "",
 64 |   nickname: "",
 65 | });
 66 | </script>
 67 | 
 68 | <template>
 69 |   <!--用户注册表单-->
 70 |   <el-form
 71 |     ref="formRef"
 72 |     :model="registerForm"
 73 |     status-icon
 74 |     :rules="rules"
 75 |     label-width="120px"
 76 |     class="centered-form"
 77 |     title="注册"
 78 |   >
 79 |     <!--用户名-->
 80 |     <el-form-item label="用户名" prop="username" class="form-row" required>
 81 |       <el-input v-model="registerForm.username" />
 82 |     </el-form-item>
 83 |     <!--密码-->
 84 |     <el-form-item label="密码" prop="password" class="form-row" required>
 85 |       <el-input
 86 |         v-model.number="registerForm.password"
 87 |         type="password"
 88 |         show-password
 89 |       />
 90 |     </el-form-item>
 91 |     <!--电话-->
 92 |     <el-form-item
 93 |       v-if="!isAdmin"
 94 |       label="电话"
 95 |       prop="tel"
 96 |       class="form-row"
 97 |       required
 98 |     >
 99 |       <el-input v-model.number="registerForm.tel" />
100 |     </el-form-item>
101 |     <!--昵称-->
102 |     <el-form-item label="昵称" prop="nickname" class="form-row">
103 |       <el-input v-model.number="registerForm.nickname" />
104 |     </el-form-item>
105 |     <!--年龄-->
106 |     <el-form-item v-if="!isAdmin" label="年龄" prop="age" class="form-row">
107 |       <el-input v-model.number="registerForm.age" />
108 |     </el-form-item>
109 |     <!--性别-->
110 |     <el-form-item prop="gender" class="form-row">
111 |       <el-switch
112 |         v-if="!isAdmin"
113 |         class="mb-2"
114 |         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
115 |         v-model="isMan"
116 |         active-text="男"
117 |         inactive-text="女"
118 |         inline-prompt
119 |         @change="registerForm.gender = isMan ? '男' : '女'"
120 |         size="large"
121 |       />
122 | 
123 |       <el-switch
124 |         v-model="isAdmin"
125 |         class="mb-2"
126 |         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #fd8250"
127 |         inline-prompt
128 |         active-text="管理员"
129 |         inactive-text="读者"
130 |         size="large"
131 |       />
132 |     </el-form-item>
133 | 
134 |     <div class="button-row">
135 |       <el-form-item>
136 |         <el-button type="primary" @click="register">注册</el-button>
137 |         <el-button type="success" @click="router.push('/login')"
138 |           >返回</el-button
139 |         >
140 |       </el-form-item>
141 |     </div>
142 |   </el-form>
143 | </template>
144 | 
145 | <style scoped>
146 | .centered-form {
147 |   display: flex;
148 |   justify-content: center;
149 |   align-items: center;
150 |   width: 100%;
151 |   height: 50%;
152 |   margin: 0 auto;
153 |   flex-direction: column;
154 | }
155 | 
156 | .form-row {
157 |   width: 100%;
158 | }
159 | 
160 | .button-row {
161 |   display: flex;
162 |   justify-content: space-between;
163 |   width: 100%;
164 | }
165 | </style>
166 | 


--------------------------------------------------------------------------------
/src/views/LoginView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {reactive, ref} from "vue";
  3 | import {adminLoginService, loginService} from "@/methods/login";
  4 | import router from "@/router";
  5 | import {useTokenStore} from "@/stores/token";
  6 | import {useReaderStore} from "@/stores/reader.js";
  7 | import {ElLoading, ElNotification} from "element-plus";
  8 | import {useAdminStore} from "@/stores/admin.js";
  9 | 
 10 | const adminStore = useAdminStore();
 11 | const readerStore = useReaderStore();
 12 | const tokenStore = useTokenStore();
 13 | 
 14 | const ruleFormRef = ref();
 15 | 
 16 | // 表单校验规则
 17 | const rules = {
 18 |   username: [
 19 |     {min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "change"},
 20 |   ],
 21 | };
 22 | 
 23 | // 返回的用户信息
 24 | let returnReader = reactive({
 25 |   id: "",
 26 |   username: "",
 27 |   nickname: "",
 28 |   gender: "",
 29 |   age: "",
 30 |   tel: "",
 31 |   token: "",
 32 | });
 33 | 
 34 | const loginDto = ref({
 35 |   username: "",
 36 |   password: "",
 37 | });
 38 | const login = async function () {
 39 |   // 显示加载中动画
 40 |   const loading = ElLoading.service({
 41 |     lock: true,
 42 |     text: '长时间加载请刷新页面......',
 43 |     background: 'rgba(0, 0, 0, 0.7)',
 44 |   })
 45 | 
 46 |   const result = await loginService(loginDto.value);
 47 |   returnReader = result.data;
 48 | 
 49 |   // console.log(returnReader);
 50 | 
 51 |   //保存用户信息和token
 52 |   readerStore.setReader(returnReader);
 53 |   tokenStore.setToken(returnReader.token);
 54 |   adminStore.setIsAdmin(false);
 55 | 
 56 |   // 关闭动画
 57 |   loading.close();
 58 | 
 59 |   // console.log("tokenStore:" + tokenStore.token);
 60 | 
 61 |   await router.push("/book");
 62 |   ElNotification.success({
 63 |     title: "登录成功",
 64 |     message: "Hello," + returnReader.nickname,
 65 |     duration: 1500,
 66 |   });
 67 | };
 68 | 
 69 | // 返回的管理员信息
 70 | let returnAdmin = reactive({
 71 |   id: "",
 72 |   username: "",
 73 |   nickname: "",
 74 | });
 75 | const adminLogin = async function () {
 76 |   const result = await adminLoginService(loginDto.value);
 77 |   returnAdmin = result.data;
 78 |   console.log(returnAdmin);
 79 |   //保存管理员信息和token
 80 |   adminStore.setAdmin(returnAdmin);
 81 |   tokenStore.setToken(returnAdmin.token);
 82 |   //设置为管理员视图
 83 |   adminStore.setIsAdmin(true);
 84 | 
 85 |   await router.push("/admin/book");
 86 |   ElNotification.success({
 87 |     title: "登录成功",
 88 |     message: "Hello," + returnAdmin.nickname,
 89 |     duration: 3000,
 90 |   });
 91 | };
 92 | 
 93 | // 提交表单
 94 | const submitForm = async (formEl) => {
 95 |   if (!formEl) return;
 96 |   formEl.validate(async (valid) => {
 97 |     if (valid) {
 98 |       // 判断是否为管理员登录
 99 |       if (isAdmin.value) {
100 |         await adminLogin();
101 |       } else {
102 |         await login();
103 |       }
104 |     } else {
105 |       await router.push("/login");
106 |       return false;
107 |     }
108 |   });
109 | };
110 | 
111 | let isAdmin = ref(false);
112 | </script>
113 | 
114 | <template>
115 |   <!--用户登录表单-->
116 |   <el-form
117 |       ref="ruleFormRef"
118 |       status-icon
119 |       label-width="120px"
120 |       class="centered-form"
121 |       :model="loginDto"
122 |       :rules="rules"
123 |       title="登录"
124 |   >
125 |     <!--用户名-->
126 |     <el-form-item label="用户名" prop="username" class="form-row" required>
127 |       <el-input v-model="loginDto.username"/>
128 |     </el-form-item>
129 |     <!--密码-->
130 |     <el-form-item label="密码" prop="password" class="form-row" required>
131 |       <el-input
132 |           v-model.number="loginDto.password"
133 |           type="password"
134 |           show-password
135 |       />
136 |     </el-form-item>
137 |     <div class="button-row">
138 |       <el-form-item>
139 |         <el-button type="primary" @click="submitForm(ruleFormRef)"
140 |         >登录
141 |         </el-button
142 |         >
143 |         <el-button type="success" @click="router.push('/register')"
144 |         >注册
145 |         </el-button
146 |         >
147 |       </el-form-item>
148 | 
149 |       <el-switch
150 |           v-model="isAdmin"
151 |           class="mb-2"
152 |           style="--el-switch-on-color: #13ce66; --el-switch-off-color: #fd8250"
153 |           inline-prompt
154 |           size="large"
155 |           active-text="管理员"
156 |           inactive-text="读者"
157 |       />
158 |     </div>
159 |   </el-form>
160 | </template>
161 | 
162 | <style scoped>
163 | .centered-form {
164 |   display: flex;
165 |   justify-content: center;
166 |   align-items: center;
167 |   width: 100%;
168 |   max-width: 400px;
169 |   height: 50%;
170 |   margin: 0 auto;
171 |   flex-direction: column;
172 | }
173 | 
174 | .form-row {
175 |   width: 100%;
176 | }
177 | 
178 | .button-row {
179 |   display: flex;
180 |   justify-content: space-between;
181 |   width: 100%;
182 | }
183 | </style>
184 | 


--------------------------------------------------------------------------------
/src/views/BorrowView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {
  3 |   deleteBorrowBatchService,
  4 |   deleteByIdService,
  5 |   getBorrowByReaderIdService,
  6 |   returnBookService
  7 | } from "@/methods/borrow.js";
  8 | import {onMounted, ref} from "vue";
  9 | import HeaderView from "@/components/HeaderView.vue";
 10 | import SideView from "@/components/SideView.vue";
 11 | import {ElMessage} from "element-plus";
 12 | import {Delete} from "@element-plus/icons-vue";
 13 | 
 14 | const tableData = ref([]);
 15 | 
 16 | onMounted(() => {
 17 |   // console.log(new Date().toISOString().split('T')[0]);
 18 |   getBorrowByReaderId();
 19 | })
 20 | 
 21 | // 归还
 22 | const returnBook = async (id, isbn) => {
 23 |   await returnBookService(id, isbn);
 24 |   ElMessage.success('归还成功！');
 25 |   await getBorrowByReaderId();
 26 | }
 27 | 
 28 | // 表格行背景颜色样式类
 29 | const tableRowClassName = ({row}) => {
 30 |   const current = new Date().toISOString().split('T')[0]
 31 |   if (row.status) {
 32 |     if (row.returnDate <= row.dueDate) {
 33 |       return 'success-row';
 34 |     }
 35 |     return 'danger-row'
 36 |   } else {
 37 |     if (current > row.dueDate) {
 38 |       return 'danger-row'
 39 |     }
 40 |     return 'warning-row';
 41 |   }
 42 | }
 43 | 
 44 | //获取当前读者的借阅信息，并根据状态筛选
 45 | const getBorrowByReaderId = async function () {
 46 |   const result = await getBorrowByReaderIdService();
 47 |   tableData.value = result.data;
 48 |   if (filterStatus.value === 'returned') {
 49 |     tableData.value = result.data.filter(item => item.status === true);
 50 |   } else if (filterStatus.value === 'notReturned') {
 51 |     tableData.value = result.data.filter(item => item.status === false);
 52 |   }
 53 | }
 54 | 
 55 | // 刷新状态
 56 | const flushStatus = async function (status) {
 57 |   // console.log(status);
 58 |   filterStatus.value = status;
 59 |   await getBorrowByReaderId();
 60 | }
 61 | const filterStatus = ref('all'); // 'all', 'returned', 'notReturned'
 62 | 
 63 | 
 64 | // 根据id删除借阅记录
 65 | const deleteById = async function (id) {
 66 |   await deleteByIdService(id);
 67 |   ElMessage.success('删除成功！');
 68 |   //刷新表格
 69 |   await getBorrowByReaderId();
 70 | }
 71 | 
 72 | // 全部选中的记录的id
 73 | let ids = ref([]);
 74 | const handleSelectionChange = (val) => {
 75 |   ids.value = val.map(item => item.id);
 76 | }
 77 | 
 78 | const deleteBorrowBatch = async () => {
 79 |   if (ids.value.length === 0) {
 80 |     ElMessage.warning('请先选择要删除的记录！');
 81 |     return;
 82 |   }
 83 |   await deleteBorrowBatchService(ids.value);
 84 |   ElMessage.success('批量删除成功！');
 85 |   await getBorrowByReaderId();
 86 | }
 87 | 
 88 | </script>
 89 | <template>
 90 |   <div>
 91 |     <el-container>
 92 |       <!--侧栏-->
 93 |       <el-aside width="200px">
 94 |         <side-view/>
 95 |       </el-aside>
 96 |       <el-container>
 97 |         <el-header>
 98 |           <header-view/>
 99 |         </el-header>
100 |         <el-main>
101 |           <div style="display: flex; justify-content: space-between;">
102 |             <el-button-group>
103 |               <el-button @click="flushStatus('all')">全部</el-button>
104 |               <el-button @click="flushStatus('returned')" type="success">已归还</el-button>
105 |               <el-button @click="flushStatus('notReturned')" type="danger">未归还</el-button>
106 |             </el-button-group>
107 |             <!--批量删除按钮-->
108 |             <el-button @click="deleteBorrowBatch" type="danger" :icon="Delete"/>
109 | 
110 |           </div>
111 |           <el-row>
112 |             <el-col :span="24">
113 |               <!--借阅表格-->
114 |               <el-table ref="table" :data="tableData" style="width: 100%" height="400"
115 |                         :row-class-name="tableRowClassName"
116 |                         @selection-change="handleSelectionChange">
117 |                 <!--多选框-->
118 |                 <el-table-column v-if="filterStatus==='returned'" type="selection" width="55"/>
119 | 
120 |                 <el-table-column sortable prop="bookName" label="书名" width="150"/>
121 |                 <el-table-column sortable prop="borrowDate" label="借阅日期" width="150"/>
122 |                 <el-table-column sortable prop="dueDate" label="应还日期" width="150"/>
123 |                 <el-table-column sortable prop="returnDate" label="归还日期" width="150"/>
124 |                 <el-table-column sortable prop="status" label="状态" width="100">
125 |                   <template #default="scope">
126 |                     <el-tag v-if="scope.row.status === false" type="danger">未归还</el-tag>
127 |                     <el-tag v-else type="success">已归还</el-tag>
128 |                   </template>
129 |                 </el-table-column>
130 | 
131 |                 <el-table-column label="操作" width="180">
132 |                   <template #default="scope">
133 |                     <el-button link @click="returnBook(scope.row.id,scope.row.isbn)"
134 |                                type="primary" size="small"
135 |                                :disabled="scope.row.status">
136 |                       归还
137 |                     </el-button>
138 |                     <el-button link @click="deleteById(scope.row.id)"
139 |                                :disabled="!scope.row.status" type="danger" size="small">
140 |                       删除记录
141 |                     </el-button>
142 |                   </template>
143 |                 </el-table-column>
144 |               </el-table>
145 |             </el-col>
146 |           </el-row>
147 |         </el-main>
148 |       </el-container>
149 |     </el-container>
150 |   </div>
151 | </template>
152 | 
153 | <style>
154 | .el-table {
155 |   width: 80%; /* 调整为所需的宽度 */
156 |   margin: 0 auto; /* 居中对齐 */
157 |   min-width: 150px;
158 | }
159 | 
160 | .el-table .danger-row {
161 |   --el-table-tr-bg-color: rgba(255, 107, 107, 0.3);
162 | }
163 | 
164 | .el-table .warning-row {
165 |   --el-table-tr-bg-color: rgba(255, 251, 0, 0.3);
166 | }
167 | 
168 | .el-table .success-row {
169 |   --el-table-tr-bg-color: rgba(122, 255, 107, 0.3);
170 | }
171 | </style>
172 | 


--------------------------------------------------------------------------------
/src/views/admin/ReaderView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | 
  3 | import SideView from "@/components/SideView.vue";
  4 | import HeaderView from "@/components/HeaderView.vue";
  5 | import {onMounted, ref} from "vue";
  6 | import {Search} from "@element-plus/icons-vue";
  7 | import {
  8 |   deleteReaderService,
  9 |   getAllReaderService,
 10 |   updateReaderService
 11 | } from "@/methods/reader.js";
 12 | import {ElMessage} from "element-plus";
 13 | 
 14 | const readerTable = ref([]);
 15 | 
 16 | onMounted(() => {
 17 |   getAllReaders();
 18 | })
 19 | 
 20 | // 查询所有读者
 21 | const getAllReaders = async () => {
 22 |   const result = await getAllReaderService(condition.value);
 23 |   readerTable.value = result.data;
 24 | }
 25 | // 查询条件
 26 | const condition = ref({
 27 |   username: '',
 28 |   nickname: '',
 29 |   tel: ''
 30 | })
 31 | 
 32 | // 根据id删除读者
 33 | const deleteById = async function (id) {
 34 |   await deleteReaderService(id);
 35 |   ElMessage.success('删除成功');
 36 |   await getAllReaders();
 37 | }
 38 | 
 39 | // 显示用户信息修改对话框
 40 | const userInfo = ref(false);
 41 | 
 42 | const isMan = ref(true);
 43 | 
 44 | const reader = ref({
 45 |   id: '',
 46 |   username: '',
 47 |   nickname: '',
 48 |   password: '',
 49 |   gender: '',
 50 |   age: '',
 51 |   tel: ''
 52 | })
 53 | 
 54 | const getReader = (row) => {
 55 |   console.log(row);
 56 |   userInfo.value = true;
 57 |   reader.value = row;
 58 |   console.log(reader);
 59 | }
 60 | 
 61 | // 修改读者信息
 62 | const saveReader = async () => {
 63 |   console.log(reader);
 64 | 
 65 |   // await updateReaderByAdminService(reader.value);
 66 |   await updateReaderService(reader.value);
 67 | 
 68 |   ElMessage.success('已保存！');
 69 |   userInfo.value = false;
 70 |   await getAllReaders();
 71 | }
 72 | 
 73 | const handleClose = async ()=>{
 74 |   userInfo.value = false;
 75 |   await getAllReaders();
 76 | }
 77 | 
 78 | </script>
 79 | <!-- -------------------------------------分割线------------------------------- -->
 80 | <template>
 81 |   <div>
 82 |     <el-container>
 83 |       <!--侧栏-->
 84 |       <el-aside width="200px">
 85 |         <side-view/>
 86 |       </el-aside>
 87 |       <el-container>
 88 |         <el-header>
 89 |           <header-view/>
 90 |         </el-header>
 91 |         <el-main>
 92 |           <div style="display: flex; justify-content: space-between;">
 93 |           </div>
 94 |           <el-row>
 95 |             <el-col :span="24">
 96 |               <el-row>
 97 |                 <el-button @click="getAllReaders" :icon="Search" size="large" type="success" circle :span="2"/>
 98 |                 <el-col :span="1"/>
 99 |                 <el-col :span="6">
100 |                   <el-input @input="getAllReaders" v-model="condition.username" size="large" placeholder="用户名"
101 |                             clearable/>
102 |                 </el-col>
103 |                 <el-col :span="1"/>
104 |                 <el-col :span="6">
105 |                   <el-input @input="getAllReaders" v-model="condition.nickname" size="large" placeholder="昵称"
106 |                             clearable/>
107 |                 </el-col>
108 |                 <el-col :span="1"/>
109 |                 <el-col :span="6">
110 |                   <el-input @input="getAllReaders" v-model="condition.tel" size="large" placeholder="电话" clearable/>
111 |                 </el-col>
112 |               </el-row>
113 |               <br>
114 | 
115 |               <!--用户信息表格-->
116 |               <el-table ref="table" :data="readerTable" style="width: 100%" height="400">
117 |                 <el-table-column sortable prop="username" label="用户名" width="150"/>
118 |                 <el-table-column sortable prop="password" label="密码" width="150"/>
119 |                 <el-table-column sortable prop="nickname" label="昵称" width="150"/>
120 |                 <el-table-column sortable prop="gender" label="性别" width="100"/>
121 |                 <el-table-column sortable prop="age" label="年龄" width="80"/>
122 |                 <el-table-column sortable prop="tel" label="电话" width="150"/>
123 |                 <el-table-column label="操作" width="180">
124 |                   <template #default="scope">
125 |                     <el-button @click="getReader(scope.row)" link type="primary" size="small">
126 |                       修改
127 |                     </el-button>
128 |                     <el-button @click="deleteById(scope.row.id)" link type="danger" size="small">
129 |                       删除
130 |                     </el-button>
131 |                   </template>
132 |                 </el-table-column>
133 |               </el-table>
134 | 
135 |               <!--修改用户信息表单-->
136 |               <el-dialog title="用户信息" width="40%" center align-center
137 |                          v-model="userInfo" :before-close="()=>{userInfo.value=false}">
138 |                 <el-form ref="ruleFormRef" :model="reader" status-icon
139 |                          label-width="120px" class="centered-form">
140 | 
141 |                   <el-form-item label="用户名" class="form-row">
142 |                     <el-input v-model="reader.username" disabled/>
143 |                   </el-form-item>
144 | 
145 |                   <el-form-item label="密码" class="form-row">
146 |                     <el-input v-model="reader.password"/>
147 |                   </el-form-item>
148 | 
149 |                   <el-form-item label="昵称" class="form-row">
150 |                     <el-input v-model="reader.nickname"/>
151 |                   </el-form-item>
152 | 
153 |                   <el-form-item label="年龄" class="form-row">
154 |                     <el-input v-model="reader.age"/>
155 |                   </el-form-item>
156 | 
157 |                   <el-form-item prop="gender" class="form-row">
158 |                     <el-switch
159 |                         v-model="isMan"
160 |                         class="mb-2"
161 |                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
162 |                         active-text="男"
163 |                         inactive-text="女"
164 |                         @change="reader.gender = isMan ? '男' : '女'"
165 |                     />
166 |                   </el-form-item>
167 | 
168 |                   <el-form-item label="电话" class="form-row">
169 |                     <el-input v-model="reader.tel"/>
170 |                   </el-form-item>
171 | 
172 |                   <div class="button-row">
173 |                     <el-form-item>
174 |                       <el-button type="primary" @click="saveReader()">保存</el-button>
175 |                       <el-button type="danger" @click="handleClose">取消</el-button>
176 |                     </el-form-item>
177 |                   </div>
178 |                 </el-form>
179 |               </el-dialog>
180 | 
181 |             </el-col>
182 |           </el-row>
183 |         </el-main>
184 |       </el-container>
185 |     </el-container>
186 |   </div>
187 | </template>
188 | 
189 | <style scoped>
190 | 
191 | </style>


--------------------------------------------------------------------------------
/src/views/BookView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { onMounted, ref } from "vue";
  3 | import { getAllBookService } from "@/methods/book.js";
  4 | import SideView from "@/components/SideView.vue";
  5 | import HeaderView from "@/components/HeaderView.vue";
  6 | import { Search } from "@element-plus/icons-vue";
  7 | import { ElMessage } from "element-plus";
  8 | import { borrowService } from "@/methods/borrow.js";
  9 | 
 10 | const tableData = ref([]);
 11 | 
 12 | // 页面加载时获取所有书籍
 13 | onMounted(async () => {
 14 |   loading.value = true;
 15 |   await getAllBooks();
 16 |   loading.value = false;
 17 | });
 18 | 
 19 | // 获取所有书籍
 20 | const getAllBooks = async function () {
 21 |   loading.value = true;
 22 | 
 23 |   const result = await getAllBookService(condition.value);
 24 |   tableData.value = result.data;
 25 |   total.value = result.total;
 26 | 
 27 |   loading.value = false;
 28 | };
 29 | 
 30 | // 搜索条件
 31 | const condition = ref({
 32 |   bookName: null,
 33 |   author: null,
 34 |   isbn: null,
 35 |   number: 0,
 36 |   currentPage: 1,
 37 |   pageSize: 15,
 38 | });
 39 | 
 40 | // 是否显示加载中动画
 41 | const loading = ref(false);
 42 | 
 43 | // 结果总数
 44 | const total = ref(0);
 45 | 
 46 | // 分页大小变化
 47 | const handleSizeChange = (val) => {
 48 |   condition.value.pageSize = val;
 49 |   getAllBooks();
 50 | };
 51 | 
 52 | // 当前页数发生变化
 53 | const handleCurrentChange = (val) => {
 54 |   condition.value.currentPage = val;
 55 |   getAllBooks();
 56 | };
 57 | 
 58 | let detail = ref(false);
 59 | 
 60 | // 显示当前书籍详细信息
 61 | const showDetail = (row) => {
 62 |   detail.value = true;
 63 |   book.value = row;
 64 |   console.log("detail:" + detail.value);
 65 |   console.log(row);
 66 | };
 67 | 
 68 | //书籍信息
 69 | let book = ref({
 70 |   title: null,
 71 |   isbn: null,
 72 |   cover: null,
 73 |   introduction: null,
 74 |   number: 0,
 75 |   author: null,
 76 | });
 77 | 
 78 | // 应该归还的日期
 79 | const dueDate = ref(new Date());
 80 | let showDrawer = ref(false);
 81 | 
 82 | //显示抽屉
 83 | const showBorrow = (row) => {
 84 |   showDrawer.value = true;
 85 |   book.value = row;
 86 | };
 87 | 
 88 | //借阅
 89 | const borrow = async () => {
 90 |   await borrowService(book.value.isbn, dueDate.value);
 91 |   ElMessage.success("借阅成功");
 92 |   showDrawer.value = false;
 93 |   //刷新表格
 94 |   await getAllBooks();
 95 | };
 96 | 
 97 | // 禁止选择当前日期之前的日期
 98 | const disabledDate = (time) => {
 99 |   const today = new Date();
100 |   today.setHours(0, 0, 0, 0);
101 |   return time.getTime() < today.getTime();
102 | };
103 | </script>
104 | <!-- --------------------------------------- 一条朴实的分割线 ----------------------------------------- -->
105 | <template>
106 |   <div>
107 |     <el-container>
108 |       <!--侧栏-->
109 |       <el-aside width="200px">
110 |         <side-view />
111 |       </el-aside>
112 |       <el-container>
113 |         <el-header>
114 |           <header-view />
115 |         </el-header>
116 |         <el-main>
117 |           <el-row>
118 |             <el-col :span="24">
119 |               <!--搜索条件框-->
120 |               <el-row>
121 |                 <el-button
122 |                   @click="getAllBooks"
123 |                   :icon="Search"
124 |                   size="large"
125 |                   type="success"
126 |                   circle
127 |                   :span="2"
128 |                 />
129 |                 <el-col :span="1" />
130 |                 <el-col :span="6">
131 |                   <el-input
132 |                     @input="getAllBooks"
133 |                     v-model="condition.bookName"
134 |                     size="large"
135 |                     placeholder="书名"
136 |                     clearable
137 |                   />
138 |                 </el-col>
139 |                 <el-col :span="1" />
140 |                 <el-col :span="6">
141 |                   <el-input
142 |                     @input="getAllBooks"
143 |                     v-model="condition.author"
144 |                     size="large"
145 |                     placeholder="作者"
146 |                     clearable
147 |                   />
148 |                 </el-col>
149 |                 <el-col :span="1" />
150 |                 <el-col :span="6">
151 |                   <el-input
152 |                     @input="getAllBooks"
153 |                     v-model="condition.isbn"
154 |                     size="large"
155 |                     placeholder="ISBN"
156 |                     clearable
157 |                   />
158 |                 </el-col>
159 |               </el-row>
160 |               <br />
161 | 
162 |               <!--书籍表格-->
163 |               <el-table
164 |                 height="600"
165 |                 :data="tableData"
166 |                 style="width: 100%"
167 |                 v-loading="loading"
168 |                 element-loading-text="玩命加载中......"
169 |               >
170 |                 <el-table-column prop="title" label="书名" width="150" />
171 |                 <el-table-column prop="author" label="作者" width="150" />
172 |                 <el-table-column prop="isbn" label="ISBN" width="150" />
173 |                 <el-table-column
174 |                   sortable
175 |                   prop="number"
176 |                   label="库存量"
177 |                   width="150"
178 |                 />
179 | 
180 |                 <el-table-column label="操作" width="150">
181 |                   <template #default="scope">
182 |                     <el-button
183 |                       link
184 |                       type="primary"
185 |                       size="small"
186 |                       @click="showDetail(scope.row)"
187 |                       >详细信息
188 |                     </el-button>
189 |                     <el-button
190 |                       link
191 |                       type="primary"
192 |                       size="small"
193 |                       @click="showBorrow(scope.row)"
194 |                       :disabled="scope.row.number === 0"
195 |                       >借阅
196 |                     </el-button>
197 |                   </template>
198 |                 </el-table-column>
199 |               </el-table>
200 | 
201 |               <!--借阅图书信息抽屉-->
202 |               <el-drawer v-model="showDrawer">
203 |                 <template #header>
204 |                   <h1>借阅</h1>
205 |                 </template>
206 |                 <el-image
207 |                   style="width: 100px; height: 150px"
208 |                   :src="book.cover"
209 |                   :fit="'fill'"
210 |                 />
211 |                 <h3 style="color: #409eff">选择归还日期</h3>
212 | 
213 |                 <div class="block">
214 |                   <el-date-picker
215 |                     v-model="dueDate"
216 |                     type="datetime"
217 |                     placeholder="选择归还日期"
218 |                     format="YYYY-MM-DD"
219 |                     date-format="MMM DD, YYYY"
220 |                     time-format="HH:mm"
221 |                     :disabled-date="disabledDate"
222 |                   />
223 |                 </div>
224 |                 <template #footer>
225 |                   <div style="flex: auto">
226 |                     <el-button>取消</el-button>
227 |                     <el-button type="primary" @click="borrow">提交</el-button>
228 |                   </div>
229 |                 </template>
230 |               </el-drawer>
231 | 
232 |               <br />
233 | 
234 |               <!--分页组件-->
235 |               <div>
236 |                 <el-pagination
237 |                   v-model:current-page="condition.currentPage"
238 |                   v-model:page-size="condition.pageSize"
239 |                   :page-sizes="[5, 8, 10, 15, 30, 50, 100]"
240 |                   :background="true"
241 |                   layout="total, sizes, prev, pager, next, jumper"
242 |                   :total="total"
243 |                   @size-change="handleSizeChange"
244 |                   @current-change="handleCurrentChange"
245 |                 />
246 |               </div>
247 | 
248 |               <!--详细信息表单-->
249 |               <el-dialog
250 |                 title="图书详细信息"
251 |                 width="50%"
252 |                 center
253 |                 align-center
254 |                 v-model="detail"
255 |                 :preview-src-list="[book.cover]"
256 |                 :before-close="
257 |                   () => {
258 |                     detail = false;
259 |                   }
260 |                 "
261 |               >
262 |                 <el-form :inline="true" v-if="detail">
263 |                   <el-form-item style="display: flex">
264 |                     <el-image
265 |                       style="width: 100px; height: 150px"
266 |                       :src="book.cover"
267 |                       :fit="'fill'"
268 |                     />
269 |                     <div
270 |                       style="
271 |                         font-size: 20px;
272 |                         font-weight: bold;
273 |                         align-self: center;
274 |                         margin-left: 20px;
275 |                       "
276 |                     >
277 |                       《{{ book.title }}》
278 |                     </div>
279 |                   </el-form-item>
280 |                   <el-form-item label="作者">
281 |                     {{ book.author }}
282 |                   </el-form-item>
283 |                   <el-form-item label="库存量">
284 |                     {{ book.number }}
285 |                   </el-form-item>
286 |                   <el-form-item label="ISBN">
287 |                     {{ book.isbn }}
288 |                   </el-form-item>
289 |                 </el-form>
290 | 
291 |                 <el-form v-if="detail">
292 |                   <el-form-item label="简介">
293 |                     <el-input
294 |                       v-model="book.introduction"
295 |                       :autosize="{ minRows: 2, maxRows: 6 }"
296 |                       type="textarea"
297 |                       readonly
298 |                     />
299 |                   </el-form-item>
300 |                 </el-form>
301 |               </el-dialog>
302 |             </el-col>
303 |           </el-row>
304 |         </el-main>
305 |       </el-container>
306 |     </el-container>
307 |   </div>
308 | </template>
309 | 


--------------------------------------------------------------------------------
/src/views/admin/AdminBookView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {onMounted, ref} from "vue";
  3 | import {addBookService, deleteBookService, getAllBookService, updateBookService} from "@/methods/book.js";
  4 | import SideView from "@/components/SideView.vue";
  5 | import HeaderView from "@/components/HeaderView.vue";
  6 | import {Plus} from "@element-plus/icons-vue";
  7 | import {ElMessage} from "element-plus";
  8 | 
  9 | const tableData = ref([]);
 10 | 
 11 | // 页面加载时获取所有书籍
 12 | onMounted(async () => {
 13 |   await getAllBooks();
 14 | })
 15 | 
 16 | // 获取所有书籍
 17 | const getAllBooks = async function () {
 18 |   loading.value = true;
 19 |   const result = await getAllBookService(condition.value);
 20 |   tableData.value = result.data;
 21 |   total.value = result.total;
 22 |   loading.value = false;
 23 | };
 24 | 
 25 | // 搜索条件
 26 | const condition = ref({
 27 |   bookName: null,
 28 |   author: null,
 29 |   isbn: null,
 30 |   number: 0,
 31 |   currentPage: 1,
 32 |   pageSize: 8
 33 | });
 34 | 
 35 | // 是否加载中
 36 | const loading = ref(false);
 37 | 
 38 | // 结果总数
 39 | const total = ref(0)
 40 | 
 41 | // 分页大小变化
 42 | const handleSizeChange = (val) => {
 43 |   loading.value = true;
 44 |   condition.value.pageSize = val;
 45 |   getAllBooks();
 46 |   loading.value = false;
 47 | };
 48 | 
 49 | // 当前页数发生变化
 50 | const handleCurrentChange = (val) => {
 51 |   loading.value = true;
 52 |   condition.value.currentPage = val;
 53 |   getAllBooks();
 54 |   loading.value = false;
 55 | };
 56 | 
 57 | let detail = ref(false);
 58 | 
 59 | // 显示当前书籍详细信息
 60 | const showDetail = (row) => {
 61 |   detail.value = true;
 62 |   book.value = row;
 63 | }
 64 | 
 65 | // 关闭详细信息对话框
 66 | const closeDialog = async () => {
 67 |   detail.value = false;
 68 |   await getAllBooks();
 69 | }
 70 | 
 71 | //书籍信息
 72 | let book = ref({
 73 |   title: null,
 74 |   isbn: null,
 75 |   cover: null,
 76 |   introduction: null,
 77 |   number: 0,
 78 |   author: null
 79 | });
 80 | 
 81 | 
 82 | // 添加书籍的信息
 83 | let showAdd = ref(false);
 84 | 
 85 | const addBook = ref({
 86 |   title: null,
 87 |   isbn: null,
 88 |   cover: null,
 89 |   introduction: null,
 90 |   number: null,
 91 |   author: null
 92 | })
 93 | 
 94 | // 添加书籍
 95 | const addBookFunc = async () => {
 96 |   // console.log(addBook.value);
 97 | 
 98 |   await addBookService(addBook.value);
 99 |   ElMessage.success("添加成功!");
100 |   showAdd.value = false;
101 |   condition.value.bookName = addBook.value.title;
102 |   await getAllBooks();
103 | }
104 | 
105 | // 添加表单校验规则
106 | const rules = {
107 |   title: [
108 |     {max: 30, message: '最多30个字符', trigger: ['blur', 'change']}
109 |   ],
110 |   isbn: [
111 |     {max: 20, message: '最多20个字符', trigger: ['blur', 'change']}
112 |   ],
113 |   cover: [
114 |     {max: 200, message: '最多200个字符', trigger: ['blur', 'change']}
115 |   ],
116 |   introduction: [
117 |     {max: 400, message: '最多400个字符', trigger: ['blur', 'change']}
118 |   ],
119 |   number: [
120 |     {type: 'number', min: 0, message: '必须是大于等于0的数字', trigger: ['blur', 'change']}
121 |   ],
122 |   author: [
123 |     {max: 20, message: '最多20个字符', trigger: ['blur', 'change']}
124 |   ]
125 | };
126 | 
127 | // 删除书籍信息
128 | const deleteBook = async (isbn) => {
129 |   await deleteBookService(isbn);
130 |   ElMessage.success('删除成功!');
131 |   await getAllBooks();
132 | }
133 | 
134 | // 修改书籍信息
135 | const updateBook = async () => {
136 |   console.log(book.value);
137 |   await updateBookService(book.value);
138 |   detail.value = false;
139 |   ElMessage.success("已保存!");
140 | }
141 | 
142 | </script>
143 | <!-- --------------------------------------- 一条朴实的分割线 ----------------------------------------- -->
144 | <template>
145 |   <div>
146 |     <el-container>
147 |       <!--侧栏-->
148 |       <el-aside width="200px">
149 |         <side-view/>
150 |       </el-aside>
151 |       <el-container>
152 |         <el-header>
153 |           <header-view/>
154 |         </el-header>
155 |         <el-main>
156 |           <el-row>
157 |             <el-col :span="24">
158 |               <!--搜索条件框-->
159 |               <el-row>
160 |                 <!--添加书籍按钮-->
161 |                 <el-button @click="showAdd = true" :icon="Plus" size="large" type="success" circle :span="2"/>
162 |                 <el-col :span="1"/>
163 |                 <el-col :span="6">
164 |                   <el-input @input="getAllBooks" v-model="condition.bookName" size="large" placeholder="书名"
165 |                             clearable/>
166 |                 </el-col>
167 |                 <el-col :span="1"/>
168 |                 <el-col :span="6">
169 |                   <el-input @input="getAllBooks" v-model="condition.author" size="large" placeholder="作者" clearable/>
170 |                 </el-col>
171 |                 <el-col :span="1"/>
172 |                 <el-col :span="6">
173 |                   <el-input @input="getAllBooks" v-model="condition.isbn" size="large" placeholder="ISBN" clearable/>
174 |                 </el-col>
175 |               </el-row>
176 |               <br>
177 | 
178 |               <!--书籍表格-->
179 |               <el-table style="width: 100%"
180 |                         :data="tableData" v-loading="loading">
181 |                 <el-table-column prop="title" label="书名" width="150"/>
182 |                 <el-table-column prop="author" label="作者" width="150"/>
183 |                 <el-table-column prop="isbn" label="ISBN" width="150"/>
184 |                 <el-table-column sortable prop="number" label="库存量" width="150"/>
185 | 
186 |                 <el-table-column label="操作" width="150">
187 |                   <template #default="scope">
188 |                     <el-button link type="primary" size="small"
189 |                                @click="showDetail(scope.row)">详细信息
190 |                     </el-button>
191 |                     <el-popconfirm
192 |                         confirm-button-text="Yes"
193 |                         cancel-button-text="我再想想"
194 |                         confirm-button-type="danger"
195 |                         @confirm="deleteBook(scope.row.isbn)"
196 |                         title="真的要删除这本书吗?">
197 |                       <template #reference>
198 |                         <el-button link type="danger" size="small">删除
199 |                         </el-button>
200 |                       </template>
201 |                     </el-popconfirm>
202 |                   </template>
203 |                 </el-table-column>
204 |               </el-table>
205 |               <br>
206 |               <!--分页组件-->
207 |               <div>
208 |                 <el-pagination
209 |                     v-model:current-page="condition.currentPage"
210 |                     v-model:page-size="condition.pageSize"
211 |                     :page-sizes="[5,8,10,15,30,50,100]"
212 |                     :background="true"
213 |                     layout="total, sizes, prev, pager, next, jumper"
214 |                     :total="total"
215 |                     @size-change="handleSizeChange"
216 |                     @current-change="handleCurrentChange"/>
217 |               </div>
218 | 
219 |               <!--详细信息表单,可以修改-->
220 |               <el-dialog title="图书详细信息" width="40%" center align-center
221 |                          v-model="detail" :before-close="closeDialog">
222 |                 <el-form :inline="true" :rules="rules" :model="book">
223 |                   <el-form-item style="display: flex;" prop="cover">
224 |                     <el-image style="width: 100px; height: 150px"
225 |                               :preview-src-list="[book.cover]"
226 |                               :src="book.cover" :fit="'fill'"/>
227 |                   </el-form-item>
228 | 
229 |                   <el-form-item label="书名" prop="title" required>
230 |                     <el-input v-model="book.title"/>
231 |                   </el-form-item>
232 | 
233 |                   <el-form-item label="库存" prop="number" required>
234 |                     <el-input v-model.number="book.number"/>
235 |                   </el-form-item>
236 | 
237 |                   <el-form-item label="作者" prop="author">
238 |                     <el-input v-model="book.author"/>
239 |                   </el-form-item>
240 | 
241 |                   <el-form-item label="ISBN" prop="isbn">
242 |                     {{book.isbn}}
243 |                   </el-form-item>
244 |                   <el-form-item label="简介" prop="introduction">
245 |                     <el-input v-model="book.introduction"
246 |                               :autosize="{ minRows: 2, maxRows: 6 }"
247 |                               type="textarea"/>
248 |                   </el-form-item>
249 |                 </el-form>
250 |                 <!--保存-->
251 |                 <el-form>
252 |                   <template #default>
253 |                     <el-form-item>
254 |                       <el-button type="primary" @click="updateBook">保存</el-button>
255 |                       <el-button type="danger" @click="closeDialog">取消</el-button>
256 |                     </el-form-item>
257 |                   </template>
258 |                 </el-form>
259 |               </el-dialog>
260 | 
261 |               <!--添加书籍表单-->
262 |               <el-dialog v-model="showAdd" title="添加图书" width="30%" center align-center>
263 |                 <el-form :inline="true" :model="addBook" :rules="rules">
264 |                   <el-form-item prop="title" required>
265 |                     <el-input v-model="addBook.title" placeholder="书名"/>
266 |                   </el-form-item>
267 |                   <el-form-item prop="isbn" required>
268 |                     <el-input v-model="addBook.isbn" placeholder="ISBN"/>
269 |                   </el-form-item>
270 |                   <el-form-item prop="number" required>
271 |                     <el-input v-model.number="addBook.number" placeholder="库存"/>
272 |                   </el-form-item>
273 |                   <el-form-item prop="cover">
274 |                     <el-input v-model="addBook.cover" placeholder="封面"/>
275 |                   </el-form-item>
276 |                   <el-form-item prop="author">
277 |                     <el-input v-model="addBook.author" placeholder="作者"/>
278 |                   </el-form-item>
279 |                   <el-form-item prop="introduction">
280 |                     <el-input placeholder="简介" type="textarea" v-model="addBook.introduction" clearable/>
281 |                   </el-form-item>
282 |                 </el-form>
283 | 
284 |                 <el-form>
285 |                   <el-button type="primary" @click="addBookFunc">添加</el-button>
286 |                   <el-button type="danger">取消</el-button>
287 |                 </el-form>
288 | 
289 |               </el-dialog>
290 | 
291 |             </el-col>
292 |           </el-row>
293 |         </el-main>
294 |       </el-container>
295 |     </el-container>
296 |   </div>
297 | 
298 | </template>
299 | 
300 | <style scoped>
301 | 
302 | </style>


--------------------------------------------------------------------------------