性能监控系统搭建——node_koa实现性能监控数据上报（第一章）

⭐前言

大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。

背景：

为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。

功能：对外暴露性能上报接口，用户通过api_key请求上报数据到后台

由于在往期文章已经介绍过如何实现jwt权限登录，所有这篇文章主要讲解node_koa对数据监控表的查询、增加、删除和更新。

noe_koa系列往期文章

node_koa后端------初始化配置jwt和swagger的koa框架

node_koa后端------连接redis缓存数据

node_koa后端------生成验证码存入redis并使用smtp发送邮件🎈

node_koa封装smtp，使用coze调用api发送html邮件（gmail/outlook）

node_koa连接mysql，结合jwt实现登录注册（查库、写库）

⭐后端node-koa实现数据表的增删改查

✏️mysql数据库表设计

表名 性能表 perf_table 性能指标参考

developer.mozilla.org/zh-CN/docs/...

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删除数据接口

删除成功！

⭐结束

该系列也会同步到个人的csdn博客，本文分享到这结束，如有错误或者不足之处欢迎指出！

👍 点赞，是我创作的动力！

⭐️ 收藏，是我努力的方向！

✏️ 评论，是我进步的财富！

💖 最后，感谢你的阅读！