vue2+node(egg.js)+mysql搭建的个人博客和后台管理系统

147 阅读3分钟

  简述   

  大三开始写的博客,写到现在,还在优化和添加功能(ps:不排除还有很多bug),通过自己写个完整的项目可以大大提示自己的编码水平和解决问题的能力,而且写好又是给自己用的还能给以后面试当做一个正式项目,满满成就感。

首先用的技术,前端用的vue2(不是小白的话推荐用vue3),后端用的egg.js(node.js前端必学),数据库mysql,打包工具webpack

强烈建议不管是走后端还是前端的同学都应该把前后端都学个大概。

 在线地址

        博客地址和后端地址,供大家参考一下(ps:页面设计也是参考了众多博客网站自己瞎设计的,大家可以发挥自己的审美)。

如有疑问,欢迎提出~

blog

(ps:里面有投简历时自己整理的八股和面试的时候面试官提出的前端面试问题,如果对前端岗位有兴趣的话可以收藏下)

http://117.50.179.27/#/home

后台:youke,888888 

http://117.50.179.27:81/

(给了部分权限,但请手下留情不要乱改)

首页http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/http://117.50.179.27:81/#/

效果

博客页面

转存失败,建议直接上传图片文件​编辑

博客主页展示文章列表,轮播,记录之类的

转存失败,建议直接上传图片文件​编辑

文章页,博客核心部分,这边不多讲啦(这个目录组件当时写了我好久)

后面的页面就比较简陋了,因为要毕业了就没啥时间去写,只有断断续续的优化。

转存失败,建议直接上传图片文件​编辑

亮点

1.实时天气,我这边找的百度云的第三方接口,有限量,但是够用,注册一下直接使用非常简单

2.看板娘,live2d实现,互动功能自己写就可以,只要有看板娘的资源即可。

3.因为是自己练习用的,所以组件库也是自己写的,也可以自己动手学习下。当然,第三方的UI库也要会用。

4.换肤系统,巧妙利用css和js就能实现噢,可以看看换肤后的效果

5.手机端兼容,没啥时间再写个手机端的系统了,所以就做了简单的兼容

转存失败,建议直接上传图片文件​编辑

后台管理

然后随便看看后台管理的页面

转存失败,建议直接上传图片文件​编辑

转存失败,建议直接上传图片文件​编辑

转存失败,建议直接上传图片文件​编辑

转存失败,建议直接上传图片文件​编辑

当时这个权限角色管理也手撸了好久,但还好是做出来了,UI方面直接用的elementUI

亮点

  1. 权限管理,手搓一个权限管理,对你前后端的学习都很友好

第一次写,没准备什么东西,在整理下代码后我可以给出部分源码框架进行参考,后面会给大家分享更多东西。