开发需求

name: 网页表格现实api调用后的数据
description: 通过post请求服务器api得到json格式数据，并把它整理成js模板引擎mustache的格式，以模板方式渲染页面表格

你来充当全栈程序员，我来提出需求指示内容如下：

页面布局

一切从简不需要头部导航与菜单，底部不需要版权作者等信息

核心内容

就是显示标题名称+表格。

谁谁谁的当日考勤记录

考勤原始记录	对应时段
"2026-03-05 08:10:41"	早上
	中午
	中午
	晚上

按照原始数据全部现实。并通过小于11：30认定为找上，大于17：00认为晚上，11：00到13：00认定为中午这部分单独写函数后处理。

js第三方库

模板库

https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.2.0/mustache.min.js

url地址处理库

https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.11/URI.min.js

日历处理库

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js

请求处理库

https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js

ui库（可以不使用）

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css

cookie处理库

https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.5/js.cookie.min.js

浏览器的表单校验库(如果需要使用)

https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js

编写要求

尽量使用js原生写法es6标准，保证代码易读并加入适当注解
命名使用驼峰或下划线均可。

api调用

数据来源将curl请求转换成浏览器请求

curl --location --request POST 'http://192.168.0.123:2028/jsonapi/get?FieldDescription' \
--header 'accept: application/json, text/plain, */*' \
--header 'content-type: application/json' \
--data-raw '{
    
    "kq/USERINFO@考情信息": {
        "@column": "BADGENUMBER.用户id,NAME,USERID.考勤id,DEFAULTDEPTID",
        "NAME": "蔡金凯",
        "@limit": 1
    },

    "kq/CHECKINOUT@考情记录": {
        "@column": "USERID.考勤id,CHECKTIME",
        "USERID|": "kq/USERINFO@考情信息.考勤id",
         "CHECKTIME&": ">=2026-03-05,<2026-03-06",
         "@order": "-CHECKTIME"
    }

}'

参数说明

参数名	参数值	解释	URL参数名
"CHECKTIME&"	">=2026-03-05,<2026-03-06"	">=开始日期,<=结束日期" 作为查询的时间范围通常是大于等于今天到小于明天	day=2026-03-05
"NAME"	"蔡金凯"	要查询的人员通常是中文字符	name=蔡金凯

例子中"NAME" 参数
- 必须通过URL的参数来获取
- 假如没有获取到参数界面提示请传入人名
例子中"CHECKTIME&" 参数
- 为日期字符 ">=2026-03-05,<2026-03-06" 用 YYYY-MM-DD替换成当天日期和明天的日期
- 无参数时取浏览器当前日期代替2026-03-05 用当天日期+1天代替2026-03-06

URL参数

show.html?name=蔡金凯
或
show.html?name=蔡金凯&day=2026-03-05

返回值

api调用返回值格式

{
    "kq/USERINFO@考情信息": [
        {
            "用户id": "1000157",
            "NAME": "蔡金凯",
            "考勤id": 2859,
            "DEFAULTDEPTID": 37
        }
    ],
    "kq/CHECKINOUT@考情记录": [
        {
            "考勤id": 2859,
            "CHECKTIME": "2026-03-05 11:31:38"
        },
        {
            "考勤id": 2859,
            "CHECKTIME": "2026-03-05 11:30:45"
        },
        {
            "考勤id": 2859,
            "CHECKTIME": "2026-03-05 08:10:41"
        }
    ],
    "@err": "",
    "@code": 200,
    "@msg": "读取完成"
}

记录部分在 "kq/CHECKINOUT@考情记录" 列表内
户名和基本信息在 "kq/USERINFO@考情信息" 列表行内

sentry-browser

日志收集sdk

Alloy 日志收集

现工作文档