# YBox

**Repository Path**: yiyeo/ybox

## Basic Information

- **Project Name**: YBox
- **Description**: 本作品名为《YBOX—聚合收藏平台》，顾名思义，本产品是一款聚合收藏平台，他能够收藏来自各大平台（微信、知乎、掘金、CSDN）的网页、图片、音视频等 ；并且提供文章分类保存、下载至本地（html、md、pdf...）。除此之外也包括个人文案编写、记录学习笔记、撰写博客文档等功能。该应用系统采用了前后端分离的设计思路，前端采用了Vue.js框架.后端采用了Spring Boot,框架.
- **Primary Language**: Java
- **License**: WTFPL
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2024-01-12
- **Last Updated**: 2024-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
	<img alt="logo" src="data/img/icon.png" style="width: 200px;height: 200px;">
</p>
<h1 align="center" style="margin: 6px; font-weight: bold;">YBox v1.0.0</h1>
<h4 align="center">基于 Vue3/Element UI/Vant 和 Spring Boot/Spring Cloud & Alibaba 前后端分离的分布式微服务架构</h4>

## 平台简介

YBox是一个现代化书签收藏夹，帮助你高效收藏并管理有价值的网络信息。

YBox 专为新时代数字工作者打造，是你的私人网络信息助手。我们会时常在网络上浏览新闻、文章、资料、视频等内容，当你发现了自己在意的信息后，可以通过 YBox 提供的快捷收藏工具，将他们快速保存。在之后工作和生活中，当你需要它们时，能够随时在 YBox 中浏览或搜索，不必担心遗忘。

## 功能特点
* 轻简设计，强大能力 – YBox 专为网络书签功能打造，直观而纯粹，可全方位满足收藏、阅读、管理、搜索等需求。
* 随处皆可收藏 – 碎片资讯随时随地保存到 YBox，让你可以专注于学习和创造，不需要花费精力记忆它们。
* 告别繁琐整理 – 只需简单地设置好规则， YBox 会帮你自动分类，方便你按照类别统一浏览和处理。
* 无干扰阅读 – 自动识别是否是文章，预先提取正文并缓存，提供最佳的文章阅读体验。
* 随时找到所需 – 多种系统级全局搜索入口，使用快捷键随时搜索并打开要用的书签。
* 愉悦体验 – 不同于其它跨平台书签服务，YBox 使用原生技术开发，确保真正高效的使用体验。
* 轻松创建工作流 – 灵活的管理工具，轻松搭建你的网络导航。

## 使用场景
* 各行业专业工作者收集资料，为自己的工作项目提供素材和参考；
* 设计师随时收藏看到的优秀案例，组建自己的灵感库，在工作中随时找回灵感；
* 程序开发者收藏项目难题的解决方案，当之后再遇到类似问题可以从容不迫；
* 学生收藏学习资料，借助互联网的海量信息提高自己的学习效率；
* 收藏有价值的文章，定期回顾，养成深度阅读的习惯，提升自己；
* 记录在网络上看到的有趣视频、社交动态等，等方便或有空闲时再仔细浏览；


## 系统模块

~~~
com.ybox     
├── ybox-ui              // 前端框架 [80]
│       └── ybox-ui-mobile                            // app
│       └── ybox-ui-vue3                              // 管理后台
├── ybox-gateway         // 网关模块 [8080]
├── ybox-auth            // 认证中心 [9200]
├── ybox-api             // 接口模块
│       └── ybox-api-app                             // app接口
│       └── ybox-api-crawler                         // 爬虫接口
│       └── ybox-api-system                          // 系统接口
├── ybox-common          // 通用模块
│       └── ybox-common-core                         // 核心模块
│       └── ybox-common-datascope                    // 权限范围
│       └── ybox-common-datasource                   // 多数据源
│       └── ybox-common-email                        // 邮件服务
│       └── ybox-common-log                          // 日志记录
│       └── ybox-common-redis                        // 缓存服务
│       └── ybox-common-seata                        // 分布式事务
│       └── ybox-common-security                     // 安全模块
│       └── ybox-common-swagger                      // 系统接口
├── ybox-modules         // 业务模块
│       └── ybox-system                              // 系统模块 [9201]
│       └── ybox-gen                                 // 代码生成 [9202]
│       └── ybox-job                                 // 定时任务 [9203]
│       └── ybox-app                                 // app模块  [9204]
│       └── ybox-crawler                             // 爬虫模块 [9205]
│       └── ybox-file                                // 文件服务 [9300]
├── ybox-visual          // 图形化管理模块
│       └── ybox-visual-monitor                      // 监控中心 [9100]
├──pom.xml               // 公共依赖
~~~

## 服务架构于安全
* 采用前后端分离的模式，微服务版本前端(基于 [RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue))。
* 后端采用Spring Boot、Spring Cloud & Alibaba。
* 注册中心、配置中心选型Nacos，权限认证使用Redis。
* 流量控制框架选型Sentinel，分布式事务选型Seata。
* 完全响应式布局（支持电脑、平板、手机等主流设备）
* 强大的爬虫功能，可以获取用户收藏的网络资源
* 支持多数据源，简单配置即可实现切换。
* 支持按钮及数据权限，可自定义部门数据权限。
* 对常用js插件进行二次封装，使js代码变得简洁，更加易维护
* 完善的XSS防范及脚本过滤，彻底杜绝XSS攻击
* api签名校验，接口安全性高。

## 架构图

<img src="https://oscimg.oschina.net/oscnet/up-82e9722ecb846786405a904bafcf19f73f3.png"/>

## 内置功能

1.  用户管理：用户是系统操作者，该功能主要完成系统用户配置。
2.  部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
3.  岗位管理：配置系统用户所属担任职务。
4.  菜单管理：配置系统菜单，操作权限，按钮权限标识等。
5.  角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
6.  字典管理：对系统中经常使用的一些较为固定的数据进行维护。
7.  参数管理：对系统动态配置常用参数。
8.  通知公告：系统通知公告信息发布维护。
9.  操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
10. 登录日志：系统登录日志记录查询包含登录异常。
11. 在线用户：当前系统中活跃用户状态监控。
12. 定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。
13. 代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载 。
14. 系统接口：根据业务代码自动生成相关的api接口文档。
15. 服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
16. 在线构建器：拖动表单元素生成相应的HTML代码。
17. 连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。

## 在线体验

- 后台试用账号：admin/admin123
- app试用账号: 1655495937@qq.com/Aa@123456
- 由于本平台采用微服务架构，对服务器内存要求过高，本人无法承担高额服务器费用，故采用内网穿透方式，

演示地址：http://ybox.com  
文档地址：http://ybox.com

## 使用项目
### 测试环境启动
1. 导入sql
   ```bash
    mysql -h localhost -u root -p ybox-cloud < ./sql/ybox-cloud.sql
   ```
2. 导入nacos配置
   ```bash
    mysql -h localhost -u root -p ybox-nacos-config < ./sql/ybox-nacos-config.sql
   ```
3. 打开Ybox项目，启动所有ybox-modules目录下的模块，他们分别是ybox-modules-app、ybox-modules-crawler、ybox-modules-file、ybox-modules-gen、ybox-modules-job、ybox-modules-system以及YBox目录下的ybox-auth、ybox-gateway模块
   <a id="startModules">其中ybox-modules-app、ybox-modules-crawler、ybox-modules-file、ybox-modules-system、ybox-auth、ybox-gateway必启</a>，否则报错。
   ![data/img/start.png](data/img/start.png)
4. 打开YBox下的ybox-ui中的ybox-ui-mobile,在cmd中输入下面指令启动app项目
    ~~~bash
    npm run dev
    ~~~
5. 打开YBox下的ybox-ui中的ybox-ui-vue3,在cmd中输入下面指令启动后台管理项目
    ~~~bash
    npm run dev
    ~~~

### 生产环境启动
1. 依次点击maven中的clean、compile、package、install
2. 依次找到[必须启动的modules](#startModules)，找到target目录中的jar包，统一放到桌面
3. 执行
   ~~~bash
   java -jar jar包名称
   ~~~
4. 将ybox-ui中的两个项目打包，
   ~~~bash
   vite build
   ybox-ui-mobile执行：
   npm run build
   ybox-ui-vue3执行：
   npm run build:prod
   ~~~
5. 将打包后的文件上传到服务器，并使用用nginx代理，ybox-ui-mobile端口为80端口，ybox-ui-vue3端口为81端口.
## 后台演示图


<table>
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/cd1f90be5f2684f4560c9519c0f2a232ee8.jpg"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/1cbcf0e6f257c7d3a063c0e3f2ff989e4b3.jpg"/></td>
    </tr>
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-8074972883b5ba0622e13246738ebba237a.png"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/up-9f88719cdfca9af2e58b352a20e23d43b12.png"/></td>
    </tr>
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-39bf2584ec3a529b0d5a3b70d15c9b37646.png"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/up-4148b24f58660a9dc347761e4cf6162f28f.png"/></td>
    </tr>
	<tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-b2d62ceb95d2dd9b3fbe157bb70d26001e9.png"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/up-d67451d308b7a79ad6819723396f7c3d77a.png"/></td>
    </tr>	 
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/5e8c387724954459291aafd5eb52b456f53.jpg"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/644e78da53c2e92a95dfda4f76e6d117c4b.jpg"/></td>
    </tr>
	<tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-8370a0d02977eebf6dbf854c8450293c937.png"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/up-49003ed83f60f633e7153609a53a2b644f7.png"/></td>
    </tr>
	<tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-d4fe726319ece268d4746602c39cffc0621.png"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/up-c195234bbcd30be6927f037a6755e6ab69c.png"/></td>
    </tr>
	<tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-ece3fd37a3d4bb75a3926e905a3c5629055.png"/></td>
        <td><img src="https://oscimg.oschina.net/oscnet/up-92ffb7f3835855cff100fa0f754a6be0d99.png"/></td>
    </tr>
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-ff9e3066561574aca73005c5730c6a41f15.png"/></td>
    </tr>
</table>

## app端
<table border="0">
    <tr><td colspan="4">登录&注册</td></tr>
    <tr>
        <td><img src="data/img/app/Snipaste_2023-09-29_16-05-14.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_16-08-29.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_16-09-13.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_17-42-25.png" alt="验证码"></td>
    </tr>
    <tr><td colspan="4">首页</td></tr>
    <tr>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-15-43.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-16-57.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-17-26.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-17-45.png" alt="验证码"></td>
    </tr>
    <tr><td colspan="3">百宝箱</td></tr>
    <tr>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-24-54.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-25-16.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-25-31.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-25-56.png" alt="验证码"></td>
    </tr>
    <tr><td colspan="3">标签&标记</td></tr>
	<tr>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-26-20.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-26-39.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-35-40.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-36-13.png" alt="验证码"></td>
    </tr>
    <tr><td colspan="3">设置</td></tr>
    <tr>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-28-15.png" alt="验证码"></td>
        <td><img src="data/img/app/alfa3-t20x0.gif" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-32-50.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-34-49.png" alt="验证码"></td>
    </tr>
    <tr>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-33-21.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-33-51.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-34-10.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-35-10.png" alt="验证码"></td>
    </tr>
    <tr>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-36-38.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-36-58.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-37-23.png" alt="验证码"></td>
        <td><img src="data/img/app/Snipaste_2023-09-29_19-37-43.png" alt="验证码"></td>
    </tr>
</table>

# captcha
## 效果展示
<table border="0">
    <tr>
        <td><img src="https://s2.ax1x.com/2019/08/23/msFrE8.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msF0DP.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msFwut.png" alt="验证码"></td>
    </tr>
    <tr>
        <td><img src="https://s2.ax1x.com/2019/08/23/msFzVK.gif" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msFvb6.gif" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msFXK1.gif" alt="验证码"></td>
    </tr>
    <tr><td colspan="3">算数类型</td></tr>
    <tr>
        <td><img src="https://s2.ax1x.com/2019/08/23/mskKPg.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msknIS.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/mskma8.png" alt="验证码"></td>
    </tr>
    <tr><td colspan="3">中文类型</td></tr>
	<tr>
        <td><img src="https://s2.ax1x.com/2019/08/23/mskcdK.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msk6Z6.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msksqx.png" alt="验证码"></td>
    </tr>
    <tr><td colspan="3">内置字体</td></tr>
    <tr>
        <td><img src="https://s2.ax1x.com/2019/08/23/msAVSJ.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msAAW4.png" alt="验证码"></td>
        <td><img src="https://s2.ax1x.com/2019/08/23/msAkYF.png" alt="验证码"></td>
    </tr>
</table>

5.2.验证码字符类型

| 类型                 | 描述      |
|:-------------------|:--------|
| TYPE_DEFAULT       | 数字和字母混合 |
| TYPE_ONLY_NUMBER   | 纯数字     |
| TYPE_ONLY_CHAR     | 纯字母     |
| TYPE_ONLY_UPPER    | 纯大写字母   |
| TYPE_ONLY_LOWER    | 纯小写字母   |
| TYPE_NUM_AND_UPPER | 数字和大写字母 |

### 5.3.字体设置
内置字体：

| 字体              | 效果                                             |
|:----------------|:-----------------------------------------------|
| Captcha.FONT_1  | ![](https://s2.ax1x.com/2019/08/23/msMe6U.png) |
| Captcha.FONT_2  | ![](https://s2.ax1x.com/2019/08/23/msMAf0.png) |
| Captcha.FONT_3  | ![](https://s2.ax1x.com/2019/08/23/msMCwj.png) |
| Captcha.FONT_4  | ![](https://s2.ax1x.com/2019/08/23/msM9mQ.png) |
| Captcha.FONT_5  | ![](https://s2.ax1x.com/2019/08/23/msKz6S.png) |
| Captcha.FONT_6  | ![](https://s2.ax1x.com/2019/08/23/msKxl8.png) |
| Captcha.FONT_7  | ![](https://s2.ax1x.com/2019/08/23/msMPTs.png) |
| Captcha.FONT_8  | ![](https://s2.ax1x.com/2019/08/23/msMmXF.png) |
| Captcha.FONT_9  | ![](https://s2.ax1x.com/2019/08/23/msMVpV.png) |
| Captcha.FONT_10 | ![](https://s2.ax1x.com/2019/08/23/msMZlT.png) |

使用方法：
```
SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);

// 设置内置字体
captcha.setFont(Captcha.FONT_1); 

// 设置系统字体
captcha.setFont(new Font("楷体", Font.PLAIN, 28)); 
```

### 5.4.输出base64编码
```
SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
specCaptcha.toBase64();

// 如果不想要base64的头部data:image/png;base64,
specCaptcha.toBase64("");  // 加一个空的参数即可
```

### 5.5.输出到文件
```
FileOutputStream outputStream = new FileOutputStream(new File("C:/captcha.png"))
SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
specCaptcha.out(outputStream);
```


# banner图
- banner转换网址 https://www.bootschool.net/ascii
- 3d格式