🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
首先我们将创建一下基础目录,如下图所示 ![](https://box.kancloud.cn/bd9b05b5cc8cee51ba1e8b554701adb4_256x542.png) ``` admin模块 |- controller command 命令行目录 model 模型目录 traits trait目录 validate 验证目录 view 目录直接单独放在根目录下,本人习惯而已 ``` 因为 view 目录在根目录下面,所以要做一些改变,首先修改配置文件 template.php ``` // 模板路径 'view_path' => env('root_path') . 'view' . DIRECTORY_SEPARATOR, ``` 然后需要重写 fetch 方法,再次基础上所以必须建立 基类控制器, admin\controller\Base.php ``` namespace app\admin\controller; use think\Controller; class Base extends Controller { protected $vars; protected function fetch($template = '', $vars = [], $config = []) { $template = strtolower($this->request->module()) . DIRECTORY_SEPARATOR . strtolower($this->request->controller()) . DIRECTORY_SEPARATOR . ($template ? $template : strtolower($this->request->action())); if (count($this->vars)) { $vars = array_merge($vars, $this->vars); } return $this->view->fetch($template, $vars, $config); } // 这里是为了属性的赋值模板分配 public function __set($name, $value) { // TODO: Implement __set() method. $this->vars[$name] = $value; } } ``` ### 另外一种方法 ``` 'view_base' => env('root_path') . 'views' . DIRECTORY_SEPARATOR, // 直接添加 view_base 配置就可以了 ``` 这样就可以开始了。 ### 创建基类模型 这里创建抽象模型 application\model\AbstractBase.php, 约定必须实现其中的四个抽象方法,以及约定模型文件必须以Model结尾 ``` namespace app\model; use think\Model; use think\db\Where; abstract class AbstractBase extends Model { // 时间戳自动更新 protected $autoWriteTimestamp = 'datetime'; protected $createTime = 'created_at'; protected $updateTime = false; public function initialize() { parent::initialize(); // 这里为了简化模型使用,所以这里就讲自动设置表名 $m = explode('\\', get_called_class()); $modelName = array_pop($m); if (strpos($modelName, 'Model') !== false) { $this->name = substr($modelName, 0, -strpos($modelName, 'Model')-1); } } // 以下是必须实现的四个方法 public abstract function store($data); public abstract function updateBy($id, $data); public abstract function findBy($id); public abstract function deleteBy($id); public function conditions($where) { return (new Where($where)); } } ``` ## view的编写 后台模块用的是这个 [https://download.csdn.net/download/qq_31470439/10707283]() 还是挺好看的。有兴趣的可以下载使用,还需要**ajaxform**和**sweetalert**插件 创建一个基类模板 view\admin\public\base.html ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>后台管理-<block name="title"></block></title> <meta name="description" content="Elisyam is a Web App and Admin Dashboard Template built with Bootstrap 4"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png"> <link rel="stylesheet" href="/assets/css/animate/animate.min.css"> <!-- Stylesheet --> <link rel="stylesheet" href="/assets/vendors/css/base/bootstrap.min.css"> <link rel="stylesheet" href="/assets/vendors/css/base/elisyam-1.2.min.css"> <!-- css 预留加载块 --> <block name="css"></block> <style> .pagination li a { position: relative; display: block; padding: .5rem .75rem; margin-left: -1px; line-height: 1.25; color: #007bff; background-color: #fff; border: 1px solid #dee2e6; } .pagination li.active { position: relative; display: block; padding: .5rem .75rem; margin-left: -1px; line-height: 1.25; z-index: 1; color: #fff; background-color: #007bff; border-color: #007bff; } .pagination li.disabled { position: relative; display: block; padding: .5rem .75rem; margin-left: -1px; line-height: 1.25; color: #007bff; background-color: #fff; border: 1px solid #dee2e6; } </style> <!-- Tweaks for older IEs--><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--> </head> <body id="page-top"> <div class="container-fluid"> <!-- Begin Page Header--> <div class="row"> <div class="page-header"> <div class="d-flex align-items-center"> <h2 class="page-header-title"><block name="button"></block></h2> <div> <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="{:url('admin/index/index')}"><i class="ti ti-home"></i></a></li> <li class="breadcrumb-item active"><block name="title"></block></li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-xl-12"> <div class="widget has-shadow"> <div class="widget-header bordered no-actions d-flex align-items-center"> <h4><block name="title"></block></h4> </div> <div class="widget-body"> <block name="content"></block> </div> </div> </div> </div> </div> <script src="/assets/vendors/js/base/jquery.min.js"></script> <script src="/assets/vendors/js/base/core.min.js"></script> <script src="/assets/vendors/js/nicescroll/nicescroll.min.js"></script> <script src="/assets/vendors/js/noty/noty.min.js"></script> <script src="/assets/js/components/notifications/notifications.min.js"></script> <script src="/assets/js/jquery.form.js"></script> <script src="/assets/js/components/validation/validation.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <script> $('form').ajaxForm(function(response) { if (!response.code) { message(response.msg, 'error'); } else { message(response.msg, 'success') setTimeout(function(){ window.location.href = response.url },response.wait * 1000); } }); $('.delete').click(function () { swal({ title: "确认删除吗?", text: "一旦删除, 资源就无法恢复了", icon: "warning", buttons: true, dangerMode: true, }).then((willDelete) => { if (willDelete) { $.post($(this).attr('data-url'), {id : $(this).attr('data')}, function (response) { if (!response.code) { message(response.msg, 'error'); } else { message(response.msg, 'success') setTimeout(function(){ window.location.href = response.url },response.wait * 1000); } }) } }); }) // 提示插件 function message(msg, type = 'info') { new Noty({ type: type, layout: "topRight", text: msg, progressBar: true, timeout: 2500, animation: { open: "animated bounceInRight", close: "animated bounceOutRight" } }).show() } $(function () { $('[data-toggle="popover"]').popover() }) </script> </body> </html> <!-- js 预留加载块 --> <block name="js"></block> ``` 此后模板文件都会继承这个基类模板。