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 格式规范 :