search

博客列表 >thinkphp多数据库访问 - 创建博客页面路由 - 多应用配置系统和博客两个应用

thinkphp多数据库访问 - 创建博客页面路由 - 多应用配置系统和博客两个应用

葡萄枝子
葡萄枝子原创
2021年06月09日 13:56:58716浏览

多数据库访问 - 创建博客页面路由 - 多应用配置系统和博客两个应用

1、访问多少个数据库，切换多个数据库 2、创建博客页面的路由 3、生成多应用，配置管理系统和博客，2个应用

1. 访问多个数据库，切换多个数据库

  • config\database.php 默认数据库切换
  1. // 默认使用的数据库连接配置
  2. 'default'         => env('database.driver', 'mysql'),
  • 更多的数据库配置信息下添加
  1. // 更多的数据库配置信息
  2. 'laravel' => [
  3.     // 数据库类型
  4.     'type'            => env('database.type', 'mysql'),
  5.     // 服务器地址
  6.     'hostname'        => env('database.hostname', '127.0.0.1'),
  7.     // 数据库名
  8.     'database'        => 'laravel',
  9.     // 用户名
  10.     'username'        => env('database.username', 'root'),
  11.     // 密码
  12.     'password'        => '123456',
  13.     // 端口
  14.     'hostport'        => env('database.hostport', '3306'),
  15.     // 数据库连接参数
  16.     'params'          => [],
  17.     // 数据库编码默认采用utf8
  18.     'charset'         => env('database.charset', 'utf8'),
  19.     // 数据库表前缀
  20.     'prefix'          => env('database.prefix', ''),
  22.     // 数据库部署方式:0 集中式(单一服务器),1 分布式(主从服务器)
  23.     'deploy'          => 0,
  24.     // 数据库读写是否分离 主从式有效
  25.     'rw_separate'     => false,
  26.     // 读写分离后 主服务器数量
  27.     'master_num'      => 1,
  28.     // 指定从服务器序号
  29.     'slave_no'        => '',
  30.     // 是否严格检查字段是否存在
  31.     'fields_strict'   => true,
  32.     // 是否需要断线重连
  33.     'break_reconnect' => false,
  34.     // 监听SQL
  35.     'trigger_sql'     => env('app_debug', true),
  36.     // 开启字段缓存
  37.     'fields_cache'    => false,
  38. ],
  • app\index\controller\index.php 访问 laravel 数据库的 cat 前 3 个分类
  1. public function demo()
  2. {
  3.     // 
  4.     $res[] = Db::connect('laravel')->table('cat')->field(['id', 'name'])->where('id', '<=', 3)->select();
  5.     halt($res[0]->toArray());
  6. }

多数据库访问切换

2. 创建博客前端页面的路由

  • route\app.php 添加
  1. use think\facade\Route;
  3. Route::get('/', 'Index/index'); // 首页
  4. Route::get('/cat/<id>', 'Index/cat')->ext('html'); // 分类页
  5. Route::get('/search', 'Index/search'); // 搜索页
  6. Route::get('/detail/<id>', 'Index/detail')->ext('html'); // 详情页

3. 生成多应用，配置管理系统和博客，2个应用

3.1 多应用已生成，已生成

  1. composer require topthink/think-multi-app

3.2 博客前端页面应用

  1. 创建公共模型
  • 公共模型 app\common\model\Boke.php
  1. namespace app\common\model;
  3. use think\Model;
  4. use app\common\model\Cat;
  6. class Boke extends Model
  7. {
  8.     protected $pk = 'id';
  9.     protected $name = 'boke';
  11.     // 模型字段
  12.     protected $schema = [
  13.         'id' => 'int',
  14.         'title' => 'string',
  15.         'img' => 'string',
  16.         'content' => 'string',
  17.         'date' => 'date',
  18.         'cat' => 'int',
  19.         'num' => 'int',
  20.         'hot' => 'int',
  21.         'status' => 'int'
  22.     ];
  24.     // 获取器
  25.     public function getStatusAttr($value)
  26.     {
  27.         $status = [-1 => '删除', 0 => '禁用', 1 => '正常', 2 => '待审核'];
  28.         return $status[$value];
  29.     }
  31.     // 图片
  32.     public function getImgAttr($value)
  33.     {
  34.         if (preg_match('/\/.+?\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/i', $value)) {
  35.             $value = '<img src="' . $value . '" style="width:50px;height:30px;" />';
  36.         }
  37.         return $value;
  38.     }
  40.     // 分类
  41.     public function getCatAttr($value) {
  42.         return Cat::where('id', $value)->value('name');
  43.     }
  45.     // 修改器
  46.     public function setDateAttr($value, $data) {
  47.         $this->set('date', date('Y-m-d'));
  48.     }
  50.     // 浏览量
  51.     public function setNumAttr($value, $data) {
  52.         $this->set('num', (int)$value);
  53.     }
  54. }
  • app\common\model\Cat.php
  1. namespace app\common\model;
  3. use think\Model;
  5. class Cat extends Model
  6. {
  7.     protected $pk = 'id';
  8.     protected $name = 'cat';
  10.     // 模型字段
  11.     protected $schema = [
  12.         'id' => 'int',
  13.         'name' => 'string',
  14.         'sort' => 'int',
  15.         'status' => 'int'
  16.     ];
  18.     // 获取器
  19.     public function getStatusAttr($value)
  20.     {
  21.         $status = [0 => '禁用', 1 => '正常'];
  22.         return $status[$value];
  23.     }
  24. }
  1. 创建公共控制器
  • app\common\controller\Base.php
  1. namespace app\common\controller;
  3. use app\BaseController;
  5. class Base extends BaseController
  6. {
  7.     // 初始化
  8.     protected function initialize()
  9.     {
  10.     }
  11. }
  1. 创建应用继承公共控制器和模型
  • 博客控制器 app\controller\Index.php
  1. namespace app\controller;
  3. use app\common\controller\Base;
  4. use app\common\model\Boke;
  5. use app\common\model\Cat;
  6. use think\facade\Db;
  7. use think\facade\View;
  8. use think\facade\Request;
  10. class Index extends Base
  11. {
  12.     // 首页
  13.     public function index()
  14.     {
  15.         $map[] = ['status', '=', 1];
  16.         $archive = '最新文章';
  17.         // 导航
  18.         $catList = Cat::where($map)->select();
  19.         view::assign('CatList', $catList);
  20.         // 分类列表
  21.         view::assign('cat', 0);
  22.         // 搜索列表
  23.         view::assign('search', '');
  24.         // 详情页
  25.         view::assign('p', 0);
  26.         view::assign('archive', $archive);
  27.         // 热门文章
  28.         $hotList = Boke::where('status', 1)->order('num', 'desc')->limit(5)->select();
  29.         view::assign('hotList', $hotList);
  30.         // 渲染输出
  31.         $artList = Boke::where($map)->order('id', 'desc')->paginate([
  32.             'list_rows' => 2, // 分页2条每页
  33.             // 'query' => Request::param()
  34.         ]);
  35.         view::assign('artList', $artList);
  36.         return view::fetch('index/index');
  37.     }
  39.     // 分类页
  40.     public function cat($id)
  41.     {
  42.         $map[] = ['status', '=', 1];
  43.         $archive = '最新文章';
  44.         // 导航
  45.         $catList = Cat::where($map)->select();
  46.         view::assign('CatList', $catList);
  47.         // 分类列表
  48.         view::assign('cat', $id);
  49.         if ($id) {
  50.             $map[] = ['cat', '=', $id];
  51.             $archive = Cat::where('id', $id)->value('name');
  52.         }
  53.         // 搜索列表
  54.         view::assign('search', '');
  55.         // 详情页
  56.         view::assign('p', 0);
  57.         view::assign('archive', $archive);
  58.         // 热门文章
  59.         $hotList = Boke::where('status', 1)->order('num', 'desc')->limit(5)->select();
  60.         view::assign('hotList', $hotList);
  61.         // 渲染输出
  62.         $artList = Boke::where($map)->order('id', 'desc')->paginate([
  63.             'list_rows' => 2, // 分页2条每页
  64.             // 'query' => Request::param()
  65.         ]);
  66.         view::assign('artList', $artList);
  67.         return view::fetch('index/index');
  68.     }
  70.     // 搜索页
  71.     public function search()
  72.     {
  73.         $map[] = ['status', '=', 1];
  74.         $archive = '最新文章';
  75.         // 导航
  76.         $catList = Cat::where($map)->select();
  77.         view::assign('CatList', $catList);
  78.         // 分类列表
  79.         view::assign('cat', 0);
  80.         // 搜索列表
  81.         $search = Request::param('search');
  82.         view::assign('search', $search);
  83.         if ($search) {
  84.             $map[] = ['title|content', 'like', "%{$search}%"];
  85.             $archive = '搜索结果';
  86.         }
  87.         // 详情页
  88.         view::assign('p', 0);
  89.         view::assign('archive', $archive);
  90.         // 热门文章
  91.         $hotList = Boke::where('status', 1)->order('num', 'desc')->limit(5)->select();
  92.         view::assign('hotList', $hotList);
  93.         // 渲染输出
  94.         $artList = Boke::where($map)->order('id', 'desc')->paginate([
  95.             'list_rows' => 2, // 分页2条每页
  96.             'query' => Request::param()
  97.         ]);
  98.         view::assign('artList', $artList);
  99.         return view::fetch('index/index');
  100.     }
  102.     // 详情页
  103.     public function detail($id)
  104.     {
  105.         $map[] = ['status', '=', 1];
  106.         $archive = '最新文章';
  107.         // 导航
  108.         $catList = Cat::where($map)->select();
  109.         view::assign('CatList', $catList);
  110.         // 分类列表
  111.         view::assign('cat', 0);
  112.         // 搜索列表
  113.         view::assign('search', '');
  114.         // 详情页
  115.         view::assign('p', $id);
  116.         if ($id) {
  117.             $map[] = ['id', '=', $id];
  118.             $archive = '';
  119.             // 阅读数自增
  120.             Boke::where('id', $id)->inc('num')->update();
  121.         }
  122.         view::assign('archive', $archive);
  123.         // 热门文章
  124.         $hotList = Boke::where('status', 1)->order('num', 'desc')->limit(5)->select();
  125.         view::assign('hotList', $hotList);
  126.         // 渲染输出
  127.         $artList = Boke::where($map)->order('id', 'desc')->paginate([
  128.             'list_rows' => 2, // 分页2条每页
  129.             'query' => Request::param()
  130.         ]);
  131.         view::assign('artList', $artList);
  132.         return view::fetch('index/index');
  133.     }
  134. }
  1. 创建博客视图
  • 创建静态模板 app\view\public\base.html
  1. {include file='public/header'/}
  2. <div class="container">
  3.     <div class="row">
  4.         <!-- 左侧列表 -->
  5.         <div class="col-md-8">
  6.             <div class="panel panel-default">
  7.                 {block name='archive'}
  8.                 <div class="panel-heading">Panel heading without title</div>
  9.                 {/block}
  10.                 <div class="panel-body">
  11.                     <!-- 列表 -->
  12.                     {block name='list'}
  13.                     <div class="row">
  14.                         <div class="col-md-12">
  15.                             <div class="panel panel-default">
  16.                                 <div class="panel-body">
  17.                                     <div class="row">
  18.                                         <div class="col-sm-3 col-md-3">
  19.                                             <a href="#" class="thumbnail">
  20.                                                 <img style="width:100%;max-height:110px;"
  21.                                                     src=""
  22.                                                     alt="...">
  23.                                             </a>
  24.                                         </div>
  25.                                         <div class="col-sm-9 col-md-9">
  26.                                             <h3 style="margin-top: 0;">Thumbnail label</h3>
  27.                                             <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
  28.                                                 elit non mi porta gravida at eget metus. Nullam id dolor id nibh
  29.                                                 ultricies.</p>
  30.                                             <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
  31.                                         </div>
  32.                                     </div>
  33.                                 </div>
  34.                             </div>
  35.                         </div>
  36.                     </div>
  37.                     {/block}
  38.                     <!-- 分页 -->
  39.                     {block name='pages'}
  40.                     <div class="row">
  41.                         <div class="col-md-12 text-center">
  42.                             <nav aria-label="Page navigation">
  43.                                 <ul class="pagination">
  44.                                     <li>
  45.                                         <a href="#" aria-label="Previous">
  46.                                             <span aria-hidden="true">&laquo;</span>
  47.                                         </a>
  48.                                     </li>
  49.                                     <li><a href="#">1</a></li>
  50.                                     <li><a href="#">2</a></li>
  51.                                     <li><a href="#">3</a></li>
  52.                                     <li><a href="#">4</a></li>
  53.                                     <li><a href="#">5</a></li>
  54.                                     <li>
  55.                                         <a href="#" aria-label="Next">
  56.                                             <span aria-hidden="true">&raquo;</span>
  57.                                         </a>
  58.                                     </li>
  59.                                 </ul>
  60.                             </nav>
  61.                         </div>
  62.                     </div>
  63.                     {/block}
  64.                 </div>
  65.             </div>
  66.         </div>
  67.         <!-- 右侧侧栏 -->
  68.         <div class="col-md-4">
  69.             {block name='side'}
  70.             <div class="panel panel-default">
  71.                 <div class="panel-heading">
  72.                     <h3 class="panel-title">Panel title</h3>
  73.                 </div>
  74.                 <div class="panel-body">
  75.                     <!-- Panel content -->
  76.                     <div class="list-group">
  77.                         <a href="#" class="list-group-item active">Cras justo odio<span class="badge"></span></a>
  78.                         <a href="#" class="list-group-item">Dapibus ac facilisis in<span class="badge"></span></a>
  79.                         <a href="#" class="list-group-item">Morbi leo risus<span class="badge"></span></a>
  80.                         <a href="#" class="list-group-item">Porta ac consectetur ac<span class="badge"></span></a>
  81.                         <a href="#" class="list-group-item">Vestibulum at eros<span class="badge"></span></a>
  82.                     </div>
  84.                 </div>
  85.             </div>
  86.             {/block}
  87.         </div>
  88.     </div>
  89. </div>
  90. {include file='public/footer'/}
  • 模板头部 app\view\public\header.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>{$title|default="tpboke bootstrap"}</title>
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  10.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
  11.     <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
  12.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  13. </head>
  15. <body>
  16.     <!-- 导航 -->
  17.     <nav class="navbar navbar-default navbar-static-top">
  18.         <div class="container">
  19.             <!-- Brand and toggle get grouped for better mobile display -->
  20.             <div class="navbar-header">
  21.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  22.                     <span class="sr-only">Toggle navigation</span>
  23.                     <span class="icon-bar"></span>
  24.                     <span class="icon-bar"></span>
  25.                     <span class="icon-bar"></span>
  26.                 </button>
  27.                 <a class="navbar-brand" href="/">Brand</a>
  28.             </div>
  30.             <!-- Collect the nav links, forms, and other content for toggling -->
  31.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  32.                 <!-- 导航 -->
  33.                 <ul class="nav navbar-nav">
  34.                     <li{if $cat === 0} class="active"{/if}><a href="/">首页</a></li>
  35.                     {volist name='CatList' id='vo' key='k'}
  36.                     <li{if $vo.id === (int)$cat} class="active"{/if}><a href="/cat/{$vo.id}.html">{$vo.name}</a></li>
  37.                     {/volist}
  38.                     <li class="dropdown">
  39.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  40.                         <ul class="dropdown-menu">
  41.                             <li><a href="#">Action</a></li>
  42.                             <li><a href="#">Another action</a></li>
  43.                             <li><a href="#">Something else here</a></li>
  44.                             <li role="separator" class="divider"></li>
  45.                             <li><a href="#">Separated link</a></li>
  46.                             <li role="separator" class="divider"></li>
  47.                             <li><a href="#">One more separated link</a></li>
  48.                         </ul>
  49.                     </li>
  50.                 </ul>
  51.                 <!-- 搜索 -->
  52.                 <form class="navbar-form navbar-right" action="/search">
  53.                     <div class="form-group">
  54.                         <div class="input-group">
  55.                             <input type="text" class="form-control" placeholder="Search" name="search" value="{$search}" required="required" />
  56.                             <span class="input-group-btn"><button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
  57.                             </span>
  58.                         </div>
  59.                     </div>
  60.                 </form>
  61.             </div>
  62.             <!-- /.navbar-collapse -->
  63.         </div>
  64.         <!-- /.container-fluid -->
  65.     </nav>
  66.     <!-- 面包屑 -->
  67.     <div class="container">
  68.         <div class="row">
  69.             <div class="col-md-12">
  70.                 <ol class="breadcrumb">
  71.                     <li><a href="#">Home</a></li>
  72.                     <li><a href="#">Library</a></li>
  73.                     <li class="active">Data</li>
  74.                 </ol>
  75.             </div>
  76.         </div>
  77.     </div>
  • 模板底部 app\view\public\footer.html
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <p>&copy 2021 Company, Inc.</p>
  5.         </div>
  6.     </div>
  7. </div>
  8. </body>
  10. </html>
  1. 创建博客继承视图 app\view\index\index.html
  1. {extend name='public/base'/}
  2. {block name='archive'}
  3. {if $archive}
  4. <div class="panel-heading">{$archive}</div>
  5. {/if}
  6. {/block}
  7. <!-- 列表 -->
  8. {block name='list'}
  9. {volist name='artList' id='vo' empty="暂无数据"}
  10. <div class="row">
  11.     <div class="col-md-12">
  12.         {if $p}
  13.         <h1>{$vo.title}</h1>
  14.         <p><span class="glyphicon glyphicon-time" aria-hidden="true"></span> {$vo.date} &nbsp; <span
  15.                 class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> {$vo.num}</p>
  16.         <p>{$vo.content|raw}</p>
  17.         {else /}
  18.         <div class="panel panel-default">
  19.             <div class="panel-body">
  20.                 <div class="row">
  21.                     {if $vo.img}
  22.                     <div class="col-sm-3 col-md-3">
  23.                         <a href="/detail/{$vo.id}.html" title="{$vo.title}" class="thumbnail">
  24.                             <img alt="{$vo.title}" style="width:100%;max-height:110px;" src="{$vo.img}"
  25.                                 alt="{$vo.title}">
  26.                         </a>
  27.                     </div>
  28.                     {/if}
  29.                     <div{if $vo.img} class="col-sm-9 col-md-9" {else/} class="col-sm-12 col-md-12" {/if}>
  30.                         <h3 style="margin-top: 0;"><a href="/detail/{$vo.id}.html"
  31.                                 title="{$vo.title}">{$vo.title}</a></h3>
  32.                         <p>{$vo.content|mb_strimwidth=0,110,'...','utf-8'}</p>
  33.                         <p><a href="/detail/{$vo.id}.html" rel="nofollow" title="Reamd more"
  34.                                 class="btn btn-primary" role="button">Read more...</a></p>
  35.                 </div>
  36.             </div>
  37.         </div>
  38.     </div>
  39.     {/if}
  40. </div>
  41. </div>
  42. {/volist}
  43. {/block}
  44. <!-- 分页 -->
  45. {block name='pages'}
  46. {empty name='p'}
  47. <div class="row">
  48.     <div class="col-md-12 text-center">
  49.         <nav aria-label="Page navigation">
  50.             {$artList|raw}
  51.         </nav>
  52.     </div>
  53. </div>
  54. {/empty}
  55. {/block}
  56. <!-- 侧栏模块 -->
  57. {block name='side'}
  58. <div class="panel panel-default">
  59.     <div class="panel-heading">
  60.         <h3 class="panel-title">热门文章</h3>
  61.     </div>
  62.     <div class="panel-body">
  63.         <!-- Panel content -->
  64.         <div class="list-group">
  65.             {volist name='hotList' id='vo' empty='暂无记录'}
  66.             <a href="/detail/{$vo.id}.html"
  67.                 class="list-group-item{if $p === $vo.id} active{/if}">{$vo.title}<span
  68.                     class="badge">{$vo.num}</span></a>
  69.             {/volist}
  70.         </div>
  72.     </div>
  73. </div>
  74. {/block}
  • 运行博客前端

分类运行

详情页运行

3.3 配置博客管理系统应用

  1. 创建公用继承模板文件
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.   <title>layout 管理界面大布局示例 - Layui</title>
  8.   <meta name="renderer" content="webkit">
  9.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  11.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="format-detection" content="telephone=no">
  15.   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css" media="all">
  16.   <style>
  17.     /* 移动端 */
  18.     @media screen and (max-width: 768px) {
  20.       .layui-layout-admin .layui-layout-left,
  21.       .layui-layout-admin .layui-body,
  22.       .layui-layout-admin .layui-footer {
  23.         left: 0;
  24.       }
  26.       .layui-layout-admin .layui-side {
  27.         left: -300px;
  28.       }
  29.     }
  30.   </style>
  31. </head>
  33. <body>
  35.   <div class="layui-layout layui-layout-admin">
  36.     <div class="layui-header">
  37.       <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
  38.       <!-- 头部区域（可配合layui 已有的水平导航） -->
  39.       <ul class="layui-nav layui-layout-left">
  40.         <!-- 移动端显示 -->
  41.         <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
  42.           <i class="layui-icon layui-icon-spread-left"></i>
  43.         </li>
  45.         <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
  46.         <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
  47.         <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
  48.         <li class="layui-nav-item">
  49.           <a href="javascript:;">nav groups</a>
  50.           <dl class="layui-nav-child">
  51.             <dd><a href="">menu 11</a></dd>
  52.             <dd><a href="">menu 22</a></dd>
  53.             <dd><a href="">menu 33</a></dd>
  54.           </dl>
  55.         </li>
  58.       </ul>
  59.       <ul class="layui-nav layui-layout-right">
  60.         <li class="layui-nav-item layui-hide layui-show-md-inline-block">
  61.           <a href="javascript:;">
  62.             <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
  63.               class="layui-nav-img">
  64.             tester
  65.           </a>
  66.           <dl class="layui-nav-child">
  67.             <dd><a href="">Your Profile</a></dd>
  68.             <dd><a href="">Settings</a></dd>
  69.             <dd><a href="">Sign out</a></dd>
  70.           </dl>
  71.         </li>
  72.         <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
  73.           <a href="javascript:;">
  74.             <i class="layui-icon layui-icon-more-vertical"></i>
  75.           </a>
  76.         </li>
  77.       </ul>
  78.     </div>
  80.     <div class="layui-side layui-bg-black">
  81.       <div class="layui-side-scroll">
  82.         <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  83.         <ul class="layui-nav layui-nav-tree" lay-filter="test">
  84.           <li class="layui-nav-item layui-nav-itemed">
  85.             <a class="" href="javascript:;">menu group 1</a>
  86.             <dl class="layui-nav-child">
  87.               <dd><a href="/admin/cat/" target="main">博客分类</a></dd>
  88.               <dd><a href="/admin/boke/" target="main">博客文章</a></dd>
  89.               <dd><a href="javascript:;">menu 3</a></dd>
  90.               <dd><a href="">the links</a></dd>
  91.             </dl>
  92.           </li>
  93.           <li class="layui-nav-item">
  94.             <a href="javascript:;">menu group 2</a>
  95.             <dl class="layui-nav-child">
  96.               <dd><a href="javascript:;">list 1</a></dd>
  97.               <dd><a href="javascript:;">list 2</a></dd>
  98.               <dd><a href="">超链接</a></dd>
  99.             </dl>
  100.           </li>
  101.           <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
  102.           <li class="layui-nav-item"><a href="">the links</a></li>
  103.         </ul>
  104.       </div>
  105.     </div>
  107.     <div class="layui-body">
  108.       <!-- 内容主体区域 -->
  109.       <iframe name="main" srcdoc="内容主体区域" scrolling="yes" style="width:100%;height:100%;border:none"></iframe>
  110.     </div>
  112.     <div class="layui-footer">
  113.       <!-- 底部固定区域 -->
  114.       底部固定区域
  115.     </div>
  116.   </div>
  117.   <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
  118.   <script>
  119.     //JS 
  120.     layui.use(['element', 'layer', 'util'], function () {
  121.       var element = layui.element
  122.         , layer = layui.layer
  123.         , util = layui.util
  124.         , $ = layui.$;
  126.       //头部事件
  127.       util.event('lay-header-event', {
  128.         //左侧菜单事件
  129.         menuLeft: function (othis) {
  130.           console.log(othis);
  131.           layer.msg('展开左侧菜单的操作', { icon: 0 });
  132.         }
  133.         , menuRight: function () {
  134.           layer.open({
  135.             type: 1
  136.             , title: '更多'
  137.             , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
  138.             , area: ['260px', '100%']
  139.             , offset: 'rt' //右上角
  140.             , anim: 5
  141.             , shadeClose: true
  142.             , scrollbar: false
  143.           });
  144.         }
  145.       });
  147.     });
  148.   </script>
  149. </body>
  151. </html>
  • layui 供继承的列表页 app\view\public\list.html
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.     <title>layout 管理界面大布局示例 - Layui</title>
  8.     <meta name="renderer" content="webkit">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  11.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12.     <meta name="apple-mobile-web-app-capable" content="yes">
  13.     <meta name="format-detection" content="telephone=no">
  15.     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css" media="all">
  16. </head>
  18. <body>
  19.     <div style="padding: 15px;">
  20.         <!-- 搜索框 -->
  21.         {block name='search-form'}
  22.         <div class="layui-form">
  23.             <div class="layui-form-item" style="margin-bottom: 0;">
  24.                 <!-- 搜索字段 -->
  25.                 {block name='search-fields'}
  26.                 <div class="layui-inline">
  27.                     <label class="layui-form-label">ID</label>
  28.                     <div class="layui-input-block">
  29.                         <input type="text" name="id" value="" placeholder="请输入" class="layui-input">
  30.                     </div>
  31.                 </div>
  32.                 {/block}
  33.                 <div class="layui-inline"><button type="submit" lay-submit lay-filter="search" class="layui-btn"><i
  34.                             class="layui-icon layui-icon-search"></i></button></div>
  35.             </div>
  36.         </div>
  37.         {/block}
  39.         <!-- 数据表格 -->
  40.         {block name='datatable'}
  41.         <table id="dataTable" lay-filter="dataTable"></table>
  42.         {/block}
  44.         <!-- 头工具栏 -->
  45.         {block name='toolbar'}
  46.         <script type="text/html" id="toolbar">
  47.             <div class="layui-btn-container">
  48.                 <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
  49.                 <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  50.                 <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
  51.             </div>
  52.         </script>
  53.         {/block}
  55.         <!-- 行工具 -->
  56.         {block name='databar'}
  57.         <script type="text/html" id="databar">
  58.             <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  59.             <a class="layui-btn layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  60.             <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>  
  61.         </script>
  62.         {/block}
  63.     </div>
  65.     <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
  66.     <!-- js -->
  67.     {block name='js'}
  68.     <script>
  69.         var url = "/module/controller/index", //请求路径
  70.             page = true, //是否分页
  71.             cols = [ //表头字段
  72.                 [{
  73.                     checkbox: true,
  74.                     fixed: 'left'
  75.                 }, {
  76.                     field: 'id',
  77.                     title: 'ID',
  78.                     width: 80,
  79.                     sort: true
  80.                 }, {
  81.                     title: '操作',
  82.                     align: 'center',
  83.                     width: 170,
  84.                     toolbar: '#databar'
  85.                 }]
  86.             ];
  87.     </script>
  88.     {/block}
  89.     <script>
  90.         layui.use(['table', 'form', 'upload', 'layedit'], function () {
  91.             var $ = layui.jquery,
  92.                 table = layui.table,
  93.                 form = layui.form;
  95.             var controller = url.substring(0, url.lastIndexOf('/'));
  97.             //渲染表格
  98.             table.render({
  99.                 elem: '#dataTable',
  100.                 toolbar: '#toolbar',
  101.                 defaultToolbar: ['filter', 'print', 'exports'],
  102.                 cellMinWidth: 80,
  103.                 height: $('button[lay-filter="search"]').length ? 'full-95' : 'full-50',
  104.                 title: $(document).title,
  105.                 //数据接口
  106.                 url: url,
  107.                 //搜索
  108.                 where: {
  109.                     search: ""
  110.                 },
  111.                 //开启分页
  112.                 page: page,
  113.                 //表头
  114.                 cols: cols
  115.             });
  117.             // 搜索框事件
  118.             form.on('submit(search)', function (data) {
  119.                 var field = data.field;
  120.                 //执行重载
  121.                 table.reload('dataTable', {
  122.                     where: {
  123.                         search: field
  124.                     }
  125.                 });
  126.             });
  128.             //头工具栏事件
  129.             table.on('toolbar(dataTable)', function (obj) {
  130.                 var checkStatus = table.checkStatus(obj.config.id);
  131.                 var data = checkStatus.data;
  132.                 //批量删除
  133.                 if (obj.event === 'delAll') {
  134.                     if (data.length === 0) {
  135.                         return layer.msg('请选择数据');
  136.                     }
  137.                     layer.confirm('确定删除吗？', {
  138.                         icon: 3
  139.                     }, function (index) {
  140.                         var id = [];
  141.                         data.forEach(elem => {
  142.                             id.push(elem.id);
  143.                         });
  144.                         $.get(controller + '/del', {
  145.                             id
  146.                         }, function (res) {
  147.                             if (res.code) {
  148.                                 return layer.msg(res.msg, {
  149.                                     icon: 2
  150.                                 });
  151.                             }
  152.                             layer.msg(res.msg);
  153.                             table.reload('dataTable');
  154.                         }, 'json');
  155.                     });
  156.                 }
  157.                 //添加
  158.                 if (obj.event === 'add') {
  159.                     layer.open({
  160.                         type: 2,
  161.                         maxmin: true,
  162.                         title: '添加',
  163.                         shadeClose: true,
  164.                         shade: 0.3,
  165.                         area: ["420px", "450px"],
  166.                         content: controller + '/add',
  167.                     });
  168.                 }
  169.                 //刷新
  170.                 if (obj.event === 'refresh') {
  171.                     table.reload('dataTable');
  172.                 }
  173.             });
  175.             //监听行工具事件
  176.             table.on('tool(dataTable)', function (obj) {
  177.                 var data = obj.data;
  178.                 //删除行
  179.                 if (obj.event === 'del') {
  180.                     layer.confirm('真的删除行么？', {
  181.                         icon: 3
  182.                     }, function (index) {
  183.                         layer.close(index);
  184.                         $.get(controller + '/del', {
  185.                             id: data.id
  186.                         }, function (res) {
  187.                             if (res.code) {
  188.                                 return layer.msg(res.msg, {
  189.                                     icon: 2
  190.                                 });
  191.                             }
  192.                             obj.del();
  193.                             layer.msg(res.msg);
  194.                         }, 'json');
  195.                     });
  196.                 }
  197.                 //编辑行
  198.                 if (obj.event === 'edit') {
  199.                     layer.open({
  200.                         type: 2,
  201.                         maxmin: true,
  202.                         title: '编辑',
  203.                         shadeClose: true,
  204.                         shade: 0.3,
  205.                         area: ["420px", "450px"],
  206.                         content: controller + '/edit?id=' + data.id,
  207.                         success: function (layero, index) {
  208.                             form.on('submit(submit)', function (res) {
  209.                                 var field = res.field;
  210.                                 field.id = data.id;
  211.                                 $.post(controller + '/save_edit', field, function (res) {
  212.                                     if (res.code) {
  213.                                         return layer.msg(res.msg, {
  214.                                             icon: 2
  215.                                         });
  216.                                     }
  217.                                     layer.msg(res.msg);
  218.                                     obj.update(field);
  219.                                     layer.close(index);
  220.                                 }, 'json');
  221.                             });
  222.                         }
  223.                     });
  224.                 }
  225.                 //详情页
  226.                 if (obj.event === 'detail') {
  227.                     window.open(controller.substring(controller.indexOf('/', 2)) + '/' + data.id + '.html', '_blank');
  228.                 }
  229.             });
  230.         });
  231.     </script>
  232. </body>
  234. </html>
  • layui 供继承的表单页 app\view\public\form.html
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.     <title>layout 管理界面大布局示例 - Layui</title>
  8.     <meta name="renderer" content="webkit">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  11.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12.     <meta name="apple-mobile-web-app-capable" content="yes">
  13.     <meta name="format-detection" content="telephone=no">
  15.     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css" media="all">
  16. </head>
  18. <body>
  19.     <div style="padding: 15px;">
  20.         {block name='form'}
  21.         <form class="layui-form" action="">
  22.             {block name='fields'}
  23.             <div class="layui-form-item">
  24.                 <label class="layui-form-label">输入框</label>
  25.                 <div class="layui-input-block">
  26.                     <input type="text" name="title" value="" lay-verify="required" placeholder="请输入" class="layui-input">
  27.                 </div>
  28.             </div>
  29.             {/block}
  30.             {block name='submit'}
  31.             <div class="layui-form-item">
  32.                 <div class="layui-input-block">
  33.                     <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
  34.                     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  35.                 </div>
  36.             </div>
  37.             {/block}
  38.         </form>
  39.         {/block}
  40.     </div>
  42.     <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
  43.     <!-- js -->
  44.     {block name='js'}
  45.     <script>
  46.         //请求路径
  47.         var url = "/module/controller/save";
  48.     </script>
  49.     {/block}
  50.     <script>
  51.         layui.use(['form', 'upload', 'laydate'], function () {
  52.             var $ = layui.jquery,
  53.                 form = layui.form,
  54.                 upload = layui.upload,
  55.                 laydate = layui.laydate;
  57.             //监听提交
  58.             form.on("submit(submit)", function (data) {
  59.                 $.post(url, data.field, function (res) {
  60.                     if (res.code) {
  61.                         return layer.alert(res.msg, {
  62.                             icon: 2
  63.                         });
  64.                     }
  65.                     layer.alert(res.msg, {
  66.                         icon: 1
  67.                     });
  68.                     setTimeout(function () {
  69.                         parent.location.reload();
  70.                     }, 1000);
  71.                 }, "json");
  72.                 return false;
  73.             });
  74.         });
  75.     </script>
  76. </body>
  78. </html>
  1. 管理系统控制器
  • 分类控制器 app\admin\controller\Cat.php
  1. namespace app\admin\controller;
  3. use app\common\controller\Base;
  4. use app\common\model\Cat as CatModel;
  5. use think\facade\View;
  6. use think\facade\Request;
  8. class Cat extends Base
  9. {
  10.     // 列表
  11.     public function index()
  12.     {
  13.         if (Request::isAjax()) {
  14.             $db = CatModel::order('sort', 'desc');
  15.             $data['count'] = $db->count();
  16.             if ($data['count']) {
  17.                 $data['code'] = 0;
  18.             } else {
  19.                 $data['code'] = 1;
  20.                 $data['msg'] = '暂无记录';
  21.             }
  22.             $data['data'] = $db->select();
  23.             return json($data);
  24.         }
  25.         return view::fetch('/cat/index');
  26.     }
  28.     // 添加
  29.     public function add()
  30.     {
  31.         return view::fetch('/cat/add');
  32.     }
  34.     // 保存
  35.     public function save()
  36.     {
  37.         $data = Request::param();
  38.         // 验证
  39.         try {
  40.             $this->validate($data, [
  41.                 'name|分类' => 'require|chsAlpha|unique:cat', // 验证名称唯一
  42.                 'sort|排序' => 'require|number',
  43.                 'status|状态' => 'require|in:0,1',
  44.             ]);
  45.         } catch (\Exception $th) {
  46.             return json(['code' => 1, 'msg' => $th->getMessage()]);
  47.         }
  48.         // 操作
  49.         CatModel::create($data);
  50.         return json(['code' => 0, 'msg' => '添加成功']);
  51.     }
  53.     // 编辑
  54.     public function edit()
  55.     {
  56.         $data = Request::param();
  57.         // 验证
  58.         try {
  59.             $this->validate($data, [
  60.                 'id|分类ID' => 'require|number|unique:cat', // 验证ID唯一
  61.             ]);
  62.         } catch (\Exception $th) {
  63.             return json(['code' => 1, 'msg' => $th->getMessage()]);
  64.         }
  65.         view::assign('data', CatModel::where('id', $data['id'])->find());
  66.         return view::fetch('/cat/edit');
  67.     }
  69.     // 保存编辑
  70.     public function save_edit()
  71.     {
  72.         $data = Request::param();
  73.         // 验证
  74.         try {
  75.             $this->validate($data, [
  76.                 'id|分类ID' => 'require|number|unique:cat', // 验证ID唯一
  77.                 'name|分类' => 'require|chsAlpha|unique:cat', // 验证名称唯一
  78.                 'sort|排序' => 'require|number',
  79.                 'status|状态' => 'require|in:0,1',
  80.             ]);
  81.         } catch (\Exception $th) {
  82.             return json(['code' => 1, 'msg' => $th->getMessage()]);
  83.         }
  84.         // 操作
  85.         CatModel::where('id', $data['id'])->update($data);
  86.         return json(['code' => 0, 'msg' => '修改成功']);
  87.     }
  89.     // 删除
  90.     public function del() {
  91.         $data = Request::param();
  92.         // 操作
  93.         CatModel::whereIn('id', (array)$data['id'])->delete();
  94.         return json(['code' => 0, 'msg' => '删除成功']);
  95.     }
  96. }
  • 内容控制器 app\admin\controller\Boke.php
  1. namespace app\admin\controller;
  3. use app\common\controller\Base;
  4. use app\common\model\Boke as BokeModel;
  5. use app\common\model\Cat as CatModel;
  6. use think\facade\View;
  7. use think\facade\Request;
  9. class Boke extends Base
  10. {
  11.     // 列表
  12.     public function index()
  13.     {
  14.         if (Request::isAjax()) {
  15.             $req = Request::param();
  16.             $map = [];
  17.             // 搜索
  18.             if ($req['search']) {
  19.                 foreach((array)$req['search'] as $k => $v) {
  20.                     if ($v) $map[] = [$k, 'like', "%{$v}%"];
  21.                 }
  22.             }
  23.             // 查询
  24.             $db = BokeModel::where($map)->order('id', 'desc');
  25.             $data['count'] = $db->count();
  26.             if ($data['count']) {
  27.                 $data['code'] = 0;
  28.             } else {
  29.                 $data['code'] = 1;
  30.                 $data['msg'] = '暂无记录';
  31.             }
  32.             // 分页
  33.             $data['data'] = $db->page($req['page'], $req['limit'])->select();
  34.             return json($data);
  35.         }
  36.         return view::fetch('/boke/index');
  37.     }
  39.     // 添加
  40.     public function add()
  41.     {
  42.         $cats = CatModel::where('status', 1)->order('sort', 'desc')->select();
  43.         view::assign('cats', $cats);
  44.         return view::fetch('/boke/add');
  45.     }
  47.     // 保存
  48.     public function save()
  49.     {
  50.         $data = Request::param();
  51.         // 验证
  52.         try {
  53.             $this->validate($data, [
  54.                 'title|标题' => 'require|unique:boke', // 验证标题唯一
  55.                 'content|内容' => 'require',
  56.                 'cat|分类' => 'require|number',
  57.                 'status|状态' => 'require|in:0,1',
  58.             ]);
  59.         } catch (\Exception $th) {
  60.             return json(['code' => 1, 'msg' => $th->getMessage()]);
  61.         }
  62.         // 操作
  63.         CatModel::create($data);
  64.         return json(['code' => 0, 'msg' => '添加成功']);
  65.     }
  67.     // 编辑
  68.     public function edit()
  69.     {
  70.         $data = Request::param();
  71.         // 验证
  72.         try {
  73.             $this->validate($data, [
  74.                 'id|文章ID' => 'require|number|unique:cat', // 验证ID唯一
  75.             ]);
  76.         } catch (\Exception $th) {
  77.             return json(['code' => 1, 'msg' => $th->getMessage()]);
  78.         }
  79.         $cats = CatModel::where('status', 1)->order('sort', 'desc')->select();
  80.         view::assign('cats', $cats);
  81.         view::assign('data', BokeModel::where('id', $data['id'])->find());
  82.         return view::fetch('/boke/edit');
  83.     }
  85.     // 保存编辑
  86.     public function save_edit()
  87.     {
  88.         $data = Request::param();
  89.         // 验证
  90.         try {
  91.             $this->validate($data, [
  92.                 'id|文章ID' => 'require|number|unique:cat', // 验证ID唯一
  93.                 'title|标题' => 'require|unique:boke', // 验证标题唯一
  94.                 'content|内容' => 'require',
  95.                 'cat|分类' => 'require|number',
  96.                 'status|状态' => 'require|in:0,1',
  97.             ]);
  98.         } catch (\Exception $th) {
  99.             return json(['code' => 1, 'msg' => $th->getMessage()]);
  100.         }
  101.         // 操作
  102.         BokeModel::where('id', $data['id'])->update($data);
  103.         return json(['code' => 0, 'msg' => '修改成功']);
  104.     }
  106.     // 删除
  107.     public function del() {
  108.         $data = Request::param();
  109.         // 操作
  110.         BokeModel::whereIn('id', (array)$data['id'])->delete();
  111.         return json(['code' => 0, 'msg' => '删除成功']);
  112.     }
  113. }
  1. 管理系统视图

3.1 分类视图

  • 分类列表视图 app\view\cat\index.html
  1. <!-- 继承列表 -->
  2. {extend name='public/list'/}
  3. <!-- 搜索框置空 -->
  4. {block name='search-form'}
  5. {/block}
  6. <!-- js -->
  7. {block name='js'}
  8. <script>
  9.     var url = "/admin/cat/index", //请求路径
  10.         page = false, //是否分页
  11.         cols = [ //表头字段
  12.             [{
  13.                 checkbox: true,
  14.                 fixed: 'left'
  15.             }, {
  16.                 field: 'id',
  17.                 title: 'ID',
  18.                 width: 80,
  19.                 sort: true
  20.             }, {
  21.                 field: 'name',
  22.                 title: '分类名称',
  23.             }, {
  24.                 field: 'sort',
  25.                 title: '排序',
  26.                 sort: true
  27.             }, {
  28.                 field: 'status',
  29.                 title: '状态',
  30.                 sort: true
  31.             }, {
  32.                 title: '操作',
  33.                 align: 'center',
  34.                 width: 170,
  35.                 toolbar: '#databar'
  36.             }]
  37.         ];
  38. </script>
  39. {/block}
  • 添加表单视图 app\view\cat\add.html
  1. <!-- 继承表单 -->
  2. {extend name='public/form'/}
  3. {block name='fields'}
  4. <div class="layui-form-item">
  5.     <label class="layui-form-label">分类名称</label>
  6.     <div class="layui-input-block">
  7.         <input type="text" name="name" value="" lay-verify="required" placeholder="请输入" class="layui-input">
  8.     </div>
  9. </div>
  10. <div class="layui-form-item">
  11.     <label class="layui-form-label">排序</label>
  12.     <div class="layui-input-inline">
  13.         <input type="number" name="sort" value="0" lay-verify="required" placeholder="请输入" class="layui-input">
  14.     </div>
  15. </div>
  16. <div class="layui-form-item">
  17.     <label class="layui-form-label">状态</label>
  18.     <div class="layui-input-inline">
  19.         <select name="status">
  20.             <option value="1" selected>正常</option>
  21.             <option value="0">禁用</option>
  22.         </select>
  23.     </div>
  24. </div>
  25. {/block}
  26. {block name='js'}
  27. <script>
  28.     //请求路径
  29.     var url = "/admin/cat/save";
  30. </script>
  31. {/block}
  • 编辑表单视图 app\view\cat\edit.html
  1. <!-- 继承表单 -->
  2. {extend name='public/form'/}
  3. {block name='fields'}
  4. <input type="hidden" name="id" value="{$data['id']}">
  5. <div class="layui-form-item">
  6.     <label class="layui-form-label">分类名称</label>
  7.     <div class="layui-input-block">
  8.         <input type="text" name="name" value="{$data['name']}" lay-verify="required" placeholder="请输入" class="layui-input">
  9.     </div>
  10. </div>
  11. <div class="layui-form-item">
  12.     <label class="layui-form-label">排序</label>
  13.     <div class="layui-input-inline">
  14.         <input type="number" name="sort" value="{$data['sort']}" lay-verify="required" placeholder="请输入" class="layui-input">
  15.     </div>
  16. </div>
  17. <div class="layui-form-item">
  18.     <label class="layui-form-label">状态</label>
  19.     <div class="layui-input-inline">
  20.         <select name="status">
  21.             <option value="1"{if $data->getData('status') == '1'} selected{/if}>正常</option>
  22.             <option value="0"{if $data->getData('status') == '0'} selected{/if}>禁用</option>
  23.         </select>
  24.     </div>
  25. </div>
  26. {/block}
  27. {block name='js'}
  28. <script>
  29.     //请求路径
  30.     var url = "/admin/cat/save_edit";
  31. </script>
  32. {/block}

3.2 内容视图

  • 内容列表视图 app\view\boke\index.html
  1. <!-- 继承列表 -->
  2. {extend name='public/list'/}
  3. <!-- 搜索框字段 -->
  4. {block name='search-fields'}
  5. <div class="layui-inline">
  6.     <label class="layui-form-label">ID</label>
  7.     <div class="layui-input-block">
  8.         <input type="text" name="id" value="" placeholder="请输入" class="layui-input">
  9.     </div>
  10. </div>
  11. <div class="layui-inline">
  12.     <label class="layui-form-label">标题</label>
  13.     <div class="layui-input-block">
  14.         <input type="text" name="title" value="" placeholder="请输入" class="layui-input">
  15.     </div>
  16. </div>
  17. <div class="layui-inline">
  18.     <label class="layui-form-label">内容</label>
  19.     <div class="layui-input-block">
  20.         <input type="text" name="content" value="" placeholder="请输入" class="layui-input">
  21.     </div>
  22. </div>
  23. {/block}
  24. <!-- js -->
  25. {block name='js'}
  26. <script>
  27.     var url = "/admin/boke/index",  //请求路径
  28.         page = true,  //是否分页
  29.         cols = [ //表头字段
  30.             [{
  31.                 checkbox: true,
  32.                 fixed: 'left'
  33.             }, {
  34.                 field: 'id',
  35.                 title: 'ID',
  36.                 width: 80,
  37.                 sort: true
  38.             }, {
  39.                 field: 'title',
  40.                 title: '标题',
  41.                 minWidth: 240
  42.             }, {
  43.                 field: 'img',
  44.                 title: '图片',
  45.                 sort: true
  46.             }, {
  47.                 field: 'cat',
  48.                 title: '分类'
  49.             }, {
  50.                 field: 'num',
  51.                 title: '浏览量',
  52.                 sort: true,
  53.                 hide: true //隐藏列
  54.             }, {
  55.                 field: 'hot',
  56.                 title: '热门',
  57.                 sort: true,
  58.                 hide: true //隐藏列
  59.             }, {
  60.                 field: 'status',
  61.                 title: '状态',
  62.                 sort: true
  63.             }, {
  64.                 title: '操作',
  65.                 align: 'center',
  66.                 width: 170,
  67.                 toolbar: '#databar'
  68.             }]
  69.         ];
  70. </script>
  71. {/block}
  • 添加表单视图 app\view\boke\add.html
  1. <!-- 继承表单 -->
  2. {extend name='public/form'/}
  3. {block name='fields'}
  4. <div class="layui-form-item">
  5.     <label class="layui-form-label">标题</label>
  6.     <div class="layui-input-block">
  7.         <input type="text" name="title" value="" lay-verify="required" placeholder="请输入" class="layui-input">
  8.     </div>
  9. </div>
  10. <div class="layui-form-item">
  11.     <label class="layui-form-label">内容</label>
  12.     <div class="layui-input-block">
  13.         <textarea name="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
  14.     </div>
  15. </div>
  16. <div class="layui-form-item">
  17.     <label class="layui-form-label">图片</label>
  18.     <div class="layui-input-block">
  19.         <input type="text" name="img" value="" class="layui-input">
  20.     </div>
  21. </div>
  22. <div class="layui-form-item">
  23.     <label class="layui-form-label">分类</label>
  24.     <div class="layui-input-inline">
  25.         <select name="cat" lay-verify="required">
  26.             <option value="" selected>&mdash; 请选择 &mdash;</option>
  27.             {volist name='cats' id='vo'}
  28.             <option value="{$vo.id}">{$vo.name}</option>
  29.             {/volist}
  30.         </select>
  31.     </div>
  32. </div>
  33. <div class="layui-form-item">
  34.     <label class="layui-form-label">浏览量</label>
  35.     <div class="layui-input-inline">
  36.         <input type="text" name="num" value="" class="layui-input">
  37.     </div>
  38. </div>
  39. <div class="layui-form-item">
  40.     <label class="layui-form-label">热门</label>
  41.     <div class="layui-input-inline">
  42.         <input type="hidden" name="hot" value="0">
  43.         <input type="checkbox" name="hot" lay-skin="primary" value="1" title="热门文章">
  44.     </div>
  45. </div>
  46. <div class="layui-form-item">
  47.     <label class="layui-form-label">状态</label>
  48.     <div class="layui-input-inline">
  49.         <select name="status">
  50.             <option value="1" selected>正常</option>
  51.             <option value="0">禁用</option>
  52.         </select>
  53.     </div>
  54. </div>
  55. {/block}
  56. {block name='js'}
  57. <script>
  58.     //请求路径
  59.     var url = "/admin/boke/save";
  60. </script>
  61. {/block}
  • 编辑表单视图 app\view\boke\edit.html
  1. <!-- 继承表单 -->
  2. {extend name='public/form'/}
  3. {block name='fields'}
  4. <input type="hidden" name="id" value="{$data['id']}">
  5. <div class="layui-form-item">
  6.     <label class="layui-form-label">标题</label>
  7.     <div class="layui-input-block">
  8.         <input type="text" name="title" value="{$data['title']}" lay-verify="required" placeholder="请输入" class="layui-input">
  9.     </div>
  10. </div>
  11. <div class="layui-form-item">
  12.     <label class="layui-form-label">内容</label>
  13.     <div class="layui-input-block">
  14.         <textarea name="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea">{$data['content']}</textarea>
  15.     </div>
  16. </div>
  17. <div class="layui-form-item">
  18.     <label class="layui-form-label">图片</label>
  19.     <div class="layui-input-block">
  20.         <input type="text" name="img" value="{$data->getData('img')}" class="layui-input">
  21.     </div>
  22. </div>
  23. <div class="layui-form-item">
  24.     <label class="layui-form-label">分类</label>
  25.     <div class="layui-input-inline">
  26.         <select name="cat" lay-verify="required">
  27.             <option value="">&mdash; 请选择 &mdash;</option>
  28.             {volist name='cats' id='vo'}
  29.             <option value="{$vo.id}"{if $data->getData('cat') == $vo.id} selected{/if}>{$vo.name}</option>
  30.             {/volist}
  31.         </select>
  32.     </div>
  33. </div>
  34. <div class="layui-form-item">
  35.     <label class="layui-form-label">浏览量</label>
  36.     <div class="layui-input-inline">
  37.         <input type="text" name="num" value="{$data['num']}" class="layui-input">
  38.     </div>
  39. </div>
  40. <div class="layui-form-item">
  41.     <label class="layui-form-label">热门</label>
  42.     <div class="layui-input-inline">
  43.         <input type="hidden" name="hot" value="0">
  44.         <input type="checkbox" name="hot" lay-skin="primary" value="1" title="热门文章"{if ($data['hot'])} checked{/if}>
  45.     </div>
  46. </div>
  47. <div class="layui-form-item">
  48.     <label class="layui-form-label">状态</label>
  49.     <div class="layui-input-inline">
  50.         <select name="status">
  51.             <option value="1"{if $data->getData('status') == '1'} selected{/if}>正常</option>
  52.             <option value="0"{if $data->getData('status') == '0'} selected{/if}>禁用</option>
  53.         </select>
  54.     </div>
  55. </div>
  56. {/block}
  57. {block name='js'}
  58. <script>
  59.     //请求路径
  60.     var url = "/admin/boke/save_edit";
  61. </script>
  62. {/block}

3.3 运行管理系统布局

  • 分类管理，编辑一个分类测试

分类管理

  • 内容管理，搜索 linux 测试

内容管理

  • 内容编辑，修改状态测试

内容编辑

修改测试

上一条：PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}下一条：JS 对象基本用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多