vue.js+php开发个人博客系统

1.png

为何搭建个人博客

一直想搭建自己的个人博客，写博客可以记录我的学习笔记、总结经验、分享技术等等。尝试过csdn、博客园、hexo写博客，但作为一名程序猿，还是想拥有属于自己的个人博客！

为何使用vue+php搭建博客

• 最初接触vue是今年年初的时候，我的毕业设计是做一个二手车销售网站（呃(⊙o⊙)…一开始看到这题目我是拒绝的，因为我想做android，没办法，老师不给换题目）。这个时候我的前端知识还处于html+css+单纯js或jq实现的阶段，慢慢在网上了解到vue，了解到vue<code>提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件</code>，这正是我喜欢的，所以就用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主题，根据自己的喜好和审美观稍作修改。

实现

效果图

• 移动端

  
  

  

  博客

  

  后台管理

• 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检查：

作者：Codebearsh
链接：https://www.jianshu.com/p/b35e00ce9f5f