# 极简App分发系统 一个纯前端实现的App分发系统,支持管理员登录、App上传和无需登录下载功能。 ## 功能特性 - ✅ 管理员登录(密码:admin123) - ✅ App上传(支持.apk、.ipa、.zip文件,最大100MB) - ✅ 无需登录即可下载 - ✅ 响应式设计 - ✅ 纯前端实现,无框架依赖 - ✅ 支持后端API扩展 ## 快速开始 ### 1. 启动前端服务 ```bash # 使用Python启动简单HTTP服务器 python -m http.server 8000 # 或使用Node.js npx http-server -p 8000 ``` 访问地址:http://localhost:8000 ### 2. 后端API实现(可选) 如果需要持久化存储和多用户访问,可以实现后端API。 #### 后端要求 - 端口:3000 - 无需鉴权 - 支持CORS跨域请求 #### API接口 | 方法 | 路径 | 描述 | 请求体 | 响应 | |------|------|------|--------|------| | GET | /api/apps | 获取App列表 | - | `[{id: string, name: string, fileName: string, date: string}]` | | POST | /api/apps | 上传App | multipart/form-data
`name`: App名称(可选,不填则使用文件名作为默认值)
`file`: 文件 | `{success: boolean, message?: string}` | | GET | /api/apps/:id | 下载指定App | - | 文件流 | #### 后端实现示例(Node.js + Express) ```javascript const express = require('express'); const multer = require('multer'); const cors = require('cors'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.use(cors()); // 模拟数据存储 let apps = []; // 获取App列表 app.get('/api/apps', (req, res) => { res.json(apps); }); // 上传App app.post('/api/apps', upload.single('file'), (req, res) => { let { name } = req.body; const file = req.file; if (!file) { return res.json({ success: false, message: '缺少文件' }); } // 如果name为空,使用文件名作为默认值(去除扩展名) if (!name || !name.trim()) { name = file.originalname.replace(/\.[^/.]+$/, ''); } const app = { id: Date.now().toString(), name, fileName: file.originalname, date: new Date().toLocaleString('zh-CN') }; apps.unshift(app); res.json({ success: true }); }); // 下载App app.get('/api/apps/:id', (req, res) => { const app = apps.find(a => a.id === req.params.id); if (!app) { return res.status(404).json({ success: false, message: 'App不存在' }); } // 实际实现中,这里应该返回真实的文件流 res.send('文件下载功能待实现'); }); app.listen(3000, () => { console.log('Server running on port 3000'); }); ``` ## 技术栈 - HTML5 - CSS3 - JavaScript (ES6+) ## 文件结构 ``` ├── index.html # 主页面 ├── style.css # 样式文件 ├── script.js # 核心逻辑 └── README.md # 说明文档 ``` ## 使用说明 ### 管理员登录 1. 在登录框中输入密码:admin123 2. 点击"登录"按钮 3. 成功后将显示上传区域 ### 上传App 1. 登录成功后,在上传区域填写App名称(可选,不填写则使用文件名作为默认值) 2. 选择要上传的文件(.apk、.ipa、.zip) 3. 点击"上传"按钮 4. 上传成功后,App将显示在下载列表中 ### 下载App 1. 在下载区域找到要下载的App 2. 点击"下载"按钮即可开始下载 3. 点击"复制直链"按钮可以复制App的直接下载链接 ## 自定义配置 ### 修改管理员密码 在 `script.js` 中修改: ```javascript const ADMIN_PASSWORD = 'your_new_password'; ``` ### 修改后端API地址 在 `script.js` 中修改: ```javascript const API_BASE_URL = 'http://your-backend-url:port/api'; ``` ### 自定义样式 CSS选择器保持不变,可以直接修改 `style.css` 文件来自定义样式。 ## 浏览器兼容性 - Chrome 60+ - Firefox 55+ - Safari 12+ - Edge 79+ ## 注意事项 1. 默认使用localStorage存储,数据只保存在浏览器中 2. 建议部署后端API以实现持久化存储 3. 生产环境中请修改默认密码 4. 建议添加HTTPS支持,尤其是在公网环境中 ## 许可证 MIT