原文链接：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

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