vue.js+php开发个人博客系统
原文链接：http://codebear.cn/article?id=h2IJZNg7YkvwAIlK7MSXi
1.png
前端源码地址: https://github.com/CB-ysx/myblog
博客在线地址: http://codebear.cn
前言
该博客于2018年7月开始开发，8月完成并上线第一个版本，至今处于优化+添加新功能...
为何搭建个人博客
一直想搭建自己的个人博客，写博客可以记录我的学习笔记、总结经验、分享技术等等。尝试过csdn、博客园、hexo写博客，但作为一名程序猿，还是想拥有属于自己的个人博客！
为何使用vue+php搭建博客
- 最初接触vue是今年年初的时候，我的毕业设计是做一个二手车销售网站（呃(⊙o⊙)…一开始看到这题目我是拒绝的，因为我想做android，没办法，老师不给换题目）。这个时候我的前端知识还处于html+css+单纯js或jq实现的阶段，慢慢在网上了解到vue，了解到vue<code>提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件</code>，这正是我喜欢的，所以就用vue写毕业设计，之后就一发不可收拾，接连写了(用Vue实现海报排版设计功能)、视频播放网站。这次就决定用vue写个个人博客。
- 记得两三年接触的php，当时是跟朋友一起做项目，用的thinkphp（不过当初我做的是前端，php就了解一下），之后就一直做android，也是因为我的毕业设计，才开始重新使用php，选择了最容易上手的ci框架，边学边做毕业设计，也慢慢封装了一个方便使用的项目（基本只需写controller和model，配置router、数据库就行），所以这次博客也就选择这个来开发，速度快些。
使用的服务器、技术栈、库
项目放在我的阿里云ECS（学生机）上，图片上传到七牛
- php（ci框架）
- vue
- vue-router
- vuex-router-sync
- vuex
- web-storage-cache
- element-ui
- axios（网络请求）
- cropperjs（图片裁剪，后台管理系统中使用）
- highlight.js（代码高亮）
- marked（markdown文本转html）
- mavon-editor（markdown编辑器）
- moment（日期处理）
- photoswipe（查看大图）
博客界面主题
参考hexo的next主题，根据自己的喜好和审美观稍作修改。
实现
效果图
由于gif压缩比较模糊，可移步到博客直接浏览http://codebear.cn
-
移动端
博客
后台管理
-
pc端
博客
后台管理
php写博客接口
-
项目结构
image.png
-
返回值helper
image.png
其中<code>success_result、fail_result</code>这两个方法是接口返回的json结构，<code>success、fail</code>这两个方法是model返回给controller的json结构，这样封装统一返回接口，比较好管理。
-
后台管理权限检查
这里我使用了token作为权限认证，每次登陆都会重新生成一个新的token以及更新有效期，保存进数据库。
在Common_model中实现token检查：
image.png
在Base_Controller中加载Common_model并获取客户端传来的accessToken：
image.png
其他所有controller都继承Base_controller，在需要权限验证的controller构造方法里调用权限检查：
image.png
博客
后台管理系统与博客写在同一个项目里，使用vue-cli脚手架的项目，自己再改造一下。因为首屏加载慢问题，一些库（vue、element-ui等在非dev模式下改成由cdn加载）。
博客： 首页（最新文章列表）、分类/标签、归档、关于、友链、文章、文章列表、个人简历、搜索
后台管理系统： 首页（数据统计显示）、文章管理（发布、编辑、删除、预览等）、评论管理（回复、删除）、分类/标签管理（添加、删除、编辑）、网站配置（关于、简历、头像等）
一些共用组件： 评论模块（表情实现参考jquery 表情输入框，可存数据库）、markdown文章显示模块（使用marked解析（发布的时候解析成html存进数据库的）、highlight.js处理代码高亮、photoswipe实现大图预览）、图片裁剪上传（el-upload+cropperjs）、文章目录（根据html自动生成）
-
项目结构
image.png
-
axios封装统一处理
image.png
总结
写这个博客系统初版用了大概一个月时间，现在陆陆续续在优化以及添加新功能学到了cdn加载、图片dataUrl转blob、动画效果、pc移动自适应等知识。每一次做项目都是在不断学习，不断进步
前端源码地址: https://github.com/CB-ysx/myblog
博客在线地址: http://codebear.cn
