构建服务大厅门户与方案下载功能
张三（开发者）: 你好，李工，我想在我们公司服务大厅门户中加入一个功能，让用户可以下载各种解决方案文档。你觉得我们应该怎么开始呢？
李工（资深开发者）: 首先，我们需要定义一个API接口来处理用户请求，然后需要一个数据库表来存储这些文件的信息。你负责前端展示，对吧？
张三: 是的，我打算使用HTML和JavaScript来创建一个简单的界面。后端的API接口和数据库操作就拜托你了。
李工: 没问题。首先，我们来设计这个API接口。我建议使用RESTful风格，这样更易于理解和维护。比如，我们可以创建一个路径为 /api/download 的接口，用于处理文件下载请求。
张三: 好主意！那我们如何将文件信息存储在数据库中呢？
李工: 我们可以创建一个名为 `solutions` 的表，包含字段如 `id`, `name`, `file_path`, `description` 等。这样每个解决方案都有一个唯一的ID，并且文件的存储路径也一目了然。
张三: 明白了。接下来，我来写前端代码。我打算使用JavaScript的Fetch API来调用你的后端API。
李工: 很好，让我们来看一下后端代码。首先，你需要创建一个Express应用，然后定义路由处理程序。例如：
const express = require('express');
const app = express();
const port = 3000;
// 创建数据库连接
const db = require('./db'); // 假设这是你的数据库配置
app.get('/api/download/:id', async (req, res) => {
try {
const id = req.params.id;
const [rows] = await db.query('SELECT * FROM solutions WHERE id = ?', [id]);
if (rows.length > 0) {
const file = rows[0];
res.download(file.file_path, file.name);
} else {
res.status(404).send('Not Found');
}
} catch (error) {
console.error(error);
res.status(500).send('Internal Server Error');
}
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
张三: 这段代码看起来很不错。现在，我来编写前端代码：
document.addEventListener('DOMContentLoaded', function() {
fetch('/api/download/1') // 这里假设ID为1
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'solution.pdf'; // 文件名
a.click();
})
.catch(error => console.error('Error:', error));
});
李工: 太棒了！我们现在有了一个基本的服务大厅门户，用户可以通过点击链接下载解决方案文档。
本站知识库部分内容及素材来源于互联网，如有侵权，联系必删！