# huasenjio-compose

**Repository Path**: kobe-curry/huasenjio-compose

## Basic Information

- **Project Name**: huasenjio-compose
- **Description**: 基于Vue.js + Node.js + Docker的多功能平台，由可自定义简洁主页、技术文章分享、拖拽低代码编辑器、协同流程图模块组成，涵盖了日常生活、娱乐、学习、影视、考研、工作、科技、实用工具等领域，致力于提供高效上网冲浪环境的公益性平台！
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://n.huasen.cc
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 80
- **Created**: 2023-05-17
- **Last Updated**: 2023-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 花森门户

> 码云仓库地址：https://gitee.com/HuaSenJioJio/huasenjio-compose
>
> Github仓库地址：https://github.com/huasenjio/huasenjio-compose



## 📌 关于

花森系列网站增添新作品，（huasenjio-compose）[官方仓库](https://github.com/huasenjio/huasenjio-compose)，基于 vue.js、node.js、docker-compose、redis、mongodb、jenkins 组合构建的容器应用。如果我的项目给您带来帮助，请点一个star（🌟）！您的鼓励和支持，对我真的很重要！



## 💪 开源列表

✅ 花森门户容器版（huasenjio-compose）

✅ 花森门户静态版（huasen-protal）

✅ 花森脚手架（huasen-cli）

☑️ 花森低代码平台 （预研）

☑️ 花森流程引擎（预研）



## 🤩 在线体验

由于服务器配置过于垃圾，首次访问较慢，请耐心等待，如果加载卡死，则重新刷新网页。不是代码写得烂，相反我已进行性能优化，并且经过实践验证，服务器配置较好的情况下，访问速度很快！

1.[网址导航](http://n.huasen.cc/)

2.[博客](http://n.huasen.cc/#/article)

3.[个人引导页](http://huasen.cc/)



## 💡 平台简介

花森门户由**浏览器主页网址导航**、**博客系统**、**后台管理系统**组成，浏览器主页收录资源网站，涵盖了日常生活、娱乐、学习、影视、考研、工作、科技、实用工具等领域。博客系统，定期分享实用教程、计算机知识、资源软件等文章，致力于提供高效上网冲浪环境的公益性平台！



## 📙 功能清单

### 官网

✅ 界面响应式适配，不同设备完美呈现；

✅ 数据离线存储，无需登陆，畅享所有，支持数据拷贝恢复；

✅ 云端备份，多设备数据同步；

✅ 自定义网站收录，收藏精品站点；

✅ 鼠标右键改色，创建专属皮肤；

✅ 更换皮肤壁纸；

✅ 多引擎搜索框，支持百度热词提示；

✅ 站内链接搜索，支持从名称、描述、备注搜索站点，一键直达网站；

✅ 邮箱登陆注册；

✅ 极简模式，干净简洁；

✅ 订阅切换；

✅ 实时天气；

✅ Markdown文章阅读，支持三级锚点目录；

☑️ ChatGPT；

☑️ 提交链接；

☑️ ......

### 后台管理

✅ 实时访客统计，记录PV、UV、IP、反向链接、设备，精准掌控流量（不涉及敏感信息）；

✅ 服务器状态监听，记录CPU、内存、磁盘使用占比；

✅ Markdown文章发布；

✅ 订阅源管理，一键管理订阅源、栏目、网链；

✅ 账户管理，包括用户、管理员、黑名单信息管理；

✅ 图标制作，支持文字、上传、爬取三种方式生成图标；

✅ 日志管理；

✅ 配置管理；

✅ 动态脚本执行面板；

✅ 文件管理，支持图片、视频、PDF、文档等文件存储； 

☑️ PDF在线阅读；

☑️ 完善批量删除；

☑️ 提交链接审核；

☑️ ......

### 后台服务

✅ 自研的并发处理器，轻松抗下1000并发；

✅ 多容器一键部署，经典的MVC架构；

✅ 黑名单拦截；

✅ 权限管理，支持 jwt 身份校验；

✅ 数据加密传输，支持对称、非对称加密传输；

✅ 邮件发送；

✅ 日志系统；

✅ 定时任务；

✅ Websocket实时通讯；

✅ 多线程处理；

✅ 文件上传；

✅ 跨域处理；

☑️ 资源防盗链；

☑️ SEO优化；

☑️ ......



## ✨ 界面功能预览

> 快照更新于2023年4月28日

#### 1.响应式适配

![amP73Q5ctpU9sf4](https://s2.loli.net/2023/02/07/amP73Q5ctpU9sf4.png)

#### 2.首页+搜索+右键换肤

![bwT5saFxQz2RYon](https://s2.loli.net/2022/11/12/bwT5saFxQz2RYon.png)

#### 3.极简模式

![xM3tNHzoKils7P5](https://s2.loli.net/2023/02/05/xM3tNHzoKils7P5.png)

#### 4.自定义收录

![woaujxGCKnWt8PB](https://s2.loli.net/2023/02/05/woaujxGCKnWt8PB.png)

#### 5.皮肤主题

![Lj3gREk8dnxbIHZ](https://s2.loli.net/2023/02/05/Lj3gREk8dnxbIHZ.png)

#### 6.文章展示

![W5NyJahVl2pM1mi](https://s2.loli.net/2023/02/05/W5NyJahVl2pM1mi.png)

#### 7.文章阅读

![FBDAtSpqlM86Cuz](https://s2.loli.net/2023/02/05/FBDAtSpqlM86Cuz.png)

#### 8.数据仪表盘

![8ZmCz5AlPfXYcLy](https://s2.loli.net/2023/02/08/8ZmCz5AlPfXYcLy.png)

#### 9.文章发布

![Jv2lAmTXwPRBtx6](https://s2.loli.net/2023/02/05/Jv2lAmTXwPRBtx6.png)

#### 10.栏目管理

![2dU9necHzyhNIBg](https://s2.loli.net/2023/04/27/2dU9necHzyhNIBg.png)

#### 11.网链管理

![sTKvBmOVftdGn2g](https://s2.loli.net/2023/04/27/sTKvBmOVftdGn2g.png)

#### 12.文章管理

![UdWPTGeXF4hyxza](https://s2.loli.net/2023/02/05/UdWPTGeXF4hyxza.png)



## 🧩 技术架构

前端基于 Vue.js（2.6.x）、ElementUI、Tailwindcss、Axios 等技术开发的 Web 应用，服务端基于 Node.js、Mongodb、Redis、Express 开发的服务框架，使用 Nginx 作为代理服务器转发请求，选择 jenkins 实现 CI/CD，借助 docker 进行一键容器化部署。

![PuyTDEVxoYajkOn](https://s2.loli.net/2022/11/12/PuyTDEVxoYajkOn.png)



## 🔨 快速部署

### 🏁 测试环境

1. Centos 7.4；
2. 腾讯云服务器 1 核 2G（学生机）；

### 🏁 安装依赖

#### 一.Git

安装git版本管理工具，直接拉取源码到服务器，免去通过xfpt上传源码文件的繁琐过程。

（1）安装 wandisco 仓库包

```
yum install http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-2.noarch.rpm
```

（2）安装 git 安装包

```
yum -y install git
```

（3）验证版本

```
git version
```

#### 二.Docker

（1）卸载旧版本

```javascript
yum remove -y docker \
  docker-client \
  docker-client-latest \
  docker-common \
  docker-latest \
  docker-latest-logrotate \
  docker-logrotate \
  docker-selinux \
  docker-engine-selinux \
  docker-engine
```

（2）安装依赖工具包

```javascript
yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2
```

（3）设置 yum 源

```javascript
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
sudo yum makecache fast
```

（4）安装 docker

```javascript
yum install -y docker-ce
```

（5）启动 docker

```javascript
systemctl start docker.service
```

（6）设置开机自启动

```javascript
systemctl enable docker.service
```

（7）设置权限

```javascript
sudo chmod a+rw /var/run/docker.sock
```

（8）查看版本

命令行执行`docker version`如下命令，输出有 Client 和 Server 服务，则说明运行正常。

![1PzjM5mTcHDUByW](https://s2.loli.net/2022/11/13/1PzjM5mTcHDUByW.png)

（9）安装 vim 工具

如果系统没有自带 vim 编辑器，则使用如下命令进行安装。

```javascript
yum -y install vim*
```

（10）添加镜像源配置文件

默认通过官方镜像源拉取，速度特别**慢**，并且容易**卡死**，所以需要替换**镜像源**，如果目录下不存在 daemon.json 配置文件，则新建配置文件，执行 `vim /etc/docker/daemon.json` 命令，输入配置如下：

```javascript
{
  "registry-mirrors": [
    "https://registry.docker-cn.com",
    "http://hub-mirror.c.163.com",
    "https://docker.mirrors.ustc.edu.cn"
  ],
  "ipv6":false
}
```

（11）重载配置

> ⚠️ 不然配置不会生效

执行`sudo systemctl daemon-reload`命令

（12）重启docker

> ⚠️ 不然配置不会生效

执行`sudo systemctl restart docker`命令

#### 三.Docker-compose

安装docker-compose服务，负责对docker容器进行集群和快速编排。

（1）下载资源

```javascript
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```

（2）设置权限

```javascript
sudo chmod +x /usr/local/bin/docker-compose
```

（3）建立软连接

不建立软连接，可能无法使用docker-compose命令。

```javascript
ln - s /usr/local/bin/docker-compose/usr/bin/docker-compose
```

（4）查看版本

```javascript
docker-compose --version
```

### 🏁 运行容器

通过上一步，我们已经安装好git、docker、docker-compose服务，接下来我们拉取源码，直接运行容器。

（1）通过 git 拉取源码

```javascript
git clone https://github.com/huasenjio/huasenjio-compose.git
```

（2）进入 huasenjio-compose 目录

```javascript
cd huasenjio-compose
```

（3）运行容器

执行运行容器命令后，docker将自动拉取安装配置nginx、mongodb、redis、jenkins、后端服务，第一次会比较缓慢，请耐心等待，如果遇到卡死的情况，使用`ctrl + c`终止命令，然后重复执行运行容器命令即可。

```javascript
docker-compose up -d
```

（4）访问站点

容器启动成功之后，我们在浏览器地址栏输入如下地址：

```javascript
官网地址：协议://ip/portal/
后台管理地址：协议://ip/admin/
默认后台管理密码：admin@qq.com/12345
```



## ❓常见 QA

（1）按照步骤操作，导航、博客、后台管理网站可以直接访问？

是的，项目采取容器化配置，只要一次安装运行成功，即可访问使用，无需其他繁琐配置。

（2）为什么容器运行失败？

运行容器时，请确保80、37017、7379、8080、3000、8181端口不被占用，可以通过`netstat -anp | grep 端口号`检查端口占用情况，如果不幸已经有服务占用端口，则需要修改`docker-compose.yml`中对应容器的端口后，重新执行运行容器命令。

（3）运行成功，但是还是无法访问到站点？

如果服务已经正常启动，但是无法访问站点，需要检查一下服务器防火墙和安全组配置，是否限制80端口的访问，可以使用[端口检测工具](https://coding.tools/cn/port-checker)，进行检测。

（4）用户注册时，为什么邮箱验证码无法发送？

由于邮箱验证码功能依赖 nodemailer 库实现，需要部署之前修改`/huasenjio-compose/huasen-server/config.js`中的`QQ_MAIL`配置项，更改成自己的申请邮箱地址和 mtp 通行码。

（5）mongodb 数据库的存储位置？

工程根目录下`huasen-mongo/volume`文件夹，就是数据库的数据文件夹。

（6）如何删除容器，重新启动容器？

进入huasenjio-compose 目录，打开终端，通过`docker-compose down`，停止容器，删除容器。

（7）如何重新构建镜像？

进入huasenjio-compose 目录，打开终端，通过`docker-compose build --no-cache`，不使用缓存，重新构建镜像。

（8）如何操作服务器防火墙？

```javascript
开启防火墙：systemctl start firewalld
关闭防火墙：systemctl stop firewalld
查看防火墙：systemctl status firewalld
查看指定端口：firewall-cmd --query-port=8080/tcp
打开指定端口：firewall-cmd --add-port=8080/tcp --permanent
重载端口数据：firewall-cmd --reload
关闭指定端口：firewall-cmd --permanent --remove-port=8080/tcp
```

（9）如何配置放开安全组？

因为服务器提供商的应用界面不同，所以省略教程，大家平时使用阿里云、腾讯云、华为云等服务器提供商的服务器，都是可以轻易地百度到安全组的操作教程！



## 📽 视频安装教程

（1）通过docker-compose安装教程

https://www.bilibili.com/video/BV1G44y1Q7MV

（2）通过宝塔面板安装教程

https://www.bilibili.com/video/BV1xA411z7QA

（3）自动化部署教程

https://www.bilibili.com/video/BV1vg4y1E7xy

（3-1）构建完成执行的shell脚本

```shell
# 删除文件
if [ ! -d "/huasen-compose/huasen-log" ];then echo "文件不存在"; else rm -rf /huasen-compose/huasen-log; fi
if [ ! -d "/huasen-compose/huasen-nginx" ];then echo "文件不存在"; else rm -rf /huasen-compose/huasen-nginx; fi
if [ ! -d "/huasen-compose/huasen-server" ];then echo "文件不存在"; else rm -rf /huasen-compose/huasen-server; fi
# 移动文件
mv -f ./huasen-nginx /huasen-compose/huasen-nginx
mv -f ./huasen-server /huasen-compose/huasen-server
# 合并资源目录
cp -frap ./huasen-store/* /huasen-compose/huasen-store/
```

（3-2）远程执行的shell脚本

```shell
# 采用宿主机进程
# source /etc/profile
# 防止此进程在执行宿主机脚本之前被杀死
# BUILD_ID=dontKillMe
# 进到部署目录
cd /huasenjio-compose
# 输出执行目录
pwd
# 停止服务
docker-compose stop nginx server
# 移除已停止的容器
docker-compose rm -f nginx server
# 更新后端服务镜像
docker-compose build server
# 重新更新部署容器
docker-compose up -d --no-recreate --remove-orphans
# 移除无用的镜像
docker image prune -f
docker volume prune -f
```



## 🐛 开发者指南

> ⚠️ 以下内容适合有编程基础的小伙伴观看

### 目录结构

```javascript
├── huasen-mongo       // mongodb 数据库配置和数据
├── huasen-nginx       // nginx 配置
├── huasen-redis       // redis 配置和数据
└── huasen-server      // 后端服务
  ├── app.js     // 服务入口文件
  └──config.js   // 服务配置文件
├── huasen-store       // 静态文件仓库
├── huasen-jenkins     // jenkins 配置
├── docker-compose.yml // docker-compose 编排配置文件
└── huasen-frontend    // 前端界面源码
  ├── admin  // 后台管理界面源码
  ├── portal // 前台站点源码
  └── guide  // 个人引导页源码
```

### 本地启动调试

#### 一.前端

> ⚠️ 进入/huasenjio-compose/huasen-frontend/portal目录下执行命令

（1）安装依赖

```
npm install
```

（2）运行程序

```
npm run server
```

（3）打包构建

```
npm run build
```

#### 二.后台管理

> ⚠️ 进入/huasenjio-compose/huasen-frontend/admin目录下执行命令

（1）安装依赖

```
npm install
```

（2）运行程序

```
npm run server
```

（3）打包构建

```
npm run build
```

#### 三.容器启动

> ⚠️ 进入根目录下执行命令

（1）构建容器

```
docker-compose up -d
```

（2）停止后台服务容器

因为花森网站是编排好的组合式容器，所以容器启动时，容器中后台服务，会占用掉**3000**端口，我们需要在根目录中执行`docker-compose stop server`命令，停止容器内的后台服务。否则本地的后端服务，因为端口被占用，导致无法启动。

#### 四.后台服务

>  ⚠️ 进入/huasenjio-compose/huasen-server目录下执行命令

（1）安装依赖

```
npm install
```

（2）运行程序

```
npm run dev
```



## ❌ 声明

仅供学习参考，未经授权，禁止商业使用！



## 🥳 联系我们

由于涉及知识面较广，文字讲解篇幅过大，可以关注我的 Bilibili 账号，后续更新视频教程，感兴趣的小伙伴可以添加站长微信 ，进入前端技术交流群！

🐧企鹅QQ：184820911

😸微信 ：huasencc（站长邀请进入前端交流群）

📮邮箱 ：[184820911@qq.com](184820911@qq.com)

📺哔哩哔哩：[花森酱 JioJio](https://space.bilibili.com/241546158)