说明

这套博客代码是 HCC 用 Vue 全家桶撸出来的个人站，前后端彻底分家，想改哪边都不会互相扯皮。

前端拿 vue-cli 搭架子，vue-router 管跳转，vuex 存数据，axios 负责跟后端唠嗑。代码高亮靠 highlight.js，页面快速拼积木用 layui 的栅格，手机、电脑都能自动伸缩。所有功能都拆成小组件，样式照着技术胖那套改的，看着清爽。

后端选的是 Laravel 5.7，web 路由给后台页面，api 路由给前端喂数据。后台直接套 X-admin 模板，省得自己画按钮。图片一股脑扔阿里云 OSS，不占地儿。为了防止“只上传不保存”产生垃圾文件，用 Redis 的键过期事件当监工，过期就自动删。写文章用 editor.md，Markdown 写完直接转 HTML，省心。

前台能干啥
– 首页：置顶好文、站短通知、小广告位
– 分类：点一下就能筛出同类文章
– 归档：按月份把旧文翻出来晒
– 标签：想看啥主题，一点即达
– 关于&友链：自我介绍和朋友链接

后台能干啥
– 文章：增删改查、关键词搜索
– 推荐位：想捧哪篇随手置顶
– Banner：轮播图想换就换
– 标签/分类：随意加、随意删
– 通知/关于/友链：寥寥几笔就能改

怎么跑起来
环境：PHP 7.2 + Nginx 1.4 + MySQL 5.6

1. git clone 把码拖下来
2. 把 .env 里的数据库、OSS、Redis 账号填好
3. 把 sql 文件导进库
4. 前端
– 进 home 目录，npm install 装包（先装 Node）
– npm run dev 一把梭，浏览器开 http://localhost:3000
5. 后端
– 进 admin 目录，composer install 拉依赖
– php artisan key:generate 生成密钥
– php artisan serve 把内置服务器跑起来
– 改 redis.conf，把 notify-keyspace-events 设成 “Ex”
– nohup php artisan image:clear >> image-clear.log 2>&1 & 把孤儿文件清道夫挂后台

2018-12-13 更新
– 全面响应式，手机不再挤牙膏
– 加 loading 层，网速慢也看得见动静
– 分页换成流加载，往下拉就能翻页
– 富文本换成 editor.md，Markdown 真香
– 代码块用 highlight.js 高亮，颜值在线
– .env 里追加阿里云 OSS 密钥，图床一键直达

演示图

感谢您的来访，获取更多精彩文章请收藏本站。