引入 SB Admin 2 作为后台管理系统主题
1、下载 SB Admin 2 主题
完全前端基本功能之后,接下来,我们来构建这个 PHP 博客项目后台管理系统,主要包含登录认证,仪表盘页面,专辑、文章的创建、修改和删除,以及消息后台查看等功能。最终后台界面效果图如下(依次是专辑列表页、发布文章页、消息列表页):
专辑列表页
新增文章页
文章列表页
这里我们引入了基于 Bootstrap 框架的 SB Admin 2 作为后台管理系统的主题,你可以从 Start Bootstrap 网站 预览并下载这个主题,或者通过 NPM 来下载安装:
npm i startbootstrap-sb-admin-2 --save-dev
2、初始化前端资源文件
JavaScript 部分
安装完成后,可以在 resources/js
目录下新建 admin.js
,并编写引入 SB Admin 2 的 JavaScript 代码:
window._ = require('lodash');
window.$ = window.jQuery = require('jquery')
require('bootstrap/dist/js/bootstrap.bundle')
require('startbootstrap-sb-admin-2/vendor/jquery-easing/jquery.easing')
require('startbootstrap-sb-admin-2/js/sb-admin-2')
由于 SB Admin 2 依赖 Bootstrap 和 jQuery,所以需要先引入它们。
然后新建 table.js
引入 datatables
组件相关代码用于渲染表格:
require('startbootstrap-sb-admin-2/vendor/datatables/jquery.dataTables')
require('startbootstrap-sb-admin-2/vendor/datatables/dataTables.bootstrap4')
require('startbootstrap-sb-admin-2/js/demo/datatables-demo')
以及 chart.js
引入 chart.js
组件相关代码用于渲染图表:
require('startbootstrap-sb-admin-2/vendor/chart.js/Chart')
require('startbootstrap-sb-admin-2/js/demo/chart-area-demo')
require('startbootstrap-sb-admin-2/js/demo/chart-pie-demo')
require('startbootstrap-sb-admin-2/js/demo/chart-bar-demo')
CSS 部分
接下来,在 resources/sass
目录下新建 admim.scss
用于定义后台管理系统的样式代码,这里引入 SB Admin 2 提供的 Sass 源代码即可:
@import "~startbootstrap-sb-admin-2/scss/sb-admin-2";
通过 Laravel Mix 编译前端资源
做好以上准备工作后,就可以在 webpack.mix.js
中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了:
const mix = require('laravel-mix')
// 编译前台资源
...
// 编译后台资源
mix.js('resources/js/admin.js', 'public/js/admin.js')
.js('resources/js/chart.js', 'public/js/chart.js')
.js('resources/js/table.js', 'public/js/table.js')
.sass('resources/sass/admin.scss', 'public/css/admin.css')
.copy('node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css', 'public/css/table.css');
mix.copy('node_modules/@fortawesome/fontawesome-free/css/all.css', 'public/css/fontawesome.css')
.copy('node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css', 'public/css/table.css');
运行 npm run dev
之后,我们就可以在视图模板中引入对应的前端资源文件了。
3、后台首页视图模板
前端资源文件已经准备好了,接下来,我们来编写后台首页(仪表盘)视图模板进行测试验收,在 resources/views
目录下创建 admin
子目录来存放后台管理系统的视图模板,然后在其中新建 index.php
作为仪表盘视图,这里,为了简化操作和演示流程,我们直接拷贝 SB Admin 2 仪表盘视图 HTML 代码(位于 node_modules/startbootstrap-sb-admin-2/index.html
),然后将其中的前端资源文件调整为本博客项目的资源文件路径:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><?=$pageTitle?></title>
<link href="/css/fontawesome.css" rel="stylesheet" type="text/css">
<link href="/css/admin.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/admin">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3"><?=$siteName?></div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="/">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>管理后台</span></a>
</li>
...
<script src="/js/admin.js"></script>
<script src="/js/chart.js"></script>
</body>
</html>
完整视图模板代码可以在本项目 Github 仓库中获取:https://github.com/nonfu/master-laravel-code/blob/v1.1/practice/blog/resources/views/admin/index.php。
4、后台首页路由实现
最后,我们在 app/routes/web.php
中注册一个渲染上面视图模板的路由:
$router->register('get', 'admin', 'AdminDashboardController@index');
对应的请求处理逻辑位于后台控制器 AdmimDashboardController
的 index
方法中,如果没有创建这个控制器,现在创建它(在 app/http/controller/admin
目录下新建 DashboardController.php
),并编写 index
方法实现如下:
<?php
namespace AppHttpControllerAdmin;
use AppHttpControllerController;
class DashboardController extends Controller
{
public function index()
{
$pageTitle = '管理后台 - ' . $this->container->resolve('app.name');
$siteName = $this->container->resolve('app.name');
$this->view->render('admin/index.php', compact('pageTitle', 'siteName'));
}
}
这里我们只是简单传入页面标题和站点名称到 admin/index.php
视图模板,用于填充对应的变量,然后将这个后台仪表盘页面正常渲染出来。
在项目根目录下运行 composer dump-auto
让新增文件和命名空间可以被自动加载到。
5、测试整体效果
在 blog
项目的 public
目录下运行 php -S localhost:9000
启动 PHP 内置 Web 服务器,然后在浏览器中访问 http://localhost:9000/admin
,就可以看到后台仪表盘页面了:
-w1424
你会看到 FontAwesome 图标都没有正常显示出来,需要手动将 node_modules/@fortawesome/fontawesome-free/webfonts
目录拷贝到项目根目录下的 public
目录中方可:
cp -r node_modules/@fortawesome/fontawesome-free/webfonts public
刷新页面,就可以看到如下效果了:
-w1419
作为后台管理系统,为了安全考虑,肯定不能让任何访客都能访问,我们需要在进入后台管理页面之前,先对用户身份进行认证。下篇教程,学院君会给大家演示如何为博客系统后台添加用户认证功能。
(全文完)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《Nacos系列》之注册中心
- 《Nacos系列》之持久化
- 垃圾收集器详解及参数配置
- 《Nacos系列》之安装与启动
- 盘点 | Python自带的那些数据集
- 使用shuttle实现bytom上跨链资产交换
- (三)Mybatis-Plus代码生成器
- 【Code】关于 GCN,我有三种写法
- MySQL允许在唯一索引字段中添加多个NULL值
- [OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处?
- 日志切割工具-Logrotate实现nginx日志切割
- JVM元数据区
- Linux下指定pip install和make install安装路径
- 日志追踪 sentry
- PHP-FPM多方面调优策略