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

2020-09-28 16:18:50 浏览数 (1)

1、下载 SB Admin 2 主题

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

专辑列表页

新增文章页

文章列表页

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

代码语言：javascript复制
npm i startbootstrap-sb-admin-2 --save-dev

2、初始化前端资源文件

JavaScript 部分

安装完成后，可以在 resources/js 目录下新建 admin.js，并编写引入 SB Admin 2 的 JavaScript 代码：

代码语言：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 组件相关代码用于渲染表格：

代码语言：javascript复制
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 组件相关代码用于渲染图表：

代码语言：javascript复制
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 源代码即可：

代码语言：javascript复制
@import "~startbootstrap-sb-admin-2/scss/sb-admin-2";
通过 Laravel Mix 编译前端资源

做好以上准备工作后，就可以在 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了：

代码语言：javascript复制
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），然后将其中的前端资源文件调整为本博客项目的资源文件路径：

代码语言：javascript复制
<!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 中注册一个渲染上面视图模板的路由：

代码语言：javascript复制
$router->register('get', 'admin', 'AdminDashboardController@index');

对应的请求处理逻辑位于后台控制器 AdmimDashboardController 的 index 方法中，如果没有创建这个控制器，现在创建它（在 app/http/controller/admin 目录下新建 DashboardController.php），并编写 index 方法实现如下：

代码语言：javascript复制
<?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 目录中方可：

代码语言：javascript复制
cp -r node_modules/@fortawesome/fontawesome-free/webfonts public

刷新页面，就可以看到如下效果了：

-w1419

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

（全文完）

javascript bootstrap 腾讯云开发者社区 php

0 人点赞