文章目录
- ⭐前言
- ⭐node-koa+mysql实现数据表的增删改查
- ✏️mysql数据库表设计
- ✏️post添加数据
- 💖 apifox 测试post添加数据接口
- ✏️post查询分页数据
- 💖 apifox 测试post查询数据接口
- ✏️post查询分页数据
- 💖 apifox 测试post删除数据接口
- ⭐结束
⭐前言
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。
背景：
为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。
功能：
对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
由于在往期文章已经介绍过如何实现jwt权限登录，所有这篇文章主要讲解node_koa对数据监控表的查询、增加、删除和更新。
⭐node-koa+mysql实现数据表的增删改查
✏️mysql数据库表设计
字段取名灵感来源于性能指标参考mdn的官方文档
https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceNavigationTiming
表名 性能表 perf_table
perf_table表中的字段
字段 | 含义 |
id | 唯一标识 |
name | 名称 |
type | 类型 |
path | 前端url路径 |
fmp_count | 页面首屏的渲染耗时 |
fp_count | 页面白屏的渲染耗时 |
dns_count | dns查询耗时 |
tcp_count | tcp连接耗时 |
dcl_count | dom内容加载耗时 |
create_time | 创建时间 |
update_time | 更新时间 |
create_user_id | 创建关联的用户id |
sql建表语句
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for perf_record
-- ----------------------------
DROP TABLE IF EXISTS `perf_record`;
CREATE TABLE ` perf_record` (
`id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '唯一标识',
`name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '名称',
`type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '类型',
`path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '前端url路径',
`fmp_count` double NULL DEFAULT NULL COMMENT '页面首屏的渲染耗时',
`fp_count` double NULL DEFAULT NULL COMMENT '页面白屏的渲染耗时',
`dns_count` double NULL DEFAULT NULL COMMENT 'dns查询耗时',
`dcl_count` double NULL DEFAULT NULL COMMENT 'dom内容加载耗时',
`tcp_count` double NULL DEFAULT NULL COMMENT 'tcp连接耗时',
`create_time` datetime(0) NOT NULL COMMENT '创建时间',
`update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
`create_user_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '创建用户id',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;✏️post添加数据
insert sql语句
insert into perf_record (id,name) values('add-id','前端性能')node koa 封装post接口添加数据，用户id信息使用jsonwebtoken解析token得到，自定义生产唯一id和当前时间，其他参数从body得到
const Router = require('koa-router');
const router = new Router();
const { execMysql } = require('../../utils/mysql/index')
const { uuid, getCurrentTime } = require('../../utils/index');
// jwtToken
const jwtToken = require("jsonwebtoken");
const { appKey } = require('../../common/const');
// 添加perf_record 表数据
router.post('/perf/add', async(ctx) => {
try {
// 解析 header参数
if (!ctx.header || !ctx.header.authorization) { // 判断请求头里面是否有 authorization
console.warn('no header')
return;
}
const parts = ctx.header.authorization.trim().split(' '); // authorization是 Bearer + ' ' + jwt字符串
const token = parts[1]
const payload = jwtToken.verify(token, appKey);
const { username } = payload;
// 获取创建用户 作为user_id
const create_user_id = username
// 解析 post 参数
const bodyParams = ctx.request.body
console.log('bodyParams', bodyParams)
const { name, type, path, fmp_count, fp_count, dns_count, dcl_count, tcp_count } = bodyParams;
const create_time = getCurrentTime()
const id = uuid();
// sql 插入 数据
const createRes = await execMysql(`INSERT INTO perf_record
(id,name,type,path,fmp_count,fp_count,dns_count,dcl_count,tcp_count,create_time,create_user_id)
VALUES ('${id}', '${name}','${type}','${path}','${fmp_count}','${fp_count}','${dns_count}','${dcl_count}','${tcp_count}','${create_time}','${create_user_id}');`)
ctx.body = {
code: 200,
data: createRes,
msg: 'create perf success'
};
} catch (r) {
console.error('error', r)
ctx.body = {
code: 0,
data: null,
msg: r.toString()
};
}
});💖 apifox 测试post添加数据接口
post接口的auth配置 bearer token 参数
传递post参数
{
"name":"a",
"type":"b",
"path":"yongma16.xyz/",
"fmp_count":0,
"fp_count":0,
"dns_count":0,
"dcl_count":0,
"tcp_count":0
}
sql表中数据通过api添加成功！
✏️post查询分页数据
模糊查询name，sql分页 限制结果 start-end，按创建时间排序
select * from perf_record
where title like '%${name}%'
order by create_time
desc limit ${start},${end};cout查询总数sql
select count(1 ) as total from perf_record where name like '%${name||''}%';koa接口实现
// 获取perf list
router.post('/perf/list', async(ctx) => {
try {
// 解析参数
const bodyParams = ctx.request.body
const { pageSize, page, name } = bodyParams;
const start = Number(pageSize) * Number(page - 1)
const end = Number(pageSize)
const search = await execMysql(`select * from perf_record where name like '%${name}%' order by create_time desc limit ${start},${end};`);
const searchTotal = await execMysql(`select count(1 ) as total from perf_record where name like '%${name||''}%';`);
ctx.body = {
code: 200,
data: search,
total: searchTotal ? searchTotal[0].total : 0,
msg: 'get perf list success'
};
} catch (r) {
ctx.body = {
code: 0,
data: null,
msg: r.toString()
};
}
});💖 apifox 测试post查询数据接口
分页查询数据成功
删除成功！
✏️post查询分页数据
根据id删除数据的sql
delete from perf_record where id='${id}';koa封装api
// 删除perf 根据id删除
router.post('/perf/delete', async(ctx) => {
try {
// 解析参数
const bodyParams = ctx.request.body
const { id } = bodyParams;
const delRes = await execMysql(`delete from perf_record where id='${id}';`)
ctx.body = {
code: 200,
data: delRes,
msg: 'delete perf_record success'
};
} catch (r) {
ctx.body = {
code: 0,
data: null,
msg: r.toString()
};
}
});💖 apifox 测试post删除数据接口
根据id删除成功！
⭐结束
👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 最后，感谢你的阅读！
