# 个人博客-前端

**Repository Path**: xmlvhy/personal_blog__front_end

## Basic Information

- **Project Name**: 个人博客-前端
- **Description**: vue全家桶+elementUI
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2020-08-12
- **Last Updated**: 2022-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<iframe src="//player.bilibili.com/player.html?aid=245474205&bvid=BV1uv411b7eM&cid=260663409&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height="700"> </iframe>

## 安装依赖

```
npm install
```

## 运行项目

```
npm run serve
```

## 在线博客地址

http://www.yemengs.cn/

## 项目介绍

#### 项目简介

**基于 vue 全家桶 + ElementUI + node 的前后端分离的项目**

#### 技术栈

##### 前端

> vue 全家桶
>
> vue-socket.io
>
> echarts
>
> axios
>
> Element UI
>
> > 插件：
> >
> > better-scroll
> >
> > mavon-editor

##### 后端

> node
>
> koa
>
> > jsonwebtoken
> >
> > koa-multer
>
> socket.io

##### 数据库

> mongodb

##### 服务器

> nginx

#### 博客功能模块

- 文章模块
- 留言模块
- 公告模块
- 日志模块
- 音乐模块
- 后台管理模块

#### 博客页面效果图

- 首页

![](https://pic.rmb.bdstatic.com/bjh/dd8e7263c4e03bb3dd88ef605a35bb35.png)

- 文章详情页

  ![QQ截图20200519121229](https://pic.rmb.bdstatic.com/bjh/21b22f44820585f36bf0931aec0bbc3a.png)

- 留言

  ![](https://pic.rmb.bdstatic.com/bjh/6f0c856ac9df9764d99e0d98689b242b.png)

- 归档

![QQ截图20200519121312](https://pic.rmb.bdstatic.com/bjh/08f5ecc0cf5f406a886aefa6d193f551.png)

- 通知

  ![](https://pic.rmb.bdstatic.com/bjh/ed3bb776c120248cb31b89f5fcf1b834.png)

- 聊天页

![](https://pic.rmb.bdstatic.com/bjh/b0c1c7bd340cc62c9e65dfa5518a9ab4.png)

- 统计

![QQ截图20200519122019](https://pic.rmb.bdstatic.com/bjh/1051dc1d6714fb2364eaafb3ba28bbd8.png)

- 音乐

![QQ截图20200519121326](https://pic.rmb.bdstatic.com/bjh/73837ee0c92e4854e1781ee9ad04fba8.png)

6.后台管理

![QQ截图20200519121345](https://pic.rmb.bdstatic.com/bjh/61008ac2f2a7af043dbe3c3a8d7810c8.png)

#### 文章模块

文章模块主要使用了 mavonEditor 来进行文章的编写，具体使用方式请访问 [mavonEditor](https://github.com/hinesboy/mavonEditor) 官网查看。

![QQ截图20200519122859](./效果图/QQ截图20200519122859.png)

文章模块目前已经完成的功能：发表，查看，编辑，删除，文章评论

#### 文章评论

![QQ截图20200519123705](https://pic.rmb.bdstatic.com/bjh/5afa470db7af62c96834f3f3b3493a13.png)

![QQ截图20200519124133](./效果图/QQ截图20200519124133.png)

##### 后台管理新评论

![QQ截图20200519124241](./效果图/QQ截图20200519124241.png)

博主可在后台管理评论时执行三个操作：查看详情，标为已读，回复评论

#### 手机端适配

(图片由视频转为 gif，所以展示效果有点不太好)

博客里的部分页面已经完成移动端适配，没有适配的页面有：关于后台的一些页面和登陆注册页面

![QQ截图20200519124241](./效果图/phone.gif)

#### 音乐模块

##### 音乐模块页面

- 发现音乐

- 推荐歌单

- 最新音乐

- 最新 MV

- 搜索音乐

- 歌词页

  (更多的页面可以查看 uni-app 网易云音乐项目，那里的页面写的比较全一点)

- 自定义播放器

  > 因为原生的 audio 样式是简单的，所以在写该模块的时候就重写了播放器的样式（audio 组件），具体代码可以下载后查看

- 播放暂停
- 歌曲切换
- 歌词显示
- 播放列表
- 播放模式（随机，循环，单曲循环）

##### 使用 vuex 管理播放列表实现列表播放

​ 具体实现方法请下载代码查看或者访问 [使用 vuex 管理播放列表实现列表播放](http://www.yemengs.cn/article?id=5eb4d8e1c94c016228b4300b)

#### 关于页面滚动

页面滚动使用了 vuescroll 插件，感觉使用起来还是不错的，具体使用方式请访问：[vuescroll 官网](https://vuescrolljs.yvescoding.org/zh/)

#### 博客后台管理

博客后台管理目前只支持博主访问（未开放注册功能），主要分为：文章管理，个人信息修改，留言管理，评论管理，日志管理（日志访问权限的设置），公告管理

## 博客后台

下载 **个人博客--后端** 仓库里的代码

## 关于其他功能

待开发完善......