为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
PHP vuex

webp

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主题,根据自己的喜好和审美观稍作修改。

实现

效果图


  • 移动端


    webp

    博客

    webp

    后台管理

  • pc端


    webp

    博客

    webp

    后台管理

php写博客接口

  • 项目结构

webp

image.png

  • 返回值helper

webp

image.png


其中<code>success_result、fail_result</code>这两个方法是接口返回的json结构,<code>success、fail</code>这两个方法是model返回给controller的json结构,这样封装统一返回接口,比较好管理。

  • 后台管理权限检查

这里我使用了token作为权限认证,每次登陆都会重新生成一个新的token以及更新有效期,保存进数据库。
在Common_model中实现token检查:


webp



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


点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消