liuchengsen
/
zhijiayun-pharmacy


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>四层技术架构-前端管控爬虫</title>
    <style>
        body {
            background:#f8f9fa;
            font-family:"Microsoft Yahei",sans-serif;
            padding:20px;
        }
        .wrap{
            background:#fff;
            padding:24px;
            max-width:1100px;
            margin:0 auto;
        }
        .title-tip{
            text-align:center;
            color:#d93421;
            font-size:16px;
            margin-bottom:20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="title-tip">核心规则：爬虫执行、次数限制、请求拦截 全部由前端管控；后端不提供爬虫服务</div>
    <svg width="1050" height="760" viewBox="0 0 1050 760">
        <defs>
            <marker id="arr-normal" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,0 L10,5 L0,10 z" fill="#333"/>
            </marker>
            <marker id="arr-rule" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,0 L10,5 L0,10 z" fill="#f27c22"/>
            </marker>
        </defs>
        <!-- 第一层 前端 -->
        <rect x="20" y="20" width="1010" height="160" rx="10" fill="#e6f4ff" stroke="#1677ff" stroke-width="2"/>
        <text x="525" y="55" text-anchor="middle" font-size="20" font-weight="bold" fill="#1677ff">第一层：客户端（前端）</text>
        <line x1="60" y1="75" x2="990" y2="75" stroke="#94c6ff" stroke-width="1"/>
        <rect x="60" y="90" width="280" height="60" rx="6" fill="#fff" stroke="#8cbfff"/>
        <text x="200" y="125" text-anchor="middle" font-size="14">账户&邀请展示</text>
        <rect x="360" y="90" width="280" height="60" rx="6" fill="#fff" stroke="#faad14"/>
        <text x="500" y="125" text-anchor="middle" font-size="14">额度校验&请求拦截</text>
        <rect x="660" y="90" width="280" height="60" rx="6" fill="#fff" stroke="#f54242"/>
        <text x="800" y="125" text-anchor="middle" font-size="14">爬虫引擎【前端独立执行】</text>

        <!-- 第二层 网关 -->
        <rect x="20" y="200" width="1010" height="80" rx="10" fill="#f0f1f3" stroke="#666" stroke-width="2"/>
        <text x="525" y="245" text-anchor="middle" font-size="18" font-weight="bold" fill="#444">第二层：API 网关（路由分发 + 基础身份鉴权）</text>

        <!-- 第三层 后端服务 -->
        <rect x="20" y="300" width="1010" height="240" rx="10" fill="#fff7e6" stroke="#faad14" stroke-width="2"/>
        <text x="525" y="335" text-anchor="middle" font-size="20" font-weight="bold" fill="#fa8c16">第三层：后端服务集群（仅业务逻辑，无爬虫能力）</text>
        <line x1="60" y1="355" x2="990" y2="355" stroke="#ffdd99" stroke-width="1"/>
        <rect x="50" y="370" width="220" height="50" rx="4" fill="#fff" stroke="#f9cc99"/>
        <text x="160" y="400" text-anchor="middle" font-size="13">用户服务（注册/登录/会员）</text>
        <rect x="290" y="370" width="220" height="50" rx="4" fill="#fff" stroke="#f9cc99"/>
        <text x="400" y="400" text-anchor="middle" font-size="13">邀请服务（邀请码/关系/记录）</text>
        <rect x="530" y="370" width="220" height="50" rx="4" fill="#fff" stroke="#faad14"/>
        <text x="640" y="400" text-anchor="middle" font-size="13">额度服务（下发限制规则）</text>
        <rect x="770" y="370" width="220" height="50" rx="4" fill="#fff" stroke="#f9cc99"/>
        <text x="880" y="400" text-anchor="middle" font-size="13">奖励服务（爬虫次数奖励）</text>
        <rect x="50" y="440" width="470" height="50" rx="4" fill="#fff" stroke="#f9cc99"/>
        <text x="285" y="470" text-anchor="middle" font-size="13">支付服务（订单/支付/会员开通）</text>
        <rect x="550" y="440" width="440" height="50" rx="4" fill="#fff" stroke="#f2bc94"/>
        <text x="770" y="470" text-anchor="middle" font-size="13">流水上报（爬虫使用记录归档）</text>

        <!-- 第四层 中间件 -->
        <rect x="20" y="560" width="1010" height="80" rx="10" fill="#f9f0ff" stroke="#9254de" stroke-width="2"/>
        <text x="525" y="605" text-anchor="middle" font-size="18" font-weight="bold" fill="#722ed1">第四层：公共中间件 (Redis 缓存 + 消息队列)</text>

        <!-- 纵向实线箭头 -->
        <path d="M525 180 L525 200" stroke="#333" stroke-width="2" marker-end="url(#arr-normal)"/>
        <path d="M525 280 L525 300" stroke="#333" stroke-width="2" marker-end="url(#arr-normal)"/>
        <path d="M525 540 L525 560" stroke="#333" stroke-width="2" marker-end="url(#arr-normal)"/>

        <!-- 橙色虚线：额度服务下发规则到前端 -->
<!--        <path d="M640 370 Q 520 230 500 120" stroke="#f27c22" stroke-width="2" stroke-dasharray="8 4" marker-end="url(#arr-rule)"/>-->
        <text x="400" y="220" font-size="14" fill="#f27c22">后端下发额度规则</text>
    </svg>
</div>
</body>
</html>