首先我们将创建一下基础目录,如下图所示
![](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>
```
此后模板文件都会继承这个基类模板。