# gditLibrary

**Repository Path**: yang-anyi/gdit-library

## Basic Information

- **Project Name**: gditLibrary
- **Description**: 广科前端大作业的仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-01-01
- **Last Updated**: 2026-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端大作业

## 项目

- 图书管理系统

### 功能

#### 用户相关功能

1. 用户注册(带验证码)

   ![](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_22-27-02.png)

2. 用户登录(带验证码)

   ![登陆需要验证码](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_21-36-40.png)

3. 用户修改密码(带验证码)

4. 搜索用户(请求后端需要携带token)

5. 添加用户(请求后端需要携带token)

6. 修改用户(请求后端需要携带token)

7. 删除用户(请求后端需要携带token)

8. 导出所有用户信息到Excel(请求后端需要携带token)

#### 图书相关功能

1. 图书的搜索(详细查询和列表查询)

   ![](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_23-08-20.png)

2. 图书的借阅(请求后端需要携带token)

   ![](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_23-09-28.png)

3. 图书的归还(单个归还和批量归还,请求后端需要携带token)

4. 图书的修改(请求后端需要携带token)

5. 图书的添加(请求后端需要携带token)

6. 图书的删除(单个删除和批量删除,请求后端需要携带token)

7. 导出所有图书信息到excel(请求后端需要携带token)

8. 通过excel批量导入图书信息(请求后端需要携带token)

   ![](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_23-10-45.png)

#### 借阅记录相关功能

1. 借阅记录搜索(请求后端需要携带token)
2. 用户借阅记录数据可视化(请求后端需要携带token)
3. 全部借阅记录数据可视化(请求后端需要携带token)
4. 借阅记录的添加(请求后端需要携带token)
5. 借阅记录的修改(请求后端需要携带token)
6. 借阅记录的删除(单个删除和批量删除,请求后端需要携带token)
7. 用户借阅记录导出的Excel(请求后端需要携带token)
8. 所有借阅记录导出到Excel(请求后端需要携带token)

![](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_22-51-45.png)

### 用户角色

1. 游客
   1. 游客可以搜索图书,可以点击图书名称可以查看图书详细信息
   2. 游客可以使用注册功能,注册成为用户
   3. 注册时可以上传头像
2. 用户
   1. 用户可以借阅图书和归还图书
   2. 用户可以查看自己的借阅记录和借阅记录可视化数据
   3. 用户可以修改密码
   4. 用户可以使用注销功能
3. 管理员
   1. 管理员可以添加图书,删除图书,修改图书,搜索图书
   2. 管理员可以添加用户,修改用户,禁用用户,删除用户
   3. 管理员可以查看所有人的借阅,可以查看借阅数据的可视化

4. 功能用例图

![用例图](http://tuchuang.anyi.website/imgs/%E5%89%8D%E7%AB%AF%E5%A4%A7%E4%BD%9C%E4%B8%9A%E7%9A%84%E7%94%A8%E4%BE%8B%E5%9B%BE.svg)

## 使用到的技术

### 前端

- 前端使用到vue3,Element-plus进行页面搭建

![页面结构](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_21-33-11.png)

- 前端使用到echarts进行数据可视化展示

![数据可视化](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_21-33-46.png)

- 前端使用到axios进行数据通信

### 后端

- 后端使用到的技术
  1. SpringBoot
  2. SpringSecurity安全框架
  3. Mybatis-plus
  4. Lombok
  5. easyExcel
  6. redis
  7. MySQL数据库
- 使用SpringSecurity进行权限校验
  1. 重写"/login"接口
  2. 使用"AuthenticationManager"进行用户认证
  3. 实现"UserDetailsService"接口,在这里进行数据库查询校验
  4. 封装返回自己实现的"UserDetail"实体类
  5. 认证通过,生成JWT,将用户信息存储到redis缓存中,将JWT作为token返回给用户
- 有验证码
  1. 生成随机验证码和验证码图片
  2. 图片使用base64编码后返回给用户
- 图书保存到七牛云的OOS
  1. 读取上传的文件流
  2. 使用七牛云的SDK将读取到的文件流发送到七牛云
  3. 将七牛云返回的响应解析封装为图片连接返回给用户
- 图书数据是使用爬虫爬取保存到excel,然后使用java解析excel最后保存到数据库
  1. 因为要爬的数据都是使用ajax获取的,所有我选择使用selenium自动化测试框架进行爬虫

## 上线

- [上线地址](http://http://gditlibrary.anyi.website/)
- 部署到公网的云服务器上
- 前端使用nginx部署
- 后端使用docker部署
- 通过nginx的反向代理解决跨域

### 部署前端

1. 上传到服务器
2. 编写nginx配置文件
3. 指定nginx配置文件启动nginx
4. 通过域名访问成功,完成配置

![通过域名访问成功的图片](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_15-06-05.png)

- nginx配置文件

![](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_23-05-09.png)

```nginx
server {
        listen       80;
        server_name  gditLibrary.anyi.website;
        location / {
                root   /root/gdit_library/vue/dist;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
        }
        location /api/ {
                add_header Access-Control-Allow-Origin * always;
                proxy_pass http://localhost:10001/;       
                proxy_connect_timeout    6;
                proxy_send_timeout        30;
                proxy_read_timeout        30;            
                proxy_set_header Host $http_host;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Real_IP $remote_addr;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Server $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
                client_max_body_size    100m;  
        }
      	error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
```

### 部署后端

- 使用到MySQL,redis,和library.jar,均部署到docker中

- docker创建容器脚本

![](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_22-54-44.png)

```shell
#!/bin/bash
echo 'create start'

docker run -d --restart unless-stopped \
--name gdit_library  \
-p 10001:10001  \
-v /root/gdit_library/java:/gdit_library/java \
openjdk:8-jre \
java -jar /gdit_library/java/library.jar

echo 'create complete'

```

- 创建的结果

![docker运行容器](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_15-43-05.png)

## 工作量化数据

- 共写9167行代码

### 前端

- 前端共写4958行代码,其中vue占3872行,JavaScript占965行

![前端代码量](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_16-25-45.png)

### 后端

- 后端共写4209行代码,其中java占4022行

![后端代码量](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_16-28-49.png)

- 后端共写31一个接口

  - 用户相关接口12个

  ![用户相关接口](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_16-34-48.png)

  - 图书相关接口9个

  ![图书相关接口](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_16-35-26.png)

  - 借阅记录相关接口9个

  ![借阅记录相关接口](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_16-36-09.png)

  - 上传图片接口1个

  ![上传图片接口](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_16-36-48.png)

### git提交记录

- [仓库地址](https://gitee.com/yang-anyi/gdit-library)

- 共使用git进行9次提交

![git提交记录](http://tuchuang.anyi.website/imgs/Snipaste_2024-01-01_16-41-24.png)