fastadmin

原创已于 2025-09-08 14:26:49 修改 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#php #thinkphp

于 2022-02-25 15:07:44 首次发布

thinkphp5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用FastAdmin快速搭建后台管理系统，包括修改登录地址、一键生成控制器与视图，并重点讲解了如何通过字段注释实现动态菜单和前端展示。了解如何利用表字段和注释生成CRUD功能，以及如何处理强覆盖模式和关联字段的展示。

fastadmin官方文档

修改后台登录地址：如图为 www.你的域名/adminlogin.php框架初始为随机字符串.php
在这里插入图片描述

一键CRUD，其中生成了控制器、模型、验证器、视图、语言包、JS。

推荐使用在线命令进行 CURD

fastadmin提供了一个测试使用的表，可以通过此表练习一键curd

强覆盖模式是用于，数据库改字段，需要二次生成curd进行点选，类似于强制更新，之前的进行删除。

生成curd后，在后台配置菜单显示页面。
在这里插入图片描述
之所以可以一键curd，关键在于数据库建表，表字段的注释就是菜单显示的内容。

前端组件的显示，全靠表的字段，数据类型，注释

CREATE TABLE `fa_test` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `user_id` int(10) DEFAULT '0' COMMENT '会员ID',
  `admin_id` int(10) DEFAULT '0' COMMENT '管理员ID',
  `category_id` int(10) unsigned DEFAULT '0' COMMENT '分类ID(单选)',
  `category_ids` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '分类ID(多选)',
  `tags` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '标签',
  `week` enum('monday','tuesday','wednesday') COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '星期(单选):monday=星期一,tuesday=星期二,wednesday=星期三',
  `flag` set('hot','index','recommend') COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '标志(多选):hot=热门,index=首页,recommend=推荐',
  `genderdata` enum('male','female') COLLATE utf8mb4_unicode_ci DEFAULT 'male' COMMENT '性别(单选):male=男,female=女',
  `hobbydata` set('music','reading','swimming') COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '爱好(多选):music=音乐,reading=读书,swimming=游泳',
  `title` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '标题',
  `content` text COLLATE utf8mb4_unicode_ci COMMENT '内容',
  `image` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '图片',
  `images` varchar(1500) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '图片组',
  `attachfile` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '附件',
  `keywords` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '关键字',
  `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '描述',
  `city` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '省市',
  `json` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '配置:key=名称,value=值',
  `multiplejson` varchar(1500) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '二维数组:title=标题,intro=介绍,author=作者,age=年龄',
  `price` decimal(10,2) unsigned DEFAULT '0.00' COMMENT '价格',
  `views` int(10) unsigned DEFAULT '0' COMMENT '点击',
  `workrange` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '时间区间',
  `startdate` date DEFAULT NULL COMMENT '开始日期',
  `activitytime` datetime DEFAULT NULL COMMENT '活动时间(datetime)',
  `year` year(4) DEFAULT NULL COMMENT '年',
  `times` time DEFAULT NULL COMMENT '时间',
  `refreshtime` int(10) DEFAULT NULL COMMENT '刷新时间(int)',
  `createtime` int(10) DEFAULT NULL COMMENT '创建时间',
  `updatetime` int(10) DEFAULT NULL COMMENT '更新时间',
  `deletetime` int(10) DEFAULT NULL COMMENT '删除时间',
  `weigh` int(10) DEFAULT '0' COMMENT '权重',
  `switch` tinyint(1) DEFAULT '0' COMMENT '开关',
  `status` enum('normal','hidden') COLLATE utf8mb4_unicode_ci DEFAULT 'normal' COMMENT '状态',
  `state` enum('0','1','2') COLLATE utf8mb4_unicode_ci DEFAULT '1' COMMENT '状态值:0=禁用,1=正常,2=推荐',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='测试表';

用user_id举例子，这个字段
1，看起名，（像关联字段）
2，看数据类型：int。
3，看注释

用fa一键curd后
在这里插入图片描述
前端样式自动生成。
想要生成标签，字段必须带有tag，字段起名如

articletag

如果字段名为user_id，生成的动态下拉列表会自动匹配user/index这个控制器方法，如果你发现CRUD后无法显示关联数据列表，请检查视图中元素data-source的值是否正确

详细看文档-数据库
在这里插入图片描述

数据库选项
控制颜色

{
                            field: 'pay_status',
                            title: __('Pay_status'),
                            searchList: {"1": __('Pay_status 1'), "2": __('Pay_status 2'), "3": __('Pay_status 3'), "4": __('Pay_status 4')},
                            formatter: Table.api.formatter.status, custom:{1: 'normal', 2: 'info',3:'success',4:'danger'}
                        },

Table.api.formatter.status 默认值支持 4种值，才能控制圆点颜色。有特殊需求 配置custom。
{normal: 'success', hidden: 'grey', deleted: 'danger', locked: 'info'};

class颜色
在这里插入图片描述

btn-danger-light, btn-primary-light

在这里插入图片描述

下拉搜索功能
在这里插入图片描述

//国家列表selectpage
    public function countryList()
    {
        $param = input();
        $page = $param['pageNumber'] ?? 1;
        $limit = $param['pageSize'] ?? 10;
        
        $primaryKey = $param['keyField'] ?? 'id';
        $primaryValue = $param['keyValue'] ?? null;
        $showField = $param['showField'] ?? 'name';
        $searchWords = $param['q_word'] ?? [];
        $searchWord = is_array($searchWords) ? reset($searchWords) : $searchWords;
        
        $orderBy = $param['orderBy'][0] ?? ['name', 'ASC'];
        $orderField = $orderBy[0];
        $orderDirection = strtoupper($orderBy[1]) === 'ASC' ? 1 : -1;
        
        $country = country_list();
        
        // 处理初始化回填
        if ($primaryValue) {
            $ids = is_array($primaryValue) ? $primaryValue : explode(',', $primaryValue);
            $country = array_filter($country, function($item) use ($primaryKey, $ids) {
                return in_array($item[$primaryKey], $ids);
            });
            $total = count($country);
            $list = array_values($country);
            return json(['list' => $list, 'total' => $total]);
        }
        
        // 关键词搜索
        if ($searchWord) {
            $country = array_filter($country, function($item) use ($showField, $searchWord) {
                return isset($item[$showField]) && stripos($item[$showField], $searchWord) !== false;
            });
        }
        
        // 排序
        usort($country, function($a, $b) use ($orderField, $orderDirection) {
            if ($a[$orderField] == $b[$orderField]) return 0;
            return ($a[$orderField] < $b[$orderField] ? -1 : 1) * $orderDirection;
        });
        
        // 总数 & 分页
        $total = count($country);
        $pagedData = array_slice($country, ($page - 1) * $limit, $limit);
        
        // 返回数据，符合 selectpage 的格式
        $list = [];
        foreach ($pagedData as $item) {
            $list[] = [
                $primaryKey => $item[$primaryKey],
                $showField  => $item[$showField],
            ];
        }
        
        return json(['list' => $list, 'total' => $total]);
    }

<!-- 选择国家 -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">选择国家</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-country" data-rule="required" data-source="country/countryList" class="form-control selectpage" name="row[country]" type="text" value="">
        </div>
    </div>

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">选择国家</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-country" data-rule="required" data-source="country/countryList" class="form-control selectpage" name="row[country]" type="text" value="{$row.country|htmlentities}">
        </div>
    </div>

在js中增加搜索内容
在这里插入图片描述

{
                            field: 'country',
                            title: '国家',
                            visible: false,       // 不在表格列里显示，只在搜索里出现
                            addClass: "selectpage",
                            operate: "=",
                            extend: "data-source='country/countryList' data-primary-key='id' data-field='name' data-order-by='id asc'"
                        },

禁用表格操作栏代码

showToggle: false,
showColumns: false,
showExport: false,
searchFormVisible: true,
search: false,
showSearch: true,

Tab选项卡相关知识

<div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="plate_name">
            <li class="active">
                <a href="#t-facebook" data-value="facebook" data-toggle="tab">Facebook</a>
            </li>
            <li>
                <a href="#t-google" data-value="google" data-toggle="tab">Google</a>
            </li>
        </ul>
    </div>

这串代码意思是：传参字段为plate_name, 传参值为faceboo,google,默认选择为Facebook选项卡

js中需要修改为

queryParams: function (params) {
   // 默认过滤条件：如果没传 plate_name，就加上 facebook
    var filter = params.filter ? JSON.parse(params.filter) : {};
    var op = params.op ? JSON.parse(params.op) : {};

    if (!filter.plate_name) {
        filter.plate_name = 'facebook';
        op.plate_name = '=';
    }

    params.filter = JSON.stringify(filter);
    params.op = JSON.stringify(op);
    return params;
},
columns: [
  [
	{
	   field: 'plate_name',
	    title: __('Plate_name'),
	    searchList: {"facebook":"Facebook","google":"Google"},
	    formatter: Table.api.formatter.normal
	},
  ]
]