姬栎栎(hita):赤伶

1:15 位卑未敢忘忧国!

thinkPHP框架
用thinkPHP开发小型的博客-上
用thinkPHP开发小型的博客-中
用thinkPHP开发小型的博客-下
array_slice($article9,0,3),

用thinkPHP开发小型的博客-上

一 . 从零开始,用adminLTE模板在电脑本地搭建一个最基本的、完整的网站前台和后台。

注意:你必须掌握php里面的thinkPHP3.2或5.0框架的基本知识,才能在我接下来的教程陈述中学得比较顺利,小白慎入,门外汉不得入内!

1 . 从thinpPHP官网http://www.thinkphp.cn下载框架文件夹,这里以5.0.24完整版为例。下载完后,放到环境根目录下,解压。用phpstudy给这个项目设置一个虚拟域名(随意命名的假域名),并把网址目录指向根目录下的public文件夹。在phpstudy的hosts文件里,添加127.0.0.1 虚拟域名(如www.tp1.com),保存。这时候在你的电脑的浏览器输入 www.tp1.com 就可以访问到这个网站的前台了,默认一开始是什么都没有的,只有很简单的一些文字。如下图:


2 . 配置数据库:我建议你在服务器或虚拟主机里为这个本地项目配置一个数据库,也就是本地电脑连接的是线上的数据库,这样做的好处就是你每次通过版本控制提交代码、下载代码(拉代码)时,不用每次都更新本地数据库文件,有时会忘记了提交数据库文件,这是很糟糕的。如果你有好的建议,请留言给我。

数据库配置文件是根目录下的application下的database.php文件。


3 . 前台有了,现在弄后台。我习惯用adminiLTE来作为后台的界面,当然,你也可以用别的后台框架。官网地址是 https://adminlte.io ,下载你喜欢的版本即可。效果图如下:


在根目录下的app(applition,以下都简称app)下的admin(没有的话则新建)下的view(没有的话则新建)下新建layouts文件夹(当然,你也可以命名为common等,随你意),这个文件夹用来存放一些公共(布局)页面文件,新建header.html、left.html、footer.html、layout.html四个文件,名字是随意起的,但是最好要有含义。

把下载好的文件夹里的index.html 的代码拆分为三部份,分别放在header.html、left.html、footer.html三个文件里,具体代码在哪个文件里,见下面的代码,如果index.html里的一些代码没有在这三个文件里,说明这些代码可以被删掉,第四个文件layout.html只要引入header.html文件和left.html文件以及内容即可,只有三行代码,如下:

{include file="layouts/header" /}
{include file="layouts/left" /}
{__CONTENT__}

header.html文件的全部代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Dashboard</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="__adminCSS__/bootstrap.min.css">
  <link rel="stylesheet" href="__adminCSS__/font-awesome.min.css">
  <link rel="stylesheet" href="__adminCSS__/ionicons.min.css">
  <link rel="stylesheet" href="__adminCSS__/AdminLTE.min.css">
  <link rel="stylesheet" href="__adminCSS__/_all-skins.min.css">
  <link rel="stylesheet" href="__adminCSS__/morris.css">
  <link rel="stylesheet" href="__adminCSS__/jquery-jvectormap.css">
  <link rel="stylesheet" href="__adminCSS__/bootstrap-datepicker.min.css">
  <link rel="stylesheet" href="__adminCSS__/daterangepicker.css">
  <link rel="stylesheet" href="__adminCSS__/bootstrap3-wysihtml5.min.css">
  <link rel="stylesheet" href="__adminCSS__/google-fonts.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="index2.html" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>A</b>LT</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>Admin</b>LTE</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->
          <li class="dropdown messages-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-envelope-o"></i>
              <span class="label label-success">4</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 4 messages</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu">
                  <li><!-- start message -->
                    <a href="#">
                      <div class="pull-left">
                        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Support Team
                        <small><i class="fa fa-clock-o"></i> 5 mins</small>
                      </h4>
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <!-- end message -->
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        AdminLTE Design Team
                        <small><i class="fa fa-clock-o"></i> 2 hours</small>
                      </h4>
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Developers
                        <small><i class="fa fa-clock-o"></i> Today</small>
                      </h4>
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Sales Department
                        <small><i class="fa fa-clock-o"></i> Yesterday</small>
                      </h4>
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Reviewers
                        <small><i class="fa fa-clock-o"></i> 2 days</small>
                      </h4>
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="footer"><a href="#">See All Messages</a></li>
            </ul>
          </li>
          <!-- Notifications: style can be found in dropdown.less -->
          <li class="dropdown notifications-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell-o"></i>
              <span class="label label-warning">10</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 10 notifications</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu">
                  <li>
                    <a href="#">
                      <i class="fa fa-users text-aqua"></i> 5 new members joined today
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
                      page and may cause design problems
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-users text-red"></i> 5 new members joined
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-user text-red"></i> You changed your username
                    </a>
                  </li>
                </ul>
              </li>
              <li class="footer"><a href="#">View all</a></li>
            </ul>
          </li>
          <!-- Tasks: style can be found in dropdown.less -->
          <li class="dropdown tasks-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-flag-o"></i>
              <span class="label label-danger">9</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 9 tasks</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu">
                  <li><!-- Task item -->
                    <a href="#">
                      <h3>
                        Design some buttons
                        <small class="pull-right">20%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">20% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <!-- end task item -->
                  <li><!-- Task item -->
                    <a href="#">
                      <h3>
                        Create a nice theme
                        <small class="pull-right">40%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">40% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <!-- end task item -->
                  <li><!-- Task item -->
                    <a href="#">
                      <h3>
                        Some task I need to do
                        <small class="pull-right">60%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">60% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <!-- end task item -->
                  <li><!-- Task item -->
                    <a href="#">
                      <h3>
                        Make beautiful transitions
                        <small class="pull-right">80%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">80% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <!-- end task item -->
                </ul>
              </li>
              <li class="footer">
                <a href="#">View all tasks</a>
              </li>
            </ul>
          </li>
          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
              <span class="hidden-xs">Alexander Pierce</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                <p>
                  Alexander Pierce - Web Developer
                  <small>Member since Nov. 2012</small>
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body">
                <div class="row">
                  <div class="col-xs-4 text-center">
                    <a href="#">Followers</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Sales</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Friends</a>
                  </div>
                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">Profile</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">Sign out</a>
                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->
          <li>
            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  
left.html文件的全部代码如下:

<!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>王玉坛</p>
          <a href="#"><i class="fa fa-circle text-success"></i>在线</a>
        </div>
      </div>
      <!-- search form -->
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>
      </form>
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>仪表板</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i>仪表板1</a></li>
            <li><a href="index2.html"><i class="fa fa-circle-o"></i>仪表板2</a></li>
          </ul>
        </li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

在上一级,也就是根目录下的app/admin/view新建Index文件夹,里面新建index.html文件,它的全部代码如下:

<div class="content-wrapper">
  <section class="content">
    <div class="box box-solid bg-teal-gradient">
      <div class="box-header">
        <i class="fa fa-th"></i>

        <h3 class="box-title">Sales Graph</h3>

        <div class="box-tools pull-right">
          <button type="button" class="btn bg-teal btn-sm" data-widget="collapse">
            <i class="fa fa-minus"></i>
          </button>
          <button type="button" class="btn bg-teal btn-sm" data-widget="remove">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>

      <div class="box-body border-radius-none">
        <div class="chart" id="line-chart" style="height:250px;"></div>
      </div>
    </div>
  </section>
  {include file="layouts/footer" /}
</div>


可以看到,上面的文件里引入了footer.html文件,footer.html文件的全部代码如下:


<footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.4.13
    </div>
    <strong>Copyright &copy; 2014-2019 <a href="https://adminlte.io">AdminLTE</a>.</strong> All rights
    reserved.
</footer>

<!-- jQuery 3 -->
<script src="__adminJS__/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="__adminJS__/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="__adminJS__/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="__adminJS__/raphael.min.js"></script>
<script src="__adminJS__/morris.min.js"></script>
<!-- Sparkline -->
<script src="__adminJS__/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="__adminJS__/jquery-jvectormap-1.2.2.min.js"></script>
<script src="__adminJS__/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="__adminJS__/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="__adminJS__/moment.min.js"></script>
<script src="__adminJS__/daterangepicker.js"></script>
<!-- datepicker -->
<script src="__adminJS__/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="__adminJS__/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="__adminJS__/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="__adminJS__/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="__adminJS__/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="__adminJS__/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="__adminJS__/demo.js"></script>
</body>
</html>

还要在根目录下的app/config.php文件里的return [ ]里加上代码

// 视图输出字符串内容替换
    'view_replace_str' => [
        '__adminCSS__' => '/static/admin/css',
        '__adminJS__'  => '/static/admin/js',

        '__adminIMG__' => '/static/admin/img',
    ],
在根目录下的app/admin/controller/Index.php文件里新增一个方法 index里面渲染视图文件即可:return $this->fetch();


4 . 我们保留已经下载好的adminLTE文件夹,因为我们有时需要用到它里面很多漂亮的部件或功能。


二 . 在后台拥有adminLTE界面的基础上,做 Auth权限验证功能。

1 . 后台需要做权限验证,目前最流行的有两种:RBAC和Auth ,由于我在yii2的教程里已经对RBAC作了简单的介绍了,所以这次就采用Auth。其实在thinkPHP3.*的框架文件夹里本身就带有auth验证类文件扩展,到了5..*版本后反而没有了auto,但是我们可以从3.*版本的文件夹里把这个文件复制过来。

在3.*的根目录下的 \thinkphp\library\think\Auth.class.php复制到5.*根目录下的 \thinkphp\library\think下,改名为Auth.php 。


2 . 按照Auth.php文件里的代码创建三个数据表,注意表前缀。


3 . 把公共布局文件 \application\admin\view\layouts\left.php 的左侧导航菜单代码删掉,改成

<li class="active">
        <a href="{:url('authGroup/index')}">
                <i class="fa fa-user-o"></i>管理员组
        </a>
</li>

效果图如下:


4 . 在 \application\admin\controller 下新建一个控制器文件 AuthGroup.php,全部代码如下:

<?php 

namespace app\admin\controller;

use think\Controller;
use think\Db;
use app\admin\model\AuthGroup as AuthGroupModel;

class AuthGroup extends Controller
{
/*
数据列表
*/
public function index()
{
$model = new AuthGroupModel;
// $datas = db('auth_group')->where(['status'=>1])->select();//方法1:数据库操作
$datas = AuthGroupModel::paginate(2);//方法2:模型类操作
return view('index',['model'=>$model,'datas'=>$datas]);
}

/*
数据详情
*/
public function view($id)
{
$model = AuthGroupModel::get($id);
return view('view',['model'=>$model]);
}

/*
数据添加(或者叫数据新增)
*/
public function add()
{
$model = new AuthGroupModel;
if(request()->isPost()){
$data = input('post.');
//$add = db('auth_group')->insert($data);//方法1:数据库操作
$add = $model->save($data);//方法2:模型类操作
if($add){
$this->success('添加数据成功!',url('index'));
}else{
$this->error('添加数据失败!请检查。');
}
}
return view('_form',['model'=>$model]);
}

/*
数据编辑(或者叫数据修改、数据更新)
*/
public function edit($id)
{
$model = AuthGroupModel::get($id);
if(request()->isPost()){
$data = input('post.');
//$edit = db('auth_group')->where(['id'=>$id])->update($data);//方法1:数据库操作
$edit = $model->save($data);//方法2:模型类操作
if($edit!==false){//若未修改任何数据,返回值$edit返回0,所以要让它和false作恒等比较判断是否成功
$this->success('修改数据成功!',url('index'));
}else{
$this->error('修改数据失败!请检查。');
}
}
$data = db('auth_group')->where(['id'=>$id])->find();
$this->assign('data',$data);
return view('_form',['model'=>$model]);
}

/*
数据删除
*/
public function del($id)
{
$model = AuthGroupModel::get($id);
//$del = db('auth_group')->delete($id);//方法1:数据库操作
$del = $model->delete();//方法2:模型类操作
if($del){
$this->success('删除数据成功!',url('index'));
}else{
$this->error('删除数据失败!请检查。');
}
}

}

 ?>


5 . 在  \application\admin\model下新建一个模型文件 AuthGroup.php ,全部代码如下:

<?php 

namespace app\admin\model;

use think\Model;

class AuthGroup extends Model
{
public $id = '用户组号';
public $title = '用户组名';
public $status = '启用状态';
public $rules = '配置权限';

public static function status()
{
$array = [
1 => '启用',
2 => '禁用',
];
return $array;
}

/*
这是tp官方推荐的做法,但是我喜欢用上面的方法。
*/
// protected function getStatusAttr($value)
// {
// $status = [
// 1 => '启用',
// 2 => '禁用',
// ];
// return $status[$value];
// }

}

 ?>

6 . 在  \application\admin\view下新建一个文件夹auth_group,里面新建三个文件,分别是index.html(数据列表文件)、_form.html(数据新增/修改文件)、view.html(数据详情文件)。数据的操作方式无非就是新增、删除、查询、修改(编辑或更新),也就是“增删查改”,这三个文件就可以满足对数据的增删查改的要求。

1)index.html文件的全部代码如下:

<div class="content-wrapper">
    <div class="content">
        <!-- 面包屑功能 开始 -->
        <div class="page-breadcrumbs">
            <ul class="breadcrumb">
                <li>管理员组</li>               
                <li class="active">数据列表</li>
            </ul>
        </div>
        <!-- 面包屑功能 结束 -->

        <div class="page-body">                  
            <button type="button" tooltip="添加用户" class="btn btn-sm btn-azure btn-addon" onClick="javascript:window.location.href = '{:url('add')}'"> 
                <i class="fa fa-plus"></i>添加
            </button>

            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12">
                    <div class="widget">
                        <div class="widget-body">
                            <div class="flip-scroll">
                                <table class="table table-bordered table-hover">
                                    <thead class="">
                                        <tr>
                                            <th class="text-center">{$model->id}</th>
                                            <th class="text-center">{$model->title}</th>
                                            <th class="text-center">{$model->status}</th>
                                            <th class="text-center">{$model->rules}</th>
                                            <th class="text-center">操作</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {volist name='datas' id='data'}
                                        <tr>
                                            <td align="center">{$data.id}</td>
                                            <td align="center">{$data.title}</td>
                                            <td align="center">{$model::status()[$data.status]}</td> 
                                            <!--<td align="center">{$data.status}</td> 对应model文件的受保护方法getStatusAttr() -->
                                            <td align="center">{$data.rules}</td>
                                            <td align="center">
                                                <a href="{:url('view',['id'=>$data.id])}" class="btn btn-primary btn-sm shiny">
                                                    <i class="fa fa-eye"></i>详情
                                                </a>

                                                <a href="{:url('edit',['id'=>$data.id])}" class="btn btn-primary btn-sm shiny">
                                                    <i class="fa fa-edit"></i>编辑
                                                </a>

                                                <a href="javascript:if(confirm('确实要删除该内容吗?'))location='{:url('del',['id'=>$data.id])}'" class="btn btn-danger btn-sm shiny">
                                                    <i class="fa fa-trash-o"></i>删除
                                                </a>
                                            </td>
                                        </tr>
                                        {/volist}
                                    </tbody>
                                </table>
                            </div>
                            <div style='padding-top:10px;'>{$datas->render()}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


2)_form.html文件集合了add.html和edit.html两个文件于一身,因为这两个文件的代码几乎完全相同(不同之处在于:edit.html文件比add.html文件多了显示属性值),所以可以二合一,我是参考了yii2的设计思想。全部代码如下:

<div class="content-wrapper">
    <div class="content">
        <!-- 面包屑功能 开始 -->
        <div class="page-breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <a href="{:url('index')}">管理员组</a>
                </li>
                <?php if(request()->action()=='add'){ ?>
                    <li class="active">新增</li>
                <?php }else if(request()->action()=='edit'){ ?>
                    <li class="active">编辑</li>
                <?php } ?>
            </ul>
        </div>
        <!-- 面包屑功能 结束 -->
        <div class="page-body">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="widget">
                    <div class="widget-header bordered-bottom bordered-blue">
                        <span class="widget-caption" {if condition="request()->action()=='add'"}>新增</span {/if}>
                        <span class="widget-caption" {if condition="request()->action()=='edit'"}>编辑</span {/if}>
                    </div>
                    <div class="widget-body">
                        <div id="horizontal-form">
                            <form class="form-horizontal" role="form" action="" method="post">
                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label no-padding-right">
                                        {$model->title}
                                    </label>
                                    <div class="col-sm-6">
                                        <input class="form-control" id="title" placeholder="" name="title" required="" type="text" {if condition="empty($data) neq true"}value='{$data.title}'{/if} >
                                    </div>
                                    <p class="help-block col-sm-4 red">* 必填</p>
                                </div>

                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">
                                        {$model->status}
                                    </label>
                                    <div class="col-sm-6">
                                        <select name="status" id="">
                                            <?php foreach($model::status() as $key=>$statu){ ?>
                                            <option value="{$key}" {if condition="empty($data) neq true && $data.status==$key"}selected="selected"{/if}>{$statu}</option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>  
                                
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">
                                        {$model->rules}
                                    </label>
                                    <div class="col-sm-6">
                                        <p class="help-block col-sm-4 red">以后再做</p>
                                    </div>
                                </div> 

                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default">保存信息</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>