性能监控系统搭建——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建表语句

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语句

sql 复制代码
insert into perf_record (id,name) values('add-id','前端性能')

node koa 封装post接口添加数据,用户id信息使用jsonwebtoken解析token得到,自定义生产唯一id和当前时间,其他参数从body得到

js 复制代码
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参数

json 复制代码
{
    "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,按创建时间排序

sql 复制代码
select * from perf_record 
where title like '%${name}%' 
order by create_time 
desc limit ${start},${end};

cout查询总数sql

sql 复制代码
select count(1 ) as total from perf_record where name like '%${name||''}%';

koa接口实现

js 复制代码
// 获取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

sql 复制代码
delete from perf_record  where id='${id}';

koa封装api

sql 复制代码
// 删除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博客,本文分享到这结束,如有错误或者不足之处欢迎指出!

👍 点赞,是我创作的动力!

⭐️ 收藏,是我努力的方向!

✏️ 评论,是我进步的财富!

💖 最后,感谢你的阅读!

相关推荐
2401_857622667 小时前
SpringBoot框架下校园资料库的构建与优化
spring boot·后端·php
2402_857589367 小时前
“衣依”服装销售平台:Spring Boot框架的设计与实现
java·spring boot·后端
哎呦没8 小时前
大学生就业招聘:Spring Boot系统的架构分析
java·spring boot·后端
_.Switch9 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
杨哥带你写代码10 小时前
足球青训俱乐部管理:Spring Boot技术驱动
java·spring boot·后端
AskHarries11 小时前
读《show your work》的一点感悟
后端
A尘埃11 小时前
SpringBoot的数据访问
java·spring boot·后端
yang-230711 小时前
端口冲突的解决方案以及SpringBoot自动检测可用端口demo
java·spring boot·后端
Marst Code11 小时前
(Django)初步使用
后端·python·django
代码之光_198011 小时前
SpringBoot校园资料分享平台:设计与实现
java·spring boot·后端