# Hole

**Repository Path**: yaotengyue/Hole

## Basic Information

- **Project Name**: Hole
- **Description**: 基于ElementUI + SpringBoot + Vue.js + MP 开发的一个夏日直男风极简个人开源站。站点采用前后端分离开发模式，组件式开发，非常适宜作为开发者记录日常工作感悟、生活美好瞬间与一些开源项目心得的一个线上教程仓库。欢迎fork。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-10-30
- **Last Updated**: 2022-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### Hole 
  基于ElementUI + SpringBoot + Vue.js + MP 开发的一个 **夏日直男风** 极简个人开源站。项目前端采用响应式布局，自适应移动端，站点开发基于Axios的前后端分离开发模式，Vue结合ElementUI使前端页面组件化，非常适宜作为开发者记录日常工作感悟、生活美好瞬间与一些开源项目心得的一个线上教程仓库。本项目适合一些已经有一个项目经验基础的朋友进行二次开发，欢迎fork获取开发者站点留言。
### 项目演示地址
    [Hole微站点](http://www.holess.top)
  
### 前台项目截图 
##### 主页 
![主页](https://images.gitee.com/uploads/images/2020/0713/192202_f32ded91_5242443.png "主页.png")
##### 侧边栏
![侧边栏](https://images.gitee.com/uploads/images/2020/0713/194059_fe45e90e_5242443.png "侧边栏信息.png")
##### 分类
![分类](https://images.gitee.com/uploads/images/2020/0713/192544_2045a19b_5242443.png "分类.png")

##### 标签
![标签](https://images.gitee.com/uploads/images/2020/0713/192604_aed59014_5242443.png "标签.png")
##### 类型列表
![类型列表](https://images.gitee.com/uploads/images/2020/0713/193610_a3bd928b_5242443.png "类型列表.png")

##### 图册
![图册](https://images.gitee.com/uploads/images/2020/0713/192748_75b853c7_5242443.png "图册1.png")
![图册](https://images.gitee.com/uploads/images/2020/0713/192758_11b1ef86_5242443.png "图册2.png")

##### 图册详情
![图册详情1](https://images.gitee.com/uploads/images/2020/0713/193027_1156aa04_5242443.png "影片详情1.png")
![图册详情2](https://images.gitee.com/uploads/images/2020/0713/193050_5321b683_5242443.png "影片详情2.png")

##### 归档
![归档](https://images.gitee.com/uploads/images/2020/0713/192907_0ad6555d_5242443.png "归档.png")

##### 关于我
![关于我](https://images.gitee.com/uploads/images/2020/0713/192928_ae88efea_5242443.png "关于我.png")

##### 留言
![留言](https://images.gitee.com/uploads/images/2020/0713/193001_ef335e15_5242443.png "留言.png")

### 后台项目截图 
##### 个人中心
![个人中心](https://images.gitee.com/uploads/images/2020/0713/193413_b259d509_5242443.png "个人中心.png")
##### 数据可视化
![数据可视化](https://images.gitee.com/uploads/images/2020/0713/193446_7e3f755a_5242443.png "数据可视化中心.png")
##### 图集管理
![图集管理](https://images.gitee.com/uploads/images/2020/0713/193708_3031ce41_5242443.png "图集管理.png")
##### 标签管理
![标签管理](https://images.gitee.com/uploads/images/2020/0713/193835_02b81160_5242443.png "标签管理.png")
##### 分类管理
![分类管理](https://images.gitee.com/uploads/images/2020/0713/193854_0a3b44b4_5242443.png "分类管理.png")
##### 文章管理
![文章管理](https://images.gitee.com/uploads/images/2020/0713/193909_0785165c_5242443.png "文章管理.png")
##### 评论管理
![评论管理](https://images.gitee.com/uploads/images/2020/0713/193925_12186e36_5242443.png "评论管理.png")
##### 留言管理
![留言管理](https://images.gitee.com/uploads/images/2020/0713/193942_ebba904a_5242443.png "留言管理.png")
##### 友情链接
![友情链接](https://images.gitee.com/uploads/images/2020/0713/193955_f8d23e7d_5242443.png "友情链接.png")
  
### 项目进度
基础功能构建完成，做为一个个人站系列的项目之一，Hole 应付日常记录与展示完全无压力，但细节从来决定生死，我们并不能止步于此，任何一件作品都应该去尽心对待。后继要处理的就是一些锦上添花的事：如交互效果，视觉改进等众多属于前端的事，开发者本身不是专业的前端，所以css动画交互这块仍然然需要用心学习。后继更新要点将会记录在md中，欢迎品尝。


### 前端技术栈
  1.Vue  2.9.6
  2.axios  
  3.ElementUI  
  4.vue-echarts  
  5.mavon-editor  
  6.vue-router  
  7. ...
### 后端技术栈
  1.SpringBoot  
  2.Shrio + token + jwt 
  3.MyBatis-Plus 
  4.部分接口遵循Restful风格  
  5.MySQL  
### 快速运行
  1. 克隆本项目到本地
  2. 前端Node环境搭建，开发者使用的是最新的环境
  3. sql生成表
  4. 前端项目使用Webstorm运行， npm run dev
  5. 启用redis.serve (后继更新可移除，小型站点使用redis作用不大)
  6. tomcat 8080
  7. 前端访问8080端口，由于前端已经配置了端口转发，后端SpringBoot服务不能关闭
  8. localhost://8080 ---> 8090