FastAdmin入门应用示例

老学
3,492 阅读7分钟

FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架。本文介绍如何利用FastAdmin框架快速创建一个简单的入门应用。示例展示如何对一表关联两张表（关联表一个是自建的，一个是框架自带的）一键生成CRUD和一键生成菜单功能。

应用需求

  • 创建不同的相册。
  • 每本相册包括多张照片。
  • 照片需要分类。

实现步骤

1. 安装FastAdmin框架。

参见官方文档。

2. 安装在线命令管理插件。

  • 登录进入FastAdmin框架后台，点击左侧插件管理菜单。

  • 点击在线命令右侧安装按钮。如果没有登录Fastadmin官网，会弹出一个对话框，要求登录官网。如果在官网没有账号，还需要先注册。

  • 点击立即登录按钮。

  • 填入在FastAdmin官网注册的账号和密码，点击登录。登录成功后点击确定。

  • 再次点击在线命令右侧安装按钮。插件会自动下载安装。安装成功弹出对话框。点击确定。

3. 创建数据库表。

FastAdmin框架对数据库的设计有一些要求，对字段的类型、特殊字段、特殊字符结尾字段都有一些约定。主要是为了方便我们自动生成一些表单控件。

具体说明请参看官方关于数据库字段约定的文档。

比较贴心的是，官方在源码中提供了一个test数据表，在这个数据表中列示了我们常用的数据库表字段的定义。所以，我们创建数据表可以从test表拷贝，然后修改成我们需要的表结构。

  • 创建相册表

    • 打开数据库管理工具，连接到我们使用的数据库。
    • 找到fa_test表，复制一份，仅复制结构，改名为fa_album。
    • 打开fa_album表，保留id和title字段，删除其他所有字段。
    • 表注释改为相册管理（生成菜单的名称）。

  • 创建照片表

    • 打开数据库管理工具，连接到我们使用的数据库。
    • 找到fa_test表，复制一份，仅复制结构，改名为fa_photos。
    • 打开fa_photos表，保留id、admin_id、category_id、images字段，删除其他所有字段。
    • 将字段admin_id改名为album_id，用来关联相册表。注释改为相册ID。
    • 字段category_id保持不动，用来关联框架自带的分类表。注释改为照片分类ID。
    • 表注释改为照片管理（生成菜单的名称）。

4. 一键生成CRUD代码。

  • 在Fastadmin框架后台管理页面，点击左侧的在线命令管理菜单。
  • 点击添加按钮。弹出一键生成工具对话框。

  • 一键生成相册CRUD代码。

    • 在一键生成CRUD标签页，选择主表为fa_album。

    • 点击生成命令行、立即执行按钮。

    • 如果自动生成失败，需要勾选强制覆盖模式。

    • 自动生成成功后，该CRUD信息会显示在列表中。

  • 一键生成照片（关联相册表）CRUD代码。

    • 在一键生成CRUD标签页，勾选关联模型。
    • 选择主表为fa_photos。
    • 点击追加关联模型按钮。选择关联表为fa_album、关联类型为belongsto、关联外键为album_id、显示字段为title。
    • 再次点击追加关联模型按钮。选择关联表为fa_category、关联类型为belongsto、关联外键为category_id、显示字段为name。

    • 点击生成命令行、立即执行按钮。
    • 如果自动生成失败，需要勾选强制覆盖模式。
    • 自动生成成功后，该CRUD信息会显示在列表中。

5. 一键生成菜单。

  • 在Fastadmin框架后台管理页面，点击左侧的在线命令管理菜单。

  • 点击添加按钮。弹出一键生成工具对话框。

  • 一键生成相册管理菜单。

    • 打开一键生成菜单标签页。
    • 选择控制器设置为album.php。
    • 点击生成命令行、立即执行按钮。

  • 一键生成照片管理菜单。

    • 打开一键生成菜单标签页。
    • 选择控制器设置为photos.php。
    • 点击生成命令行、立即执行按钮。

  • 自动生成菜单成功后，当前列表页会显示相关信息。管理后台左侧的菜单中出现相册管理和照片管理菜单选项。

6.测试。

  • 测试‘相册管理’功能。
    • 点击相册管理菜单链接。出现相册管理页面。
    • 点击添加按钮，出现表单输入弹出框。
    • 输入相册标题，点击确定按钮，增加一条相册信息。

* 同样方法再创建一个相册。创建完成后，列表页显示刚刚创建的两个相册信息。


* 再测试其他相关功能。

  • 测试相片管理功能。

    • 点击相册管理菜单链接。出现相册管理页面。
    • 点击添加按钮，出现表单输入弹出框。
    • 点击相册ID下拉选项没有反应，点击照片分类ID显示无查询结果。

  • 测试结果说明我们自动生成的代码有问题，需要排查修改。

7.修改相关代码。

文档明确：FastAdmin的Selectpage列表中显示字段默认读取的是name字段，如果我们返回的列表中不包含name字段，将无法展现下拉列表数据。此时我们需要添加使用data-field="你要显示的字段"即可。

  • 根据文档说明，我们照片表关联相册表的字段名称为title，不是默认的name，需要按文档修改代码。
  • 打开/application/admin/view/photos目录中的add.html文件
<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Album_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-album_id" data-rule="required" data-source="album/index" class="form-control selectpage" name="row[album_id]" type="text" value="">
        </div>
    </div>
  • 修改input控件的属性，添加data-field="title"属性。
<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Album_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-album_id" data-rule="required" data-source="album/index" data-field="title" class="form-control selectpage" name="row[album_id]" type="text" value="">
        </div>
    </div>
  • 保存后回到网站管理后台。一键清除缓存。
  • 在照片管理页面点击添加按钮。这时候，我们点击相册ID的下拉列表选框时，可以看到关联相册的标题列表了。

  • 用同样的方法修改/application/admin/view/photos目录中的edit.html文件

  • 再来看看/application/admin/view/photos目录中的add.html文件中关于相册分类ID下拉选项框的问题。

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-category_id" data-rule="required" data-source="category/selectpage" data-params='{"custom[type]":"photos"}' class="form-control selectpage" name="row[category_id]" type="text" value="">
        </div>
    </div>
  • 在input控件中，我们看到属性data-params='{"custom[type]":"photos"}'。实际上，在框架默认的分类中，还没有photos这个类型。
  • 在管理后台常规管理、系统配置、字典配置中添加一个分类类型为photos。

  • 追加后点击确定按钮。
  • 在管理后台分类管理中添加photos下的条目。

  • 点击确定按钮来保存刚刚添加的photos分类。相同方法再添加几个分类条目。
  • 再次来到后台管理页面，点击照片管理，点击添加按钮，在弹出的照片分类ID下拉选项框中，可以看到我们定义的分类条目。

  • 添加所有内容后，点击确定来保存。可以看到页面列表中已经有了刚刚添加的照片信息。

  • 测试其他功能都能正常使用。

小结

本文仅用一个小小的示例展示了FastAdmin框架的强大功能。涉及建表、关联、一键生成CRUD和管理菜单的最基本使用方法，这只是我刚刚研究FastAdmin框架不到3天的成果，可见该框架的强悍和易用性。对于FastAdmin来说，本文只是沧海一粟。将框架变成生产力，还要不断地学习总结。感谢框架的作者付出的艰辛劳动！

avatar
文章
阅读
粉丝