前言
2021年6月，我，毕业了，通过校招进入某家公司就职，公司里面的项目有React、vue、H5小程序等，由于刚进公司，前面一个月基本都是处于空闲和熟悉公司项目的状态，有足够的时间让你学习😅，在此期间，在B站找了一套叫黑马电商项目,是一项vue+elementUl的电商后台管理项目，视频共200多集，连续花了一周多的时间看完教程，并跟着视频敲了一遍，加上之前毕业设计时学习了php作为后端开发语言，对后端开发也有一点基础，于是便开始本博客网站的开发，开发持续用了11天(8月27号至9月6日)的时间，基本完成了博客论坛的开发(评论、移动端适配、帖子顶置、帖子隐藏后面续陆续添加的)，这段时间很忙，但很充实，本次博客网站的开发，用到的知识点不算难，但是整个项目下来，用到知识点很多，其中包括前端、后端、以及项目上线时服务器的搭建等一系列知识，对所学到的知识进行了综合运用，并且在开发的过程中，遇到问题，及时解决问题，也能清楚认识到自己在那方面知识薄弱，并且有针对性地去学习，有利于新手快速成长，提高学习效率。
本博客源码已经发布到gitee，后续将会继续完善优化、如果本源码对你有帮助，下载源码时、记得点个Star🌟哦！点击Fork操作会复制一份目标仓库（包括文件，所有提交历史，issues，和其余一些东西），到你自己的Gitee帐号下。
鄙人的gitee(码云)源码主页： chenxuyun (chenxuyun) - Gitee.com
在本项目中有任何不懂的地方，可以加入交流群提问，QQ群：375072669
使用技术
博客使用了 vue+elementUI+php+mysql 技术栈。后端技术只需学会增、删、改、查、文件上传就行，有点编程基础，基本可以边学习边做，使用php的作为后端开发，可以使用Wampserver这个软件在windows系统下搭建PHP运行环境。
WampServer是一款由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包。免去了开发人员将时间花费在繁琐的配置环境过程，从而腾出更多精力去做开发。
即在Windows操作系统下的apache、php和mysql的服务器软件。
功能特点：
使用的技术: vue+elementUi+php+mysql，适配PC,移动端，响应式布局。
发帖: 使用的文本编辑器vue-quill-editor插件，发帖支持插入图片、视频，😜表情，输入冒号后面输入字母能模糊匹配列出对应的smile表情，如下图
留言评论: 可以对发布的帖子进行评论，二级评论回复。
分类 : 发帖时，对文章进行顶置，帖子隐藏，文章类型进行分类
按分类筛选，比如点击，javaScript,将返回所有javaScript文章。
搜索: 支持模糊搜索功能。
后台功能: 可以对帖子，评论进行删除，修改，增加帖子功能。
登录功能： 注册功能没开发(仅个人使用)
置顶功能：发帖支持文章置顶(点击查看具体数据库实现)
网站资源管理功能：可以进行对上传后的图片进行删除操作(2022-04-22开发)
权限：
1、普通用户只能对自己的帖子进行修改和删除
2、评论只有管理员能删除
改进点&&新增。：
1、开发日期：2022-5-6
-
查看博客帖子方式调整：由原来的文章内容保存到浏览器sessionStorage再取出来改为路由跳转传参(携带博客id)的方式后根据id发起请求来获取文章内容。
-
为什么要这样写？：这样写，可以复制对应文章的网址，分享出去，他人点击链接就能直接访问到对应帖子的内容
2、开发日期：2022-07-10
-
增加图片放大预览功能，点击图片就能放大预览，二次点击(于2022-09-11改为程序自动点击)，可以逐张查看当前文章所有图片。
3、开发日期：2022-08-09
- 使用echarts插件开发博客文章分类统计图标
4、开发日期：2022-08-21
- 增加视频上传功能，目前仅限上传mp4格式视频，上传后端处理方式是返回视频资源的url链接，发现所用的编辑器插入视频时使默认用的是iframe 标签，插入avi格式的视频url是直接给我下载了，暂时无法找到其他解决方法，因此暂时限制上传视频格式为mp4。
- 插入视频时使用video标签覆盖默认的iframe标签(video标签也无法播放avi视频资源url)。
5、开发日期：2022-08-23
-
增加文件上传loading效果，上传文件时显示loading效果，上传成功或者失败时关闭loading效果
-
优化前端后端上传代码，前后端进行文件类型检验，限制上传指定文件类型。
-
文章分类下拉选择列表，由原来写死在前端改为从接口获取数据库里面的分类渲染作为下拉分类选择列表数据
-
为了演示loading效果，调试开启弱网络(模拟网络非常慢的情况)，所以演示中上传的图片比较慢
-
6、开发日期：2022-09-07
- 增加文末【相关文章】推荐功能 (设计灵感来自【稀土掘金】的推荐)
- 优化后端博客文章获取接口代码
- PHP后端实现推荐【相关文章】sql语句如下。
// 随机返回5条与当前阅读类型文章,id!='$id'：过滤当前已经展示的文章
$sql = "select * from blog_container where tag='$tag' AND id!='$id' order by RAND() limit 5";
博客源码
1、前端源码gitee链接
https://gitee.com/chenxuyun/vue_blog.git
2、后端源码gitee链接
https://gitee.com/chenxuyun/vue_blog_server.git
安装与运行环境
第一步：安装node.js
第二步安装依赖： npm install
第三步：运行命令，npm run serve
main.js 是本地调试的入口主文件，修改后台调用接口，上传图片接口，在Container.vue文件中修改
main-prod.js 是打包正式发布的入口文件，里面的接口改成你后台php文件路径
本地部署教程可以参看这个源码：gitee.com/chenxuyun/b…
或者到微信公众【软件聚导航】==>点击状态栏【爬虫文章】==> 【部署教程】
注意点：本博客sql文件是从数据库8.0版本导出，如果你的数据库版本低于8.0，可能出现无法导入，具体解决方案 www.52luntan.xyz/vue_blog/di…
成品效果展示：
博客已经实现多端适配、手机端、PC端、平板均做了适配
手机端效果图(通过小米11，红米Note 7 Pro，iphon 13 ，iphon 12 Pro 测试布局均可正常展示)，如果你发现其他设备访问时出现页面布局问题，可以加群反馈。
Ipad 端效果 (Ipad mini 、Ipad Air 测试)
window系统本地 如何搭建Apache服务器 运行PHP后端程序
可以关注微信公众号【软件聚导航】点击状态栏中的==>【爬虫文章】==>【部署教程】
博客效果预览地址
(博客1.0) www.52luntan.xyz/vue_blog/di…
