拥抱Vue3与Node.js：构建高性能创作者导航站的架构实践与优化复盘

// models/Resource.js
const mongoose = require('mongoose');
const { Schema } = mongoose;

const ResourceSchema = new Schema({
  name: { type: String, required: true, index: true }, // 索引优化搜索
  url: { type: String, required: true },
  description: { type: String, maxlength: 200 },
  
  // 冗余存储分类信息，避免频繁 Join 查询 Category 表
  category: { 
    name: { type: String, required: true },
    slug: { type: String, required: true },
    _id: { type: Schema.Types.ObjectId, required: true }
  },
  
  tags: [{ type: String }], // 标签直接存储字符串数组，降低复杂度
  
  // 统计字段
  metrics: {
    clicks: { type: Number, default: 0 },
    views: { type: Number, default: 0 }
  },
  
  status: { type: String, enum: ['active', 'pending', 'deleted'], default: 'active' }
}, {
  timestamps: true,
  toJSON: { virtuals: true },
  toObject: { virtuals: true }
});

// 复合索引用于列表过滤
ResourceSchema.index({ 'category._id': 1, createdAt: -1 });
ResourceSchema.index({ status: 1, metrics: -1 });

module.exports = mongoose.model('Resource', ResourceSchema);

<!-- views/CategoryView.vue -->
<template>
  <div class="layout-container">
    <aside class="sidebar">
      <CategoryNav 
        :active-id="currentCategoryId" 
        @change="handleCategoryChange" 
      />
    </aside>
    <main class="content">
      <ResourceList :category-id="currentCategoryId" />
    </main>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import CategoryNav from '@/components/CategoryNav.vue';
import ResourceList from '@/components/ResourceList.vue';

// 使用 provide/inject 跨组件共享状态，避免 props 逐层透传
const currentCategoryId = ref('default');

provide('categoryId', currentCategoryId);

const handleCategoryChange = (id) => {
  currentCategoryId.value = id;
};
</script>

<!-- components/LazyIcon.vue -->
<script setup>
import { defineAsyncComponent } from 'vue';

const props = defineProps({
  name: String
});

// 动态导入组件，Vite 会自动进行代码分割
const icon = defineAsyncComponent(() => 
  import(`@/assets/icons/${props.name}.svg`)
);
</script>

<template>
  <Suspense>
    <template #default>
      <component :is="icon" />
    </template>
    <template #fallback>
      <div class="icon-placeholder" />
    </template>
  </Suspense>
</template>

// middleware/cache.js
const redis = require('../config/redis');
const crypto = require('crypto');

const getCacheKey = (req) => {
  return `nav_cache:${req.originalUrl}`;
};

module.exports = (ttl = 3600) => {
  return async (req, res, next) => {
    const key = getCacheKey(req);
    
    try {
      // 1. 尝试从 Redis 获取
      const cached = await redis.get(key);
      if (cached) {
        return res.json(JSON.parse(cached));
      }

      // 2. 劫持 res.json 方法，以便在发送响应时写入缓存
      const originalJson = res.json.bind(res);
      res.json = async (data) => {
        // 仅缓存成功请求
        if (data.success) {
          await redis.setex(key, ttl, JSON.stringify(data));
        }
        return originalJson(data);
      };

      next();
    } catch (err) {
      console.error('Cache Middleware Error:', err);
      next(); // 缓存服务挂了，直接降级走数据库
    }
  };
};

// controllers/clickController.js
const clickQueue = []; // 简单内存队列，生产环境可用 Bull/Kue

setInterval(async () => {
  if (clickQueue.length === 0) return;
  
  const bulkOps = clickQueue.map(id => ({
    updateOne: {
      filter: { _id: id },
      update: { $inc: { 'metrics.clicks': 1 } }
    }
  }));
  
  // 批量更新
  await Resource.bulkWrite(bulkOps);
  clickQueue.length = 0; // 清空队列
}, 2000); // 每2秒批量提交一次

exports.recordClick = (req, res) => {
  const { id } = req.params;
  
  // 1. 立即返回响应
  res.json({ success: true });
  
  // 2. 加入内存队列
  clickQueue.push(id);
};

# /etc/nginx/conf.d/default.conf

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=api_cache:10m max_size=1g inactive=60m;

server {
    location /api/ {
        proxy_pass http://nodejs_backend;
        
        # 对 GET 请求进行缓存
        proxy_cache api_cache;
        proxy_cache_valid 200 10m; # 200状态码缓存10分钟
        proxy_cache_key "$scheme$request_method$host$request_uri";
        
        # 忽略头部控制，防止私有缓存失效
        proxy_ignore_headers X-Accel-Expires Expires Cache-Control;
        
        add_header X-Cache-Status $upstream_cache_status; # 用于调试缓存命中率
    }
}