Step 4:后端模板说明

说明

• 如果使用这个项目提供的模板, 你大概需要操作的是 web/admin/tmpl/main/main.tmpl, 他提供修改页面左侧菜单, 以及在items中新增你的模板
• web/admin/tmpl/items 中一般情况下, 你每在golang后端建立一个新的数据表模型的结构体,这里就需要一份模板文件
• 数据页通用的模板文件大概是这样的

{{define "/member"}}
    {{template "/header"}}
    {{template "/nav-bar" map `{"menu":"会员管理", "title":"会员列表(动态表格)"}`}}
    <div class="layui-fluid">

        {{ template "form-begin" }}
        {{ template "form-text" map `{"title":"用户名", "name": "username", "placeholder": "请输入用户登录账户名称", "verify": "required"}` }}
        {{ template "form-checkbox" map `{"title":"用户名(示例)", "name": "test_1", "data":"[{'_id':'111', 'name':'bbb'},{'_id':'222', 'name':'ccc'}]", "key":"_id", "val":"name"}` }}
        {{ template "form-checkbox" map `{"title":"用户名(示例)", "name": "test_2", "data":"[{'_id':'111', 'name':'bbb'},{'_id':'222', 'name':'ccc'}]", "key":"_id", "val":"name"}` }}
        {{ template "form-checkbox" map `{"title":"关联用户(复选框示例)", "name": "relation_users", "data":"/staffs/list?limit=10000", "key":"_id", "val":"username"}` }}
        {{ template "form-radio" map `{"title":"状态", "name": "status", "data":"[{'_id':-1, 'name':'禁用'},{'_id': 1, 'name':'启用'}]", "key":"_id", "val":"name"}` }}
        {{ template "form-upload" map `{"title":"用户头像", "name": "avatar", "multiple": false}` }}
        {{ template "form-upload" map `{"title":"图集", "name": "pictures", "multiple": true}` }}
        {{ template "form-textarea" map `{"title":"富文本示例", "name":"description"}` }}
        {{ template "form-end" }}

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    {{template "/search-form-begin"}}

                    {{template "search-date-pick" map `{"name":"created_at", "rg": "~", "placeholder": "选择创建时间范围"}`}}
                    {{template "search-date-pick" map `{"name":"-updated_at", "placeholder": "最大更新时间"}`}}
                    {{template "search-text" map `{"name":"username", "placeholder": "用户名"}`}}

                    {{template "/search-form-end"}}

                    <div class="layui-card-header">
                        <button class="layui-btn" onclick="(new admin.Form).open()"><i class="layui-icon"></i>添加</button>
                    </div>
                    {{template "/table"}}
                </div>
            </div>
        </div>
    </div>

    <script>

        let table = admin.newTable('staffs', [[
            {field: '_id', title: 'ID', sort: true, fixed: 'left'},
            {field: 'username', title: '用户名'},
            {field: 'created_at', title: '创建时间', sort: true, templet: admin.helper.time2str},
            {field: 'updated_at', title: '最后更新时间', templet: admin.helper.time2str},
            {title: '操作', toolbar: '#curd'},
        ]]);

    </script>

    {{template "/footer"}}
{{end}}

• 你可以复制这么文件, 然后建立新的文件
• 复制并创建新的数据页模板之后首先要修改的是第一行的 define , 比如你后端golang提供了一份 order 表的接口, 这里可以改成 {{ define "/order" }}, 当然了, 这里跟golang接口无关, 你可以自己想定义成什么就是什么, 但是第一个斜杠是需要的, admin由cmd/admin/main.go 提供服务,当你请求 admin.golang-project.com/order 时, 他会获取 /order 然后查找你定义的 /order 模板
• 然后需要修改的是第三行

{{template "/nav-bar" map `{"menu":"会员管理", "title":"会员列表(动态表格)"}`}}

他是数据页的导航条, 随便修改 memu 和 title 的值

• 然后来到

  {{ template "form-begin" }} 

  和

  {{ template "form-end" }}

  中间, 这中间的每一行都是一个表单元素, 比如复选框, 文本框，富文本等等, 你可以按你的模型可编辑字段自由增加删除和修改这中间的内容, 具体的用法都在上边的示例模板中, 也许你还需要更丰富的组件, 你可以从 layui 官网文档中获取丰富的内容, 当然, 如果有需要, 我也会继续新增组件
• 接下来是

{{template "/search-form-begin"}}

和

{{template "/table"}}

中间 这里的代码主要是建立上边的搜索条和添加按钮

• 最后是 <script> 和 </script> 中间
• 首先修改 staffs 为你的 golang 数据接口路径, 比如你的数据接口注册了 order, 这里就改成 order
• 这中间你需要修改和增加的就是 {field 开头的行, field代表模型tag中的 json tag值, title:是你给这个字段的一个自定义html table 表头名字, sort 为 true 代表该字段可排序, templet 接受一个 JavaScript的function, 传参是本行数据