基于 Laravel6.x 构建的博客应用,支持 Markdown,支持图片拖拽上传,基于 RBAC 权限管理系统

2019-12-02 admin

首页.png

基于 RBAC 的权限管理后台,Dashboard 页面统计了用户总数、文章发布总数、评论率、评论总数、文章支持按天、按月、按年统计、支持按分类、按标签统计……

后台首页.png

同时兼容 HTML 编辑器和 Markdown 编辑器

富文本编辑器.png

markdown 编辑器.png

Markdown 编辑器:支持拖拽粘贴上传图片、预览、全屏、分屏预览

markdown 编辑器预览效果.png

后台用户.png

项目概述

功能如下

  • 用户认证 —— 注册、登录、退出;
  • 个人中心 —— 用户个人中心,编辑资料;
  • 用户授权 —— 作者才能删除自己的内容;
  • 上传图片 —— 修改头像和编辑文章时上传图片;
  • 表单验证 —— 使用表单验证类;
  • 文章支持分类、多标签;
  • 编辑文章支持 markdown 编辑器 、html 编辑器;
  • markdown 编辑器支持拖拽上传图片、语法高亮、预览、全屏、分屏实时预览;
  • 文章发布时自动 Slug 翻译,支持使用队列方式以提高响应;
  • 站点『活跃用户』计算,一小时计算一次;
  • 多角色权限管理 —— 允许站长,管理员权限的存在;
  • 后台管理 —— 基于 RBAC 后台数据模型管理;
  • 邮件通知 —— 发送新回复邮件通知,队列发送邮件;
  • 站内通知 —— 文章有新回复;
  • 自定义 Artisan 命令行 —— 自定义活跃用户计算命令;
  • 自定义 Trait —— 活跃用户的业务逻辑实现;
  • 自定义中间件 —— 记录用户的最后登录时间;
  • XSS 安全防御;
  • 第三方授权登录,目前支持 GitHub,兼容 Facebook,Twitter,LinkedIn,Google,GitHub,GitLab 和 Bitbucket 的身份验证;
  • 支持自定义 meta title、description、keywords;
  • 支持友链

运行环境要求

  • Nginx 1.8+
  • PHP 7.0+
  • Mysql 5.7+
  • Redis 3.0+

开发环境部署和安装

本项目代码使用 PHP 框架 laravel6.x 开发,本地开发环境使用 Laravel Homestead

基础安装

  1. 克隆源代码

克隆 larablog 源代码到本地:

// gitee
git clone git@gitee.com:pudongping/larablog.git

// GitHub
git clone git@github.com:pudongping/larablog.git

  1. 安装扩展包依赖
// 先切换到 larablog 项目根目录
cd larablog

// 执行安装命令
composer install
  1. 生成配置文件
cp .env.example .env

你可以根据情况修改 .env 文件里的内容,如数据库连接、缓存、邮件设置、第三方授权登录等:


DB_HOST=localhost
DB_DATABASE=larablog
DB_USERNAME=homestead
DB_PASSWORD=secret

  1. 生成数据表及生成测试数据
// 需要生成测试数据则执行:
php artisan migrate --seed

// 不需要生成测试数据则执行:
php artisan migrate
  1. 生成秘钥

php artisan key:generate

  1. 创建 storage 软连接

php artisan storage:link

  1. 赋予 storage 相应权限

// 建议在 Linux 系统中新建一个 www 用户,并设置该用户不可登录系统
useradd -s /sbin/nologin www

// 将项目目录所有权赋予 www 用户
chown -Rf www:www larablog

// 给 storage 目录赋权限
chmod -Rf 0755 larablog/storage/

  1. 配置 hosts 文件 (如果直接想部署在线上环境,则跳过此步骤)

如果开发环境没有采用 Laravel Homestead 则 ip 映射以你实际为主,一般为 127.0.0.1。我这里使用的 Laravel Homestead 虚拟机的 ip 地址为:192.168.10.10

// Linux 或 MacOS 环境

echo "192.168.10.10   larablog.test" | sudo tee -a /etc/hosts

// Windows 环境
需要打开 C:/Windows/System32/Drivers/etc/hosts  文件,然后新增一行

192.168.10.10 larablog.test

前端安装

  1. 安装 npm 和 yarn

CentOS / Fedora / RHEL 环境下

文档地址:https://yarn.bootcss.com/docs…

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
sudo yum install yarn
## OR ##
sudo dnf install yarn

Windows 环境下

直接去官网 https://nodejs.org/en 下载安装最新版本。

请安装最新版本的 Yarn —— http://yarnpkg.cn/zh-Hans/docs/install

  1. 为 NPM 和 Yarn 配置淘宝镜像,加速安装包下载
npm config set registry=https://registry.npm.taobao.org

yarn config set registry https://registry.npm.taobao.org
  1. 使用 Yarn 安装前端依赖包
yarn install

或者

npm install
  • 监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下,一旦资源文件发生变化,Webpack 会自动重新编译。
npm run watch-poll

// 如果遇到报错,尝试先执行以下命令更新 npm 到最新版本,之后再次执行监控命令
npm install -g npm
// 运行所有 Mix 任务...
npm run dev

// 运行所有 Mix 任务并缩小输出..
npm run production

访问入口

管理员账号密码如下:

username: 1414818093@qq.com
password: 123456

默认网站第一位用户为站长角色,第二位用户为管理员角色。如果填充了测试数据,则默认所有用户的密码为:123456

至此,安装完成^_^。enjoy yourself……

后端扩展包使用情况

前端扩展包使用情况

邮箱认证

  • 开发环境时将 .ENV 文件设置为如下所示,将邮箱认证邮件发送至当前日志中,以便调试

    MAIL_DRIVER=log
    
  • 生产环境时,建议将 .ENV 文件中相关邮件设置为自己所需配置,以下为默认配置

    MAIL_DRIVER=smtp
    MAIL_HOST=smtp.mailtrap.io
    MAIL_PORT=2525
    MAIL_USERNAME=null
    MAIL_PASSWORD=null
    MAIL_ENCRYPTION=null
    

翻译队列


# 如果是开发环境的话,就把队列驱动改回 sync 同步模式,也就是说不使用任何队列,实时执行:
QUEUE_CONNECTION=redis
REDIS_CLIENT=predis

php artisan queue:listen

或者使用

php artisan horizon

文章标题翻译

使用了百度翻译 api,请将 .ENV中的百度 api 相关信息换成你自己的开发者信息

如果不采用百度翻译翻译文章标题的话,那么不用配置 .ENV 文件中以下配置项


# 百度翻译 APP ID
BAIDU_TRANSLATE_APPID=
# 百度翻译密钥 KEY
BAIDU_TRANSLATE_KEY=

并且也不需要更改


QUEUE_CONNECTION=redis

默认保持为


QUEUE_CONNECTION=sync

这样将会每发一篇文章时,将文章标题直接翻译成拼音达到 slug 的效果。

邮件通知

如果不想要,发表文章评论时有邮件通知,可以不用配置,直接忽略,功能上没有任何影响

  1. 需要先开启 QQ 邮箱的 SMTP 支持

如何打开 POP3/SMTP/IMAP 功能?

  1. 邮箱发送配置 (请将以下配置换成你自己的邮箱配置)
# 使用支持 ESMTP 的 SMTP 服务器发送邮件
MAIL_DRIVER=smtp
# QQ 邮箱的 SMTP 服务器地址,必须为此值
MAIL_HOST=smtp.qq.com
# QQ 邮箱的 SMTP 服务器端口,必须为此值
MAIL_PORT=25
# 请将此值换为你的 QQ + @qq.com
MAIL_USERNAME=xxxxxxxxxxxxxx@qq.com
# 密码是我们第一步拿到的授权码
MAIL_PASSWORD=xxxxxxxxx
# 加密类型,选项 null 表示不使用任何加密,其他选项还有 ssl,这里我们使用 tls 即可。
MAIL_ENCRYPTION=tls
# 此值必须同 MAIL_USERNAME 一致
MAIL_FROM_ADDRESS=xxxxxxxxxxxxxx@qq.com
# 用来作为邮件的发送者名称
MAIL_FROM_NAME=番茄炖土豆的个人博客
  1. 如果需要支持队列,请将 .ENV 配置文件中,设置成

QUEUE_CONNECTION=redis

用户切换调试

默认只在调试模式 .ENV 文件中


APP_DEBUG=true

时启用,且 config/sudosu.php 文件中


// 允许使用的顶级域名
'allowed_tlds' => ['dev', 'local', 'test'],

顶级域名(Top Level Domain)加入你域名的顶级域名

第三方授权登录

目前项目中只支持 github 授权登录,因为只申请了 GitHub 的 OAuth application,如果你也需要使用 GitHub 作为第三方授权登录,那么需要按照以下步骤进行:

  1. 在 GitHub 上注册一个 OAuth application
  • Application name:你可以填写你自己的应用名称,比如:myWebBlog
  • Homepage URL:首页连接地址需要添加你自己的,比如:http://larablog.test
  • Application description:应用描述可以随便填写,比如:自己的博客
  • Authorization callback URL:授权回调地址,一定要填写成: <Your domain>/login/github/callback ,比如,我这里则需要填写成:http://larablog.test/login/gi…
  1. 注册成功之后,需要在 .ENV 配置文件中填写申请成功的 Client ID 和 Client Secret。填写好之后,直接访问 http://larablog.test/login/github 即可支持 GitHub 第三方授权登录,如果不设置 .ENV 配置文件,则登录、注册页面不会显示 GitHub 第三方授权登录入口。
# Github Client ID
GITHUB_CLIENT_ID=
# Github Client Secret
GITHUB_CLIENT_SECRET=
  1. 扩展其它第三方授权登录。

Socialite 目前支持 Facebook,Twitter,LinkedIn,Google,GitHub,GitLab 和 Bitbucket 的身份验证。本项目已经对以上支持的第三方登录做了兼容性处理,如果我们需要支持以上除 GitHub 以外的应用(因为目前已经设置好了 GitHub 相关的配置),那么我们只需要按照以下的步骤配置即可。这里以 Google 为例子。

  • 第一步:申请 google 的 Client ID 和 Client Secret。
  • 第二步:将申请的 Client ID 和 Client Secret 填写入 .ENV 配置文件中
GOOGLE_CLIENT_ID="your google client id"
GOOGLE_CLIENT_SECRET="your google client secret"
'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),  // google 客户端授权 ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),  // google 客户端授权密钥
    'redirect' => '/login/google/callback',  // 授权回调链接 如果 redirect 配置项包含的是相对路径,系统会自动将其转化为完整 URL
],
  • 第四步:直接访问 <your domain>/login/google 即可

自定义 Artisan 命令

命令 说明 Cron
php artisan larablog:calculate-active-user 生成活跃用户 一个小时运行一次
php artisan larablog:sync-user-actived-at 从 Redis 中同步最后登录时间到数据库中 每天早上 0 点准时

计划任务

当前计划任务主要是计算主页右侧 「活跃用户」

artisan 命令为:


php artisan larablog:calculate-active-user

和同步 「用户最后活跃时间」 到数据库

artisan 命令为:


php artisan larablog:sync-user-actived-at

并且已经在 调度器 中设置好了相关代码。(调度器在 app/Console/Kernel.php 文件的 schedule 方法中定义)

使用 Linux 系统的 Cron 计划任务需执行


export EDITOR=vi && crontab -e

然后填入以下内容(注意将项目根目录换成你自己的) 这里我的项目根目录为:/home/vagrant/Code/larablog


* * * * * php /home/vagrant/Code/larablog/artisan schedule:run >> /dev/null 2>&1

如果不设定计划任务的话,直接执行以上 Artisan 命令的话会是如下情况: 「活跃用户」将每 65 分钟重新生成一次,设定计划任务的话,默认一个小时重新生成一次。 「用户最后活跃时间」将不会同步到数据库中,将会直接从 Redis 中获取,如果 Redis 中不存在,则以用户注册时间替代。

队列清单

文件路径 说明 调用时机
appNotificationsArticleReplied.php 通知文章作者有新评论回复 文章被评论以后 AppObserversPortalArticleReplyObserver@created
appJobsTranslateSlug.php 将文章标题翻译为 Slug 文章保存时 AppObserversPortalArticleArticleObserver@saved

代码规范

遵循 PSR-2 编码风格规范 遵循 PSR-12 编码规范扩充

其他

代码中涵盖了丰富的注释,如果仍有不清楚之处,可以给我留言。 如果你觉得还不错,请帮我点一下 Star,不胜感激 !❤(❤´艸`❤)

GitHub 地址 码云 地址

License

源代码基于 MIT 协议发布。

[转载]原文链接:https://segmentfault.com/a/1190000021174523

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80282.html

文章标题:基于 Laravel6.x 构建的博客应用,支持 Markdown,支持图片拖拽上传,基于 RBAC 权限管理系统

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
回到顶部