易千图书馆-前端

易千图书馆项目，实现图书检索，借还图书等功能，项目采用前后端分离的开发模式进行开发

前端作者： @aimaier4869

后端作者： @Skywt2003

仓库地址

• 前端代码：https://gitee.com/aimaier4869/yiqian-library-front-end
• 后端代码：https://github.com/Skywt2003/lib-backend

效果演示

使用

前端

1. 用 git 命令克隆仓库到本地
   • 前台：
     1. 进入 foreground 文件夹
   • 后台：
     1. 进入 background 文件夹
     2. 使用 npm i 命令安装项目所需要的依赖
   • 项目文档：
     1. 进入 doc 文件夹
     2. 使用 npm i 命令安装项目所需要的依赖
2. 继续开发

后端

见 https://github.com/Skywt2003/lib-backend 中的 README.md

项目文档

见 doc/docs/build.html

易千图书馆项目文档

分工信息

• 前端：
  1. 设计页面并用代码呈现成网页
  2. 设计接口，编写接口文档
  3. 按照接口文档编写前后端交互逻辑代码，将后端返回的数据渲染到页面中
  4. 利用Mock数据进行调试
• 后端：
  1. 设计数据库，数据表
  2. 设计接口，编写接口文档
  3. 按照接口文档编写接口，处理前端请求，检索数据库，给前端返回相应的数据
  4. 利用Postman等工具对接口进行调试

架构设计

技术栈

• 前端：
  • 前台：Vue2 + ElementUI
  • 后台：Vite + Vue3 + Element-Plus
• 后端： Python
  • 需要安装的模块：jwt，flask，sqlalchemy，mysql-connector 等。
• 数据库： MySQL

数据表设计

用户信息表 users

• ID id：无符号整型，自增主键。在后端程序内部实际地标识用户。
• 用户组 group：无符号整型，范围 0～2，0 表示管理员，1 表示普通用户，2 表示禁用的用户。
• 邮箱 email：字符串，在外部使用邮箱作为 ID 唯一地标识一位用户。
• 密码 passwd：字符串，存储密码的哈希值。密码需要满足设定的安全策略。
• 学号 stuid：字符串，12 位纯数字学号。
• 姓名 name：字符串，10 以内字符。
• 性别 gender：无符号整型，范围 0～3，0 表示未知，1 为男，2 为女，3 为其他。
• 年龄 age：无符号整型，范围 0～100，0 表示未知，
• 自我介绍 bio：字符串，200 字符以内。

书籍信息表 books

• ID id：无符号整型，自增主键。在后端程序内部实际地标识书籍。
• 书名 name：字符串，50 以内字符。
• 原作者 author：字符串数组。包含所有原作者。
• 译者 transer：字符串数组。包含所有译者。
• ISBN isbn：字符串。13 位纯数字。在外部使用 ISBN 唯一地标识一本书。
• 出版社 press：字符串。20 以内字符。
• 现存数量 existingNum：无符号整型，范围 0～100。
• 总数量 totalNum：无符号整型，范围 0～100。

借阅记录信息表 records

• ID id：无符号整型，自增主键。
• 借阅用户 ID userId：无符号整型，对应「用户信息」表中用户的 ID。
• 借阅书籍 ID bookId：无符号整型，对应「书籍信息」表中书籍的 ID。
• 借阅时间 borrowDate：Unix 时间戳，借阅的时间。
• 归还时间 returnDate：Unix 时间戳，归还的时间。
• 归还状态 returned：0 表示尚未归还，1 表示已归还。

前端页面设计

基本信息

• baseUrl: http://127.0.0.1/

目录结构

public
│  favicon.ico
│  index.html
│  login.html
│  user.html
├─admin
│  │  favicon.ico
│  │  index.html
│  └─assets
│          Books.js
│          Home.js
│          index.css
│          index.js
│          index2.js
│          logo.png
│          plugin-vue_export-helper.js
│          Records.js
│          Users.js
│          vendor.js
├─css
│      element.css
│      index.css
│      login.css
│      reset.css
│      user.css
├─fonts
│      element-icons.ttf
│      element-icons.woff
├─img
│      check.svg
│      left.svg
│      logo.png
│      right.svg
│      title-img.png
├─js
│      axios.js
│      element.js
│      loginInfo.js
│      multiavatar.js
│      requestConfig.js
│      vue.js
└─mock
        index.js
        mock.js

首页

• 描述：网站首页

• 地址：/index.html

登录页

• 描述：用户登录，新用户注册页面

• 地址：/login.html

个人中心

• 描述：查询个人借阅记录，修改个人信息，修改密码，注销页面

• 地址：/user.html

后台

• 描述：管理面板（单页面应用）

  • /home：个人中心
  • /users：用户管理
  • /books：图书管理
  • /records：借阅记录管理

• 地址：/admin/index.html

接口说明

基本信息

• 基础路径（baseUrl）：http://127.0.0.1/api
• 后端返回数据参数：

• 后端返回数据示例：

  {
  	"status": 200,
  	"data": []|{},
  	"msg": "操作成功"
  }

全局状态码

用户相关

注册/添加用户

• 描述：新用户注册，管理员添加用户
• 请求地址：/users
• 请求方式：POST
• 请求头（headers）信息：

• 请求参数：

• 请求示例：

  {
      "userEmail": "abc@email.com",
      "userPwd": "123456",
      "userStuId": "202108010500",
      "userName": "张三",
      "userGender": 1,
      "userAge": 16,
      "userBio": ""
  }

• 成功时返回示例：

  {
      "status": 200,
      "data": {
          "userId": 123,
          "userEmail": "abc@email.com",
          "userStuId": "202108010500",
          "userName": "张三",
          "userGender": 1,
          "userAge": 16,
          "userBio": "",
          "userGroup": 1
      }
      "msg": "注册成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "注册失败，{具体失败原因}"
  }

登录

• 描述：用户登录，登录成功后后端生成 token 并返回
• 请求地址：/token
• 请求方式：POST
• 请求头（headers）信息：

• 请求参数：

• 请求示例：

  {
      "userEmail": "abc@email.com",
      "userPwd": "123456",
  }

• 成功时返回示例：

  {
      "status": 200,
      "data": {
          token: "XXX"
      }
      "msg": "登录成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "用户名或密码错误"
  }

删除/注销

• 描述：用户自主注销，管理员删除用户
• 请求地址：/users/{userId}
• 请求方式：DELETE
• 请求头（headers）信息：

• URL参数：

• 成功时返回示例：

  {
      "status": 200,
      "msg": "删除成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "删除失败"
  }

获取当前用户信息

• 描述：获取当前登录的用户的信息
• 请求地址：/users/self
• 请求方式：GET
• 请求头（headers）信息：

• 成功时返回示例：

   {
       "status": 200,
       "data": {
           "userId": 123,
           "userEmail": "abc@email.com",
           "userStuId": "202108010500",
           "userName": "张三",
           "userGender": 1,
           "userAge": 16,
           "userBio": "",
           "userGroup": 1
       }
       "msg": "获取成功"
   }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "获取失败"
  }

查询用户

• 描述：按照条件查询用户，以分页的形式返回数据
• 请求地址：/users?name={name}&gender={gender}&email={email}&stuId={stuId}&age={age}&group={group}&page={page}&page-size={page-size}
• 请求方式：GET
• 请求头（headers）信息：

• URL参数：

• 成功时返回示例：

  {
      "status": 200,
      "data": {
          "page": 1,
          "page-size": 10,
          "total-count": 125, // 匹配的查询结果数量
          "total-page": 13, // 一共有多少页
          "users": [
  			{
                  "userId": 123,
                  "userEmail": "abc@email.com",
                  "userStuId": "202108010500",
                  "userName": "张三",
                  "userGender": 1,
                  "userAge": 16,
                  "userBio": "",
                  "userGroup": 1
              },
              {
                  "userId": 123,
                  "userEmail": "abc@email.com",
                  "userStuId": "202108010500",
                  "userName": "张三",
                  "userGender": 1,
                  "userAge": 16,
                  "userBio": "",
                  "userGroup": 1
              }
          ]
      }
      "msg": "获取成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "获取失败"
  }

修改用户信息

• 描述：修改除密码以外的用户信息
• 请求地址：/users/{userId}
• 请求方式：PUT
• 请求头（headers）信息：

• URL参数：

• 请求参数：

• 请求示例：

  {
      "userEmail": "abc@email.com",
      "userPwd": "123456",
      "userStuId": "202108010500",
      "userName": "张三",
      "userGender": 1,
      "userAge": 16,
      "userBio": ""
  }

• 成功时返回示例：

  {
      "status": 200,
      "msg": "修改成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "注册失败，{具体失败原因}"
  }

修改用户密码

• 描述：用户修改自己的密码，管理员重置某个用户的密码
• 请求地址：/users/{userId}/password
• 请求方式：PUT
• 请求头（headers）信息：

• URL参数：

• 请求参数

• 请求示例：

  {
      "userPwd": 12345,
      "userNewPwd": 456789
  }

• 成功时返回示例：

  {
      "status": 200,
      "msg": "修改成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "修改失败，{具体失败原因}"
  }

书籍相关

查询书籍

• 描述：查询书籍，查询结果以分页的形式展示
• 请求地址：/books?name={name}&isbn={isbn}&author={author}&page={page}&page-size={page-size}
• 请求方式：GET
• 请求头（headers）信息：

• URL参数：

• 成功时返回示例：

  {
      "status": 200,
      "data": {
          "page": 1,
          "page-size": 10,
          "total-count": 124, // 匹配的查询结果数量
          "total-page": 13, // 一共有多少页
          "books": [
  			{
                  "bookId": 123,
                  "bookName": "c++程序设计教程（通用版）（第三版）",
                  "bookAuthor": "钱能",
                  "bookISBN": "978-7825-1236-789",
                  "bookPress": "湖南大学出版社",
                  "bookExistingNumber": 1, // 现存总数量
                  "bookTotalNumber": 16 // 总数量
              },
              {
                  "bookId": 456,
                  "bookName": "c++程序设计教程（通用版）（第三版）",
                  "bookAuthor": "钱能",
                  "bookISBN": "978-7825-1236-789",
                  "bookPress": "湖南大学出版社",
                  "bookExistingNumber": 1, // 现存总数量
                  "bookTotalNumber": 16 // 总数量
              }
          ]
      },
      "msg": "获取成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "获取失败"
  }

添加书籍

• 描述：新用户注册，管理员添加用户
• 请求地址：/books
• 请求方式：POST
• 请求头（headers）信息：

• 请求参数：

• 请求示例：

  {
      "bookName": "c++程序设计教程（通用版）（第三版）",
      "bookAuthor": "钱能",
      "bookISBN": "978-7825-1236-789",
      "bookPress": "湖南大学出版社",
      "bookExistingNumber": 16, // 现存总数量
      "bookTotalNumber": 16 // 总数量
  }

• 成功时返回示例：

  {
      "status": 200,
      "data": {
          "bookId": 123,
          "bookName": "c++程序设计教程（通用版）（第三版）",
          "bookAuthor": "钱能",
          "bookISBN": "978-7825-1236-789",
          "bookPress": "湖南大学出版社",
          "bookExistingNumber": 16, // 现存总数量
          "bookTotalNumber": 16 // 总数量
      }
      "msg": "添加成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "添加失败，{具体失败原因}"
  }

删除书籍

• 描述：管理员删除某一本书
• 请求地址：/books/{bookId}
• 请求方式：DELETE
• 请求头（headers）信息：

• URL参数：

• 成功时返回示例：

  {
      "status": 200,
      "msg": "删除成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "删除失败"
  }

修改书籍

• 描述：管理员修改某一本书的信息
• 请求地址：/books/{bookId}
• 请求方式：PUT
• 请求头（headers）信息：

• URL参数：

• 请求参数：

• 请求示例：

  {
      "bookName": "c++程序设计教程（通用版）（第三版）",
      "bookAuthor": "钱能",
      "bookISBN": "978-7825-1236-789",
      "bookPress": "湖南大学出版社",
      "bookExistingNumber": 1, // 现存总数量
      "bookTotalNumber": 16 // 总数量
  }

• 成功时返回示例：

  {
      "status": 200,
      "msg": "添加成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "添加失败，{具体失败原因}"
  }

借阅记录相关

查询记录

• 描述：查询借阅记录
• 请求地址：/records?userId={rcdUserId}&bookId={bookId}&bookName={bookName}&minBorrowDate={minBrrowDate}&maxBorrowDate={maxBorrowDate}&minReturnDate={minReturnDate}&maxReturnDate={maxReturnDate}&status={status}&page={page}&page-size={page-size}
• 请求方式：GET
• 请求头（headers）信息：

• URL参数：

• 成功时返回示例：

  {
      "status": 200,
      "data": {
          "page": 1,
          "page-size": 10,
          "total-count": 124, // 匹配的查询结果数量
          "total-page": 13, // 一共有多少页
          "records": [
  			{
                  "rcdId": 123,
                  "rcdUserID": 123456,
                  "rcdBookID": 752136,
                  "rcdBorrowDate": 1645362141170,
                  "rcdReturnDate": 1645362153685,
                  "rcdReturned": 0, // 归还状态
                  "bookName": "c++程序设计教程（通用版）（第三版）",
                  "bookAuthor": "钱能",
                  "bookISBN": "978-7825-1236-789",
                  "bookPress": "湖南大学出版社",
                  "bookExistingNumber": 1, // 现存总数量
                  "bookTotalNumber": 16, // 总数量
                  "userEmail": "abc@email.com",
                  "userStuId": "202108010500",
                  "userName": "张三",
                  "userGender": 1,
                  "userAge": 16,
                  "userBio": "",
                  "userGroup": 1
              },
              {
                  "rcdId": 123,
                  "rcdUserID": 123456,
                  "rcdBookID": 752136,
                  "rcdBorrowDate": 1645362141170,
                  "rcdReturnDate": 1645362153685,
                  "rcdReturned": 0, // 归还状态
                  "bookName": "c++程序设计教程（通用版）（第三版）",
                  "bookAuthor": "钱能",
                  "bookISBN": "978-7825-1236-789",
                  "bookPress": "湖南大学出版社",
                  "bookExistingNumber": 1, // 现存总数量
                  "bookTotalNumber": 16, // 总数量
                  "userEmail": "abc@email.com",
                  "userStuId": "202108010500",
                  "userName": "张三",
                  "userGender": 1,
                  "userAge": 16,
                  "userBio": "",
                  "userGroup": 1
              }
          ]
      }
      "msg": "获取成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "获取失败"
  }

借阅图书

• 描述：
• 请求地址：/records
• 请求方式：POST
• 请求头（headers）信息：

• 请求参数：

• 请求示例：

  {
      "rcdUserID": 123456,
      "rcdBookID": 752136,
      "rcdBorrowDate": 1645362141170,
  }

• 成功时返回示例：

  {
      "status": 200,
      "msg": "借阅成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "借阅失败，{具体失败原因}"
  }

删除记录

• 描述：管理员删除某一个借阅记录
• 请求地址：/records/{rcdId}
• 请求方式：DELETE
• 请求头（headers）信息：

• URL参数：

• 成功时返回示例：

  {
      "status": 200,
      "msg": "删除成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "删除失败"
  }

归还图书

• 描述：用户归还某一本书
• 请求地址：/records/{rcdId}
• 请求方式：PUT
• 请求头（headers）信息：

• URL 参数

• 请求参数：

• 请求示例：

  {
      "rcdReturnDate": 1645362153685
  }

• 成功时返回示例：

  {
      "status": 200,
      "msg": "归还成功"
  }

• 失败时返回示例：

  {
      "status": 400,
      "msg": "归还失败，{具体失败原因}"
  }