# 七栈工具 **Repository Path**: AJiangS/777-tools ## Basic Information - **Project Name**: 七栈工具 - **Description**: 七栈工具网站源码 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-08-19 - **Last Updated**: 2026-08-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 七栈工具 - 开发资源分享网站 一个免登录即可访问的开源项目、开发工具、免费API分享平台。 **纯静态站点**：所有数据写死在前端本地（无需后端、无需数据库）。前端使用 Vue3 + Vite + Element Plus，打包后可直接部署到 nginx / GitHub Pages / Vercel / CDN 等任意静态托管服务。 > 可选：`backend/` 目录仍保留了完整的 Go + Gin 后端实现，如需改成动态接口，把各页面的 `import` 从 `@/data/mockService.js` 改回 `@/api` 即可。 --- ## 目录结构 ``` 七栈工具/ ├── backend/ # Go 后端（可选，纯静态部署时无需启动） │ ├── main.go # 程序入口（Gin框架） │ ├── models/ handlers/ routes/ data/ │ └── go.mod │ └── frontend/ # Vue3 前端（主要开发目录，纯静态） ├── index.html ├── package.json ├── vite.config.js ├── public/ └── src/ ├── main.js ├── App.vue # 根组件（顶部导航+搜索+底部Footer） ├── router/index.js # 路由配置 ├── data/ # ★ 数据写死在这里 │ ├── mockData.js # ★ 开源项目/工具/广告/分类（改数据就改这个文件） │ └── mockService.js # 本地查询逻辑（搜索/分类/分页/详情） ├── api/ utils/ # axios 封装（可选，使用后端时才需要） ├── assets/style.css ├── components/ # 4个广告组件 │ ├── AdBanner.vue / AdSidebar.vue │ ├── AdInline.vue / AdDetailBottom.vue └── views/ # 7个页面 ├── Home.vue # 首页（热门+统计） ├── Projects.vue / ProjectDetail.vue ├── Tools.vue / ToolDetail.vue ├── FreeApis.vue / FreeApiDetail.vue └── Sites.vue # 精品网站（精选优质资源网站） ``` --- ## 功能模块 | 模块 | 说明 | |------|------| | **首页** | Hero 展示区、热门开源项目（按Star排序）、精选开发工具、精选免费API、统计数据 | | **开源项目** | 分类筛选、关键词搜索（名称/描述/标签/作者）、排序、分页、语言/License/Tags | | **开发工具** | 分类筛选（一个工具可属于多个分类）、平台标签（Win/Mac/Linux/Web） | | **编程语言** | 独立页面，免费开源语言运行时（官网/下载直达） | | **精品网站** | 精选优质开发资源网站，卡片式展示，一键访问 | | **免费API** | 分类筛选、关键词搜索、免费额度/认证方式/速率限制/接口地址展示 | | **详情页** | 各模块独立详情页，完整介绍+信息卡+跳转下载 | | **广告系统** | 4种广告位：顶部Banner、侧边栏、列表内嵌、详情页底部 | | **响应式** | 桌面/平板/移动端自适应 | --- ## 环境要求（纯前端） - **Node.js** >= 16（推荐 18+） - **npm** >= 8（或 pnpm / yarn） - 端口：3000（Vite 开发服务器） --- ## 快速启动 ### 开发模式 打开 **一个终端** 即可（不需要后端）： ```bash cd frontend # 1. 安装依赖（首次运行，约5-10分钟） npm config set registry https://registry.npmmirror.com # 国内镜像加速 npm install # 2. 启动开发服务器 npm run dev ``` 看到以下输出说明启动成功： ``` VITE v5.x.x ready in XXX ms ➜ Local: http://localhost:3000/ ``` 浏览器访问 **http://localhost:3000** 即可打开网站。 ### 生产构建（部署到线上） ```bash cd frontend npm run build ``` 构建产物在 `frontend/dist/` 目录，**直接整个文件夹** 丢到 nginx、IIS、GitHub Pages、Vercel、Netlify、腾讯云COS 等任意静态托管服务即可——不需要后端，不需要反向代理，不需要数据库。 nginx 示例配置： ```nginx server { listen 80; server_name your-domain.com; root /var/www/七栈工具/frontend/dist; index index.html; # Vue history 模式刷新404处理 location / { try_files $uri $uri/ /index.html; } } ``` --- ## 如何更新数据 **所有内容都写死在 [frontend/src/data/mockData.js](file:///C:/Users/Administrator/Desktop/七栈工具/frontend/src/data/mockData.js) 里**，直接编辑这个文件即可： | 要修改的内容 | 修改位置（文件中的数组） | |-------------|-------------------------| | 新增/修改 开源项目 | `projects` 数组 | | 新增/修改 开发工具 | `tools` 数组 | | 新增/修改 免费API | `freeApis` 数组 | | 新增/修改 精品网站 | `sites` 数组 | | 新增/修改 广告位 | `ads` 数组（position 字段对应：banner_top / sidebar / list_inline / detail_bottom） | | 调整分类 | `categories` 数组（type 字段：project / tool / freeapi） | 分类数量统计会在运行时自动计算，无需手动改 `count`。 保存文件后 Vite 会自动热更新，刷新页面即可看到效果。 --- ## 顶部导航（可配置） 顶部导航在 [frontend/src/App.vue](file:///C:/Users/Administrator/Desktop/七栈工具/frontend/src/App.vue) 的 `