初始化仓库,前端完成
This commit is contained in:
181
README.md
Normal file
181
README.md
Normal file
@@ -0,0 +1,181 @@
|
||||
# 极简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<br>`name`: App名称(可选,不填则使用文件名作为默认值)<br>`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
|
||||
Reference in New Issue
Block a user