尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
AI开发牧安 · 第4期 那个后台是怎么堆出来的
记录牧安平台从 0 到 1 的开发过程一个待业在家的网安老兵边做边想。第3期聊完选型这期讲怎么堆出一个能登录、有权限、能收数据的后台。WN101 这个后台说穿了就是从三块最朴素的东西搭起来的一个能登录的网页、一套能认人的权限、一个能装东西的库。没有微服务没有网关没有那堆听起来高级的词。就是先让人进得来进来了只能看该看的然后东西能存住。先搭个壳子最早那版是顶部一排导航点来点去不顺手。后来改成左侧一棵固定菜单——展得开 220 像素收起来 60 像素只留图标鼠标移上去能看名字。顶上一条工具栏放标题和切主题的按钮。盯一天屏幕这个布局比满屏标签省心。上图仅为示意非真实环境。主色定的是 #1677FF科技蓝。配上状态色高危红 #F53F3F、中危橙 #FF7D00、正常绿 #00B42A。深浅两套主题选了存浏览器本地刷新不丢。菜单按业务分了组运营总览、安全检查、监测中心、安全工具、系统管理。这套东西看着简单其实是我盯屏幕时间最长的一版——颜色、间距、圆角、悬停动画一个个调。间距按 4 像素走基准圆角分四档过渡统一 0.15 秒就图个顺眼不累。再装道门壳子有了得有门。登录走 POST /api/auth/login用户名密码对上后端用 secrets.token_urlsafe 随机搓一个 token 回来前端每次请求都带着 Authorization: Bearer xxx后端中间件验。token 塞在 auth_tokens 表里七天过期。密码不存明文是 SHA-256 哈希。这道门的意义不只是不让外人进。更关键的是进来的是谁、能看什么后面得接得上。单有 token 不够得有人和权的那层关系。墙是客户隔出来的由于做的是多客户运营——一个团队管几十家客户A 的客户绝不能让 B 看见。那时候用两张表users 放账号和角色user_customers 把账号和客户 ID 绑一块多对多。角色就两个admin 看全部user 只看被授权的那几家。admin 锁死不能删不能禁用。查询的时候按当前账号能看的客户 ID 去过滤越界的查不出来。这套隔离是单库里的隔离——所有客户数据躺在同一个 SQLite 里靠 user_customers 这张关系表划边界。当时觉得够用管几十家客户没问题。后面做三级架构时才发现单库混着客户数据上了规模就是个坑这个第2期聊过不重复。但那会儿它确实让我一个后台兜住了最早那批客户。堆壳子的过程没那么顺说搭起来三个字轻松真干的时候全是坑。有一回改着改着整个 app.js 直接挂了——页面白屏所有按钮失灵。查了半天才发现是 addDiscoveredAssets 这个函数外层写了 try 却没写 catchJS 语法要求 try 必须跟 catch 或 finally于是整个文件解析失败里面所有函数定义全废了。最后靠数括号开 328、闭 328 才对上才定位到。改完还得强制刷新不然浏览器还缓存着坏的旧文件。还有按钮点了没反应。原因是事件绑定写在了 window.onload 外面DOM 还没出来就去 getElementById拿到 null 调 addEventListener直接抛错把后面全中断了。挪进 window.onload、加个判空就好了。最磨人的是缓存。改完 CSS、JS刷新页面纹丝不动——浏览器把旧的缓存住了。得 CtrlShiftR 强刷或者给文件加 ?v版本号 逼它重新加载。在家一个人调前端这些破事全得自己扛没人帮你分一眼控制台。壳、门、墙齐了到这步WN101 算是个能跑的后台了有界面、能登录、人分了角色、客户隔了边界、数据落进 SQLite。但它还缺最关键的一道——客户现场的东西怎么进得来靠人手动填肯定不行得让机器自己报。下期聊数据接入层Webhook 双认证Bearer HMAC 签名、Agent 怎么注册和心跳、还有第一台真实探针 192.168.58.142 怎么落地的。那才是这个后台真正活起来的时刻。本系列记录牧安平台从 0 到 1 的开发过程一个待业在家的网安老兵边做边想。
RELATED

相关推荐

Redis 分布式锁的正确实现:SET NX PX + Lua 释放,别再写原子性有 bug 的锁了

Redis 分布式锁的正确实现:SET NX PX + Lua 释放,别再写原子性有 bug 的锁了

Redis 分布式锁的正确实现:SET NX PX Lua 释放,别再写原子性有 bug 的锁了 这篇文章解决什么问题 在多个服务实例共享同一份数据时,用 Redis 做分布式锁是最常见的方案。但「把锁加出来」和「把锁写对」是两回事:加锁和设过期时间…

📅 2026/10/6 6:44:47
时间戳转换器:秒/毫秒与本地时间互转,跨时区不再心算

时间戳转换器:秒/毫秒与本地时间互转,跨时区不再心算

打开网页,顶部就每秒刷新「当前时间 当前时间戳(秒/毫秒)」;下面一边输入 Unix 时间戳、一边选个日期时间,几个时区、几种单位来回换算,点一下就复制走。10 位秒、13 位毫秒自动识别,负数时间戳…

📅 2026/9/28 0:48:49
2026年8月27日星期四:从起床到入睡的全天时间管理实战指南

2026年8月27日星期四:从起床到入睡的全天时间管理实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/10/3 0:07:41
MORE NEWS

更多资讯

📰

启动报Port 8088 was already in use?先查是谁占的

启动报Port 8088 was already in use?先查是谁占的 项目启动报 Port 8088 was already in use,意思很直白:这个端口已经有人占了。 先说原理:端口是"门牌号",一间房只住一个进程 端口就是一台机器上的门牌号…

📰

担心文档上云?本地运行的办公AI才敢放心用

单位上周开了个会,主题是"AI 提效",散会时领导补了一句:涉及客户资料的文档,不许往云端传。这话一出,会议室里本来跃跃欲试的同事全蔫了——大家平时用的那些在线 AI,文档一上传就不知道存哪儿去…

📰

先能用,再好用:从烂尾复盘到两周上线,全栈项目的‘原型—快速迭代‘方法论

先能用,再好用:从烂尾复盘到两周上线,全栈项目的“原型—快速迭代”方法论 全栈学习路径的文章已经很多了:怎么选技术栈、怎么搭环境、怎么记文档,几乎每个方向都有人写。但一个更扎心的问题很少有人正面讨论——为什…

📰

深度思考模式把 ARC-AGI-2 从 17.6% 拉到 45.1%:对照 Gemini 3 Pro 的三份能力评测,看‘会思考‘改写了哪些边界

深度思考模式把 ARC-AGI-2 从 17.6% 拉到 45.1%:对照 Gemini 3 Pro 的三份能力评测,看“会思考”改写了哪些边界 一、先说结论:变强的不是“知识”,而是“解法” 每次新模型发布,评测榜单都会涨几个点,大…

📰

1.c++入门篇

1.c中的关键字asmdoifreturntrycontinueautodoubleinlineshorttypedefforbooldynamic_castintsignedtypeidpublicbreakelselongsizeoftypenamethrowcaseenummutablestaticunionwchar_tcatchexplicitnamespacestatic_castunsigneddefaultcharexportnewstructusingfriendclassext…

📰

《江灯合声》:有可行的分框版,也仍可以选择连续鸣谢

武汉江岸区栎坡合唱团在免费节目册《江灯合声》中,以表格集中鸣谢资助者。各家共同要求改为独立小框,团里仍想保留表格。现有全名与支持事项清楚可见,双方此前未承诺具体排版。我支持保留表格。补充的试排材料让选择更具体:分框能…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬