laravel8.5与layuiadmin整合(3)
12. 设置上面的对应路由及方法
/routes/web.php 添加
// 后台布局
Route::group(['prefix' => 'admin'], function() { .... // layuiadmin原模板模块 - 控制台 Route::get('/index',[App\Http\Controllers\Admin\IndexController::class, 'index'])->name('admin.index'); // layuiadmin原模板模块 - 主页一 Route::get('/index1',[App\Http\Controllers\Admin\IndexController::class, 'index1'])->name('admin.index1'); // layuiadmin原模板模块 - 主页二 Route::get('/index2',[App\Http\Controllers\Admin\IndexController::class, 'index2'])->name('admin.index2'); });
/app/Http/Controllers/Admin/IndexController.php 添加
.....
public function index() {
return view('admin.index.index');
}
public function index1() {
return view('admin.index.index1');
}
public function index2() {
return view('admin.index.index2');
}
13. 建立上面对应的三个模板在目录resources/views/admin分别建立
index.blade.php , index1.blade.php ,index2.blade.php
对应layuiadmin中的文件分别是目录 /layuiAdmin/admin/std/dist/views/home
里的三个文件 console.html,homepage1.html,homepage2.html
这里使用 index.blade.php
@extends('admin.base') @section('content') <div class="layui-row layui-col-space15"> <div class="layui-col-md8"> <div class="layui-row layui-col-space15"> <div class="layui-col-md6"> <div class="layui-card"> <div class="layui-card-header">快捷方式</div> <div class="layui-card-body"> <div class="layui-carousel layadmin-carousel layadmin-shortcut"> <div carousel-item> <ul class="layui-row layui-col-space10"> <li class="layui-col-xs3"> <a lay-href="home/homepage1.html"> <i class="layui-icon layui-icon-console"></i> <cite>主页一</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="home/homepage2.html"> <i class="layui-icon layui-icon-chart"></i> <cite>主页二</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="component/layer/list.html"> <i class="layui-icon layui-icon-template-1"></i> <cite>弹层</cite> </a> </li> <li class="layui-col-xs3"> <a layadmin-event="im"> <i class="layui-icon layui-icon-chat"></i> <cite>聊天</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="component/progress/index.html"> <i class="layui-icon layui-icon-find-fill"></i> <cite>进度条</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="app/workorder/list.html"> <i class="layui-icon layui-icon-survey"></i> <cite>工单</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="user/user/list.html"> <i class="layui-icon layui-icon-user"></i> <cite>用户</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/system/website.html"> <i class="layui-icon layui-icon-set"></i> <cite>设置</cite> </a> </li> </ul> <ul class="layui-row layui-col-space10"> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> <li class="layui-col-xs3"> <a lay-href="set/user/info.html"> <i class="layui-icon layui-icon-set"></i> <cite>我的资料</cite> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="layui-col-md6"> <div class="layui-card"> <div class="layui-card-header">待办事项</div> <div class="layui-card-body"> <div class="layui-carousel layadmin-carousel layadmin-backlog"> <div carousel-item> <ul class="layui-row layui-col-space10"> <li class="layui-col-xs6"> <a lay-href="app/content/comment.html" class="layadmin-backlog-body"> <h3>待审评论</h3> <p><cite>66</cite></p> </a> </li> <li class="layui-col-xs6"> <a lay-href="app/forum/list.html" class="layadmin-backlog-body"> <h3>待审帖子</h3> <p><cite>12</cite></p> </a> </li> <li class="layui-col-xs6"> <a lay-href="template/goodslist.html" class="layadmin-backlog-body"> <h3>待审商品</h3> <p><cite>99</cite></p> </a> </li> <li class="layui-col-xs6"> <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});" class="layadmin-backlog-body"> <h3>待发货</h3> <p><cite>20</cite></p> </a> </li> </ul> <ul class="layui-row layui-col-space10"> <li class="layui-col-xs6"> <a href="javascript:;" class="layadmin-backlog-body"> <h3>待审友情链接</h3> <p><cite style="color: #FF5722;">5</cite></p> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">数据概览</div> <div class="layui-card-body"> <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview"> <div carousel-item id="LAY-index-dataview"> <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div> <div></div> <div></div> </div> </div> </div> </div> <div class="layui-card"> <div class="layui-tab layui-tab-brief layadmin-latestData"> <ul class="layui-tab-title"> <li class="layui-this">今日热搜</li> <li>今日热帖</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <table id="LAY-index-topSearch"></table> </div> <div class="layui-tab-item"> <table id="LAY-index-topCard"></table> </div> </div> </div> </div> </div> </div> </div> <div class="layui-col-md4"> <div class="layui-card"> <div class="layui-card-header">版本信息</div> <div class="layui-card-body layui-text"> <table class="layui-table"> <colgroup> <col width="100"> <col> </colgroup> <tbody> <tr> <td>当前版本</td> <td> <script type="text/html" template> v1.0.0 <a href="http://fly.layui.com/docs/3/" target="_blank" style="padding-left: 15px;">更新日志</a> </script> </td> </tr> <tr> <td>基于框架</td> <td> <script type="text/html" template> layui-v2.3.0 </script> </td> </tr> <tr> <td>主要特色</td> <td>零门槛 / 响应式 / 清爽 / 极简</td> </tr> <tr> <td>获取渠道</td> <td style="padding-bottom: 0;"> <div class="layui-btn-container"> <a href="http://www.layui.com/admin/" target="_blank" class="layui-btn layui-btn-danger">获取授权</a> <a href="http://fly.layui.com/download/layuiAdmin/" target="_blank" class="layui-btn">立即下载</a> </div> </td> </tr> </tbody> </table> </div> </div> <div class="layui-card"> <div class="layui-card-header">效果报告</div> <div class="layui-card-body layadmin-takerates"> <div class="layui-progress" lay-showPercent="yes"> <h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）</h3> <div class="layui-progress-bar" lay-percent="65%"></div> </div> <div class="layui-progress" lay-showPercent="yes"> <h3>签到率（日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>）</h3> <div class="layui-progress-bar" lay-percent="32%"></div> </div> </div> </div> <div class="layui-card"> <div class="layui-card-header">实时监控</div> <div class="layui-card-body layadmin-takerates"> <div class="layui-progress" lay-showPercent="yes"> <h3>CPU使用率</h3> <div class="layui-progress-bar" lay-percent="58%"></div> </div> <div class="layui-progress" lay-showPercent="yes"> <h3>内存占用率</h3> <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div> </div> </div> </div> <div class="layui-card"> <div class="layui-card-header">产品动态</div> <div class="layui-card-body"> <div class="layui-carousel layadmin-carousel layadmin-news" data-autoplay="true" data-anim="fade" lay-filter="news"> <div carousel-item> <div><a href="http://fly.layui.com/docs/2/" target="_blank" class="layui-bg-red">layuiAdmin 快速上手文档</a></div> <div><a href="http://fly.layui.com/vipclub/list/layuiadmin/" target="_blank" class="layui-bg-green">layuiAdmin 会员讨论专区</a></div> <div><a href="http://www.layui.com/admin/#get" target="_blank" class="layui-bg-blue">获得 layui 官方后台模板系统</a></div> </div> </div> </div> </div> <div class="layui-card"> <div class="layui-card-header"> 作者心语 <i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i> </div> <div class="layui-card-body layui-text layadmin-text"> <p>一直以来，layui 秉承无偿开源的初心，虔诚致力于服务各层次前后端 Web 开发者，在商业横飞的当今时代，这一信念从未动摇。即便身单力薄，仍然重拾决心，埋头造轮，以尽可能地填补产品本身的缺口。</p> <p>在过去的一段的时间，我一直在寻求持久之道，已维持你眼前所见的一切。而 layuiAdmin 是我们尝试解决的手段之一。我相信真正有爱于 layui 生态的你，定然不会错过这一拥抱吧。</p> <p>子曰：君子不用防，小人防不住。请务必通过官网正规渠道，获得 <a href="http://www.layui.com/admin/" target="_blank">layuiAdmin</a>！</p> <p>—— 贤心（<a href="http://www.layui.com/" target="_blank">layui.com</a>）</p> </div> </div> </div> </div> @endsection @section('script') <script> layui.use(['index', 'console']); </script> @endsection
14. 建立以上需要的模板文件 resources/views/admin/base.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/static/admin/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/static/admin/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
@yield('content')
</div>
<script src="/js/jquery.min.js"></script>
<script src="/static/admin/layuiadmin/layui/layui.js"></script>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
layui.config({
base: '/static/admin/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['element','form','layer','table','upload','laydate'],function () {
var element = layui.element;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var upload = layui.upload;
var laydate = layui.laydate;
//错误提示
@if(count($errors)>0)
@foreach($errors->all() as $error)
layer.msg("{{$error}}",{icon:5});
@break
@endforeach
@endif
//信息提示
@if(session('status'))
layer.msg("{{session('status')}}",{icon:6});
@endif
});
</script>
@yield('script')
</body>
</html>
此时浏览 /admin 即可以操作左侧主页下的 控制台， 主页一， 主页二查看实时效果了
浙公网安备 33010602011771号