GOCMS 后台数据展示 - 列表功能

GOCMS 后台数据列表功能开发流程如下 :

1. 控制器

我们可以从控制器开始,文件位置 : \controllers\admin\模块名称.go,基础代码已经生成。

结构代码 :

此文档内容需登录 + 付费后才能查看!

2. 路由注册

将控制器函数注册到路由( 自动创建时此段代码已经添加 ),文件 \router\admin.go :

此文档内容需登录 + 付费后才能查看!

我们注册了 GET 和 POST 2种模式的路由,都对应同一个控制器,控制器内部通过 action 路由参数来区分增删改查等不同操作,通过 GET 和 POST 请求方式区分展示界面还是提交数据。

3. 数据列表展示界面开发

数据列表界面模板位置 : templates\admin\students\list.html,基础代码已经生成 :

此文档内容需登录 + 付费后才能查看!

4. 模板源码功能介绍

4.1 模板构架介绍

1 默认生成的列表模板已经完成了数据加载、分页、删除数据、编辑跳转等功能,您可以以此为基础进一步完善列表页面功能。

2 后台模板继承自基础模板,基础模板中加载了 gcadmin.js

此文档内容需登录 + 付费后才能查看!

gcadmin.js 封装了数据加载、分页、刷新数据、删除数据、上传图片、标签、切换按钮等常用功能。更多功能说明见手册 《gcadmin.js 使用说明》。

3 列表页面使用 vue3 进行数据渲染。

4 理论上列表页面稍加改进,已经可以满足大部分开发场景,如果仍不能满足您的需要,您可以自行开发列表页面。

4.2 列表数据加载

列表页面通过 gcAdminList.getData(); 函数来加载列表数据,及初始化分页数据 :

此文档内容需登录 + 付费后才能查看!

加载数据API接口配置

{{.AdminSiteBase.BasePath}} 代表后台基础路径。

此文档内容需登录 + 付费后才能查看!

上面定义了数据总数、列表查询和数据删除 API 接口地址。

数据读取配置

此文档内容需登录 + 付费后才能查看!

可以通过上面的配置修改表名称、查询字段、排序、每页展示数量等数据。

数据查询条件配置

此文档内容需登录 + 付费后才能查看!

通过 gcAdminList.postData.fetchWhereSql,gcAdminList.postData.fetchWhereData 可以设置查询条件和对应值。此条件也会应用到总数查询从而影响分页。

多表联合查询

此文档内容需登录 + 付费后才能查看!

通过 gcAdminList.postData.fetchJoin 属性可以配置多表联合查询,使用as 进行别名设置。

如果使用了多表联合,那边对应的条件、排序、查询字段应该加上对应的字段前缀如 a.`id`。

搜索功能

搜索功能其实基于条件查询配置,利用 js 获取搜索关键字,然后组合查询条件和值即可。以搜索主键为例 :

此文档内容需登录 + 付费后才能查看!

5 列表数据渲染

列表页面以 vue3 为基础进行数据渲染,页面上已经完成了 vue3 的初始化 :

此文档内容需登录 + 付费后才能查看!

说明

1 您可以根据自己的实际需求,修改查询配置及列表展示格式,完成更多功能。

2 更复杂一些的功能请参考、学习 文章模块 的用法( 涉及图片展示、时间转换、多表联合等功能 )。


列表数据加载接口

列表数据加载接口请求方式为 POST, 一个完整的列表展示页面会进行2个请求,数据总数计算接口和对应分页的数据请求接口。

对应地址 :

此文档内容需登录 + 付费后才能查看!

对应控制器的 index 和 Total 逻辑分支:

此文档内容需登录 + 付费后才能查看!

通过 CommonList 和 CommonTotal 函数实现了以请求数据为条件的通用数据查询功能,您可以打开对应的函数代码阅读理解其逻辑,当通用方法并不能满足您的需求时使用自定义逻辑替换2个函数,实现自定义查询逻辑。

返回值说明

GOCMS 统一后台 API 数据 json 格式规范 :

此文档内容需登录 + 付费后才能查看!