微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > thinkphp多数据库访问 - 创建博客页面路由 - 多应用配置系统和博客两个应用
博主信息
博文 70
粉丝 1
评论 0
访问量 68763
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
thinkphp多数据库访问 - 创建博客页面路由 - 多应用配置系统和博客两个应用
葡萄枝子
原创
948人浏览过

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

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 测试

内容管理

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

内容编辑

修改测试

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：坚持不易，看好你
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录