# 个人博客系统-前端 **Repository Path**: AminDev/myblog-frontend ## Basic Information - **Project Name**: 个人博客系统-前端 - **Description**: 一个简单的个人博客系统的前端代码，前端技术栈包括Vue，ElementUI，Echarts，Vuex，Vue-Router等，系统分为前台展示和后台管理两个部分，前台部分主要分为了引导页，首页，随笔，项目，留言和关于我页面，使用响应式布局，能够自适应移动端，后台有首页，博客管理，撰写博客，用户管理，分类管理，标签管理，评论管理，随笔管理，项目管理，个人中心，图片管理。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 78 - **Created**: 2022-10-11 - **Last Updated**: 2022-10-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 博客上线地址： 欢迎访问我的博客！[http://hikari.top](http://hikari.top) ## 项目介绍 实现了一个简单的个人博客系统，技术栈为后端SpringBoot+JPA+MySQL,前端Vue+ElementUI+Echarts系统分为前台展示和后台管理两个部分，前台部分主要分为了引导页，首页，随笔，项目，留言和关于我页面，使用响应式布局，能够自适应移动端，后台有首页，博客管理，撰写博客，用户管理，分类管理，标签管理，评论管理，随笔管理，项目管理，个人中心，图片管理。 ## 项目开源地址： 博客前端：[https://gitee.com/tyoubin_admin/myblog-frontend.git](https://gitee.com/tyoubin_admin/myblog-frontend.git) 博客后端：[https://gitee.com/tyoubin_admin/myblog-backend.git](https://gitee.com/tyoubin_admin/myblog-backend.git) *本项目将长期更新与维护，欢迎拉取和star！* ## 项目截图及亮点 **博客引导页**：随机二次元背景，透明菜单栏，环绕边框动画，动态简介，动态下拉按钮。点击顶部半透明导航栏相应菜单可进行页面切换，博客搜索，用户登录和注册。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/87f2a1fb3eac43748e099d025de87b47.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **博客首页**：博客，分类，标签以及最新推荐。博客分页显示，点击下方分页可进行页面切换，点击分类和标签可以对博客进行筛选。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4e08e9f3eaa04bc2bae180e7d50167b6.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **随笔页**：边框颜色后台获取，markdown文本格式展示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4a405863fbe440c0b637d725fb9e4883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **项目页**：根据项目的完整程度等因素，分为完整项目和小练习两部分，均为部署上线的项目，点击可以跳转显示。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d9823983af964e0cbd7d6df96fa11085.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **留言版**：可匿名发表留言，也可登录后发表。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/270f06819237477794ea0668b004ca0b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **关于我**：展示我的资料，技能，作品，爱好以及自我评价，使用了卡片翻转，轮播图等动画效果。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8d2b3ef815884a9ea5092fffed96d69b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台管理系统首页**：Echarts博客后台数据展示，标签3D球体标签云动画，地图展示不同地区用户数量。鼠标移动到地图块可显示该地区用户的 头像和昵称。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a128410598a84826bfff2336d22d945a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台博客管理**：可直接修改博客的分类，添加或删除标签，点击展开栏可修改博客的首图，点击修改按钮可跳转到博客撰写页面修改博客的标题和内容。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8fee71816f1647cc90fa850c34346d08.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台用户管理**：可查找用户，修改用户的管理权限，删除用户。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2f1ed058679540e3822f69ec2097bff2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台博客撰写**：可编辑博客，选择博客分类，标签，上传博客首图，发布文章 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7476da1497c046ba85cd3b02a429ef62.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台分类管理** ![在这里插入图片描述](https://img-blog.csdnimg.cn/7405788adbab410fb4619583a0ae3326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台标签管理** ![在这里插入图片描述](https://img-blog.csdnimg.cn/b60eb0c945314e4fa3b9ff0e9a335656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台个人中心** ![在这里插入图片描述](https://img-blog.csdnimg.cn/fc06abdf16114d259a99f3175baef45e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台评论管理** ![在这里插入图片描述](https://img-blog.csdnimg.cn/ddbdfca0db624c41b14dc0aad1f96578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台随笔管理**：添加颜色选择器，自定义前台随笔边框颜色 ![在这里插入图片描述](https://img-blog.csdnimg.cn/30653b7f5fc242e2aeb3214c16081ccb.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台项目管理** ![在这里插入图片描述](https://img-blog.csdnimg.cn/0a78b25ef39c4081a50c1c2d88a01d41.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) **后台图片管理**：懒加载，流式布局 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8fd3bcb84cfc4748b144708dac14dd4e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70) ## 项目数据库表设计 ![请添加图片描述](https://img-blog.csdnimg.cn/398c8a7881494291a7dda9b09814aa52.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70)