# Blog

**Repository Path**: hkjGitee_admin/blog

## Basic Information

- **Project Name**: Blog
- **Description**: 一个基于Vue、ElementUI、Node.js、MongoDB 的小型个人博客项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-11
- **Last Updated**: 2025-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Purple Blog

## 项目介绍

一个采用 `vue-template-admin` 框架二次开发的小型个人博客项目，基于 Vue 2.x、ElementUI、Node.js、MongoDB 技术。

> `Cruiser` 文件夹：是静态 UI 页面

#### 功能说明

本系统具备用户前台 `client` 和 用户后台系统`server` 两个主干部分。其中

用户前台主要分为：

- 登录/注册：提供手机号、邮箱、账号密码快捷登录/注册
- 文章列表/详情
- 编写文章发布/保存草稿
- 文章检索
- 会员充值：采用支付宝沙箱支付
- ...

后台系统分为：

- 用户管理
  - 用户列表
  - 个人资料相关管理
    - 学历管理
    - 行业管理
- 会员管理
- 充值管理
- 博客管理
  - 文章管理
  - 分类管理
  - 标签管理
- 日志管理
  - 登录日志
  - 操作日志
- 网站相关管理
  - 广告管理
  - 公告通知
  - 用户留言
- 系统设置管理
- 角色管理
- 管理员列表
- 菜单管理
- 个人中心
- ...

## 使用到的相关平台、技术和工具

- Vue 2.x 全家桶 （界面开发框架）
- Node.js < 17.x.x （运行环境）
- ElementUI （UI 框架）
- iview（部分导入）
- vue-template-admin （模板二次开发）
- express （后端 MVC 框架）
- MongoDB （数据库）
- alipay-sdk （沙箱支付）
- @alicloud/sms-sdk （短信验证）
- nodemailer （邮箱验证）
- svg-captcha （图片验证码）
- Mock.js （数据模拟）
- jest （测试）
- Echarts （地图）
- tinymce （富文本编辑器）
- morgan （日志记录）

## 使用流程

1、克隆

```npm
git clone -b master https://gitee.com/hkjGitee/blog.git
```

2、安装依赖

- 前台：

```bash
cd ./client/back-end
npm install

cd ./client/front-end
npm install
```

- 后台：

```bash
./bin/package.bat # 安装依赖包
```

或者

```bash
cd ./server
npm install
```

3、打开 MongoDB 服务（cmd 命令窗口）

```bash
net start MongoDB
```

4、运行服务

> 需要注意：init.bat 为菜单与角色初始化数据项， 所以必须先执行。

```bash
./bin/init.bat  # 初始化相关静态数据
./bin/start.bat # 运行服务
```

或者

```bash
npm run start
```

5、相关地址

- http://localhost:8081/ 后端 API 接口地址
- http://localhost:9527/ 前台地址
- http://localhost:9528/ 后台地址

## 界面预览

### 用户前台

登录

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image.png)

首页

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image2.png)

会员充值

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image3.png)

博客帮助
![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image4.png)

发布文章

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image5.png)

文章详情

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image6.png)

### 用户后台

用户管理

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image7.png)

会员管理

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image8.png)

充值管理

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image9.png)

博客管理

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image10.png)

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image11.png)

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image12.png)

日志管理

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image13.png)

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image14.png)

网站相关

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image15.png)

系统设置

> 分为了 UI、版心图片、导航栏、底部栏、SEO 设置、博客帮助页面 6 个小模块

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image16.png)

角色管理
![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image17.png)

管理员列表

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image18.png)

菜单管理

![输入图片说明](%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99/Imgs/image19.png)
## 结语

都看到这儿了，不妨动动你的小指头给个 start 儿吧~~