引入 SB Admin 2 作为后台管理系统主题

下载 SB Admin 2 主题

完全前端基本功能之后,接下来,我们来构建这个 PHP 博客项目后台管理系统,主要包含登录认证,仪表盘页面,专辑、文章的创建、修改和删除,以及消息后台查看等功能。最终后台界面效果图如下(依次是专辑列表页、发布文章页、消息列表页):

专辑列表页

新增文章页

-w1424

这里我们引入了基于 Bootstrap 框架的 SB Admin 2 作为后台管理系统的主题,你可以从 Start Bootstrap 网站 预览并下载这个主题,或者通过 NPM 来下载安装:

npm i startbootstrap-sb-admin-2 --save-dev 

初始化前端资源文件

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 之后,我们就可以在视图模板中引入对应的前端资源文件了。

后台首页视图模板

前端资源文件已经准备好了,接下来,我们来编写后台首页(仪表盘)视图模板进行测试验收,在 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

后台首页路由实现

最后,我们在 app/routes/web.php 中注册一个渲染上面视图模板的路由:

$router->register('get', 'admin', 'Admin\DashboardController@index');

对应的请求处理逻辑位于后台控制器 Admim\DashboardControllerindex 方法中,如果没有创建这个控制器,现在创建它(在 app/http/controller/admin 目录下新建 DashboardController.php),并编写 index 方法实现如下:

<?php
namespace App\Http\Controller\Admin;

use App\Http\Controller\Controller;

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 让新增文件和命名空间可以被自动加载到。

测试整体效果

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

作为后台管理系统,为了安全考虑,肯定不能让任何访客都能访问,我们需要在进入后台管理页面之前,先对用户身份进行认证。下篇教程,学院君会给大家演示如何为博客系统后台添加用户认证功能。

上一篇: PHP 后端表单验证和请求处理

下一篇: 通过 PHP 原生代码基于 Cookie + Session 机制实现后台用户认证功能