做版权保护的网站,国际域名网站,临漳专业做网站,给公司做网站要花多钱项目概述
在本项目中#xff0c;我们将搭建一个基于 STM32 的 NAS#xff08;网络附加存储#xff09;私盘#xff0c;通过网络访问存储在外部 SATA 硬盘上的文件。该项目将使用 STM32 开发板、外接 SATA 硬盘、LwIP 协议栈以及 FATFS 文件系统来实现文件的上传、下载和管…项目概述
在本项目中我们将搭建一个基于 STM32 的 NAS网络附加存储私盘通过网络访问存储在外部 SATA 硬盘上的文件。该项目将使用 STM32 开发板、外接 SATA 硬盘、LwIP 协议栈以及 FATFS 文件系统来实现文件的上传、下载和管理用户可以通过简单的 Web 界面进行操作。
系统设计
硬件设计 STM32 开发板 选择 STM32F407 或 STM32F746 开发板具备足够的 RAM 和闪存以支持 NAS 功能。 存储介质 使用外接 SATA 硬盘通过 SATA 转 USB 适配器连接到 STM32。 网络接口 选择以太网模块如 W5500或 Wi-Fi 模块如 ESP8266以实现网络连接。 电源管理 确保使用的电源适配器能够满足 STM32 开发板和外接硬盘的功耗需求。
软件设计 开发环境 使用 STM32CubeIDE 或 Keil MDK 作为开发工具。 固件库 使用 STM32 HAL 库进行硬件抽象和操作。 文件系统 使用 FATFS 库来管理存储设备上的文件系统支持文件的读写、删除等操作。 网络协议 使用 LwIP 协议栈处理 TCP/IP 网络通信。实现 HTTP/HTTPS 协议以支持 Web 服务器功能支持文件的上传和下载。
配置环境
1. 安装 STM32CubeIDE
下载并安装 STM32CubeIDE。按照安装向导完成安装过程。
2. 创建新项目
打开 STM32CubeIDE选择 File - New - STM32 Project。在 Board Selector 中选择您的 STM32 开发板如 STM32F407 或 STM32F746。配置项目名称和存储路径点击 Finish。
3. 启用所需的中间件
在左侧的 Project Explorer 中右键单击项目名称选择 Properties。选择 C/C Build - Settings - Tool Settings确保选择了适当的编译工具链。右键单击项目选择 Manage Embedded Software Packages然后选择 FATFS 和 LwIP 进行添加和配置。
4. 配置网络接口
根据所选的网络模块以太网或 Wi-Fi在 Pinout Configuration 视图中配置相应的引脚和设置。对于以太网模块请确保启用以太网外设并配置 MAC 地址等参数。
5. 配置外部存储
将 SATA 硬盘连接到 STM32 开发板的 USB 接口。在 FATFS 中配置相关参数以确保可以识别和访问外部存储。
6. 添加库文件
导入必要的库文件如 LwIP 和 FATFS到项目中并确保在 main.c 或其他相应文件中包含头文件。
STM32代码实现
以下是项目的主要代码实现部分包括网络初始化、文件操作和 HTTP 服务器的实现。
1. 初始化和网络配置
#include lwip/init.h
#include lwip/netif.h
#include lwip/tcpip.h
#include ethernetif.hvoid init_network(void) {lwip_init(); // 初始化 LwIPstruct netif my_netif;ip_addr_t ipaddr, netmask, gw;// 设置网关和子网IP4_ADDR(gw, 192, 168, 1, 1); // 网关IP4_ADDR(ipaddr, 192, 168, 1, 100); // 设备 IPIP4_ADDR(netmask, 255, 255, 255, 0); // 子网掩码netif_add(my_netif, ipaddr, netmask, gw, NULL, ethernetif_init, tcpip_input);netif_set_default(my_netif); // 设置为默认网络接口netif_set_up(my_netif); // 启动网络接口
}说明
lwip_init() 初始化 LwIP轻量级 IP 协议栈。使用 netif_add() 添加网络接口并配置 IP、网关和子网掩码。netif_set_up() 启动网络接口使其可以进行通信。
2. 文件系统操作
#include ff.h // FATFS 头文件void create_file(void) {FATFS fs; // 文件系统对象FIL fil; // 文件对象FRESULT res; // 文件操作结果char buffer[] Hello, STM32 NAS!;// 挂载文件系统res f_mount(fs, , 1); if (res FR_OK) {// 创建文件并写入数据res f_open(fil, test.txt, FA_WRITE | FA_CREATE_ALWAYS); if (res FR_OK) {f_write(fil, buffer, sizeof(buffer), NULL); // 写入数据f_close(fil); // 关闭文件}}
}说明
FATFS 是文件系统的结构体FIL 是文件对象。首先调用 f_mount() 挂载文件系统这样就可以对存储设备进行操作。使用 f_open() 创建或打开文件并使用 f_write() 写入数据。操作完成后调用 f_close() 关闭文件以释放资源。
3. HTTP 服务器实现
#include httpd.h // HTTP 服务器头文件void start_http_server(void) {httpd_init(); // 初始化 HTTP 服务器
}// HTTP 请求处理示例
static void handle_get_request(struct httpd_state *hs) {const char *response HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\n\r\nHello from STM32 NAS!;httpd_send(hs, response, strlen(response)); // 发送响应
}说明
httpd_init() 初始化 HTTP 服务器准备接受请求。处理 GET 请求的示例函数 handle_get_request() 发送一个简单的文本响应。
4. 主函数
int main(void) {// 初始化系统HAL_Init();SystemClock_Config(); // 配置系统时钟MX_GPIO_Init(); // 初始化 GPIOMX_SPI_Init(); // 初始化 SPI用于以太网模块MX_USB_OTG_FS_PCD_Init(); // 初始化 USB OTG用于 SATA 硬盘init_network(); // 初始化网络create_file(); // 创建文件start_http_server(); // 启动 HTTP 服务器while (1) {// 处理网络事件syscheck_timeouts();}
}说明
HAL_Init() 初始化硬件抽象层设置基本的硬件配置。SystemClock_Config() 配置系统时钟以保证系统的正常运行。调用 init_network() 初始化网络create_file() 创建文件start_http_server() 启动 HTTP 服务器。在 while (1) 循环中不断处理网络事件保持系统运行。
Web 前端界面交互搭建
1. 项目结构
首先您需要创建一个简单的项目结构用于存放前端文件。假设我们将所有的前端文件放在 STM32 的文件系统中的 /www 目录下项目结构如下
/www├── index.html├── style.css└── script.js2. HTML 页面index.html
下面是一个简单的 HTML 页面提供文件上传和下载的功能。
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleSTM32 NAS 私盘/titlelink relstylesheet hrefstyle.css
/head
bodydiv classcontainerh1STM32 NAS 私盘/h1div classupload-sectionh2上传文件/h2input typefile idfileInputbutton iduploadButton上传/button/divdiv classfile-listh2文件列表/h2ul idfileList/ul/div/divscript srcscript.js/script
/body
/html3. CSS 样式style.css
下面是简单的 CSS 样式用于美化前端界面。
body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;
}.container {max-width: 600px;margin: 0 auto;background: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}h1 {text-align: center;
}.upload-section, .file-list {margin-bottom: 30px;
}button {padding: 10px 15px;background-color: #28a745;color: white;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #218838;
}4. JavaScript 代码script.js
我们将使用 AJAX 来与 STM32 后端进行交互实现文件上传和获取文件列表的功能。
document.getElementById(uploadButton).onclick function() {const fileInput document.getElementById(fileInput);const file fileInput.files[0];if (!file) {alert(请选择一个文件!);return;}const formData new FormData();formData.append(file, file);fetch(/upload, { // 发送文件到后端method: POST,body: formData}).then(response response.text()).then(data {alert(data);loadFileList(); // 上传成功后更新文件列表}).catch(error console.error(Error:, error));
};function loadFileList() {fetch(/files) // 请求文件列表.then(response response.json()).then(files {const fileList document.getElementById(fileList);fileList.innerHTML ; // 清空文件列表files.forEach(file {const li document.createElement(li);li.textContent file;fileList.appendChild(li);});}).catch(error console.error(Error:, error));
}// 页面加载时获取文件列表
window.onload loadFileList;5. 后端实现
为了使前端能够与后端进行交互我们需要在 STM32 的 HTTP 服务器中处理文件上传和文件列表请求。
1. 处理文件上传的代码
#include httpd.h // HTTP 服务器头文件
#include ff.h // FATFS 头文件// 处理文件上传请求
static void handle_file_upload(struct httpd_state *hs) {char buf[512];FIL fil;FRESULT res;char *filename uploaded_file.txt; // 上传的文件名// 读取 HTTP 请求体int bytes_read httpd_read_request_body(hs, buf, sizeof(buf));if (bytes_read 0) {// 创建文件并写入数据res f_open(fil, filename, FA_WRITE | FA_CREATE_ALWAYS);if (res FR_OK) {f_write(fil, buf, bytes_read, NULL); // 写入文件f_close(fil); // 关闭文件httpd_send_response(hs, HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\n\r\nFile uploaded successfully!); // 响应成功} else {httpd_send_response(hs, HTTP/1.1 500 Internal Server Error\r\nContent-Type: text/plain\r\n\r\nFailed to open file!); // 响应失败}} else {httpd_send_response(hs, HTTP/1.1 400 Bad Request\r\nContent-Type: text/plain\r\n\r\nInvalid request body!); // 响应无效请求}
}说明
使用 httpd_read_request_body(hs, buf, sizeof(buf)) 读取 HTTP 请求体中的文件数据。使用 FATFS API f_open() 创建或打开文件然后使用 f_write() 写入数据。根据操作结果发送不同的 HTTP 响应。
2. 获取文件列表的代码
接下来我们需要实现一个功能来获取当前存储设备中的所有文件。
#include ff.h // FATFS 头文件// 处理文件列表请求
static void handle_file_list(struct httpd_state *hs) {DIR dir;FILINFO fno;FRESULT res;char response[1024];int response_length 0;// 打开目录res f_opendir(dir, /); // 假设所有文件都在根目录if (res FR_OK) {response_length snprintf(response response_length, sizeof(response) - response_length, [);while ((res f_readdir(dir, fno)) FR_OK fno.fname[0] ! 0) {if (response_length 1) {response_length snprintf(response response_length, sizeof(response) - response_length, ,);}response_length snprintf(response response_length, sizeof(response) - response_length, \%s\, fno.fname);}response_length snprintf(response response_length, sizeof(response) - response_length, ]);f_closedir(dir);httpd_send_response(hs, HTTP/1.1 200 OK\r\nContent-Type: application/json\r\n\r\n);httpd_send_response(hs, response); // 发送文件列表} else {httpd_send_response(hs, HTTP/1.1 500 Internal Server Error\r\nContent-Type: text/plain\r\n\r\nFailed to open directory!); // 响应失败}
}说明
使用 f_opendir() 打开根目录使用 f_readdir() 读取目录中的文件。将文件名格式化为 JSON 格式的字符串返回给前端。发送 HTTP 响应内容类型为 application/json。
3. 绑定 HTTP 请求处理
在 HTTP 服务器初始化时我们需要将上传和文件列表请求的处理函数绑定到相应的 URL。
void start_http_server(void) {httpd_init(); // 初始化 HTTP 服务器// 绑定请求处理函数httpd_register_uri(/upload, handle_file_upload, HTTP_POST); // 处理文件上传httpd_register_uri(/files, handle_file_list, HTTP_GET); // 获取文件列表
}说明
httpd_register_uri() 函数用于将请求 URL 与处理函数进行绑定。/upload URL 用于处理文件上传请求/files URL 用于获取文件列表。
项目总结
在本项目中我们成功地搭建了一个基于 STM32 的 NAS网络附加存储私盘利用 STM32 开发板的强大功能和灵活性结合 LwIP 协议栈和 FATFS 文件系统实现了文件的上传、下载和管理。以下是本项目的关键要点和收获
1. 硬件与软件的结合
通过选择适合的 STM32 开发板如 STM32F407 或 STM32F746并配合外部 SATA 硬盘和网络模块如以太网或 Wi-Fi我们有效地创建了一个功能强大的 NAS 解决方案。硬件部分的选择对于系统的稳定性和性能至关重要而软件部分则利用了 STM32 HAL 库、FATFS 文件系统和 LwIP 协议栈使得硬件功能得以充分发挥。
2. 文件管理功能
我们成功实现了基本的文件管理功能包括文件的上传、下载和列表展示。通过使用 FATFS 库我们能够方便地对外接存储进行文件操作这为用户在 NAS 上进行文件管理提供了便利。
3. Web 前端交互
通过搭建简单的 Web 前端界面用户能够直观地与 NAS 进行交互。使用 HTML、CSS 和 JavaScript我们实现了文件上传和文件列表展示功能使得用户在浏览器中就可以方便地操作存储在 STM32 上的文件。此外利用 AJAX 技术我们实现了无刷新数据交互提升了用户体验。
4. 网络通信实现
使用 LwIP 协议栈我们为 STM32 开发板实现了网络通信功能。通过 HTTP 协议前端与后端的交互得以顺利进行。我们实现了对文件上传和文件列表请求的处理使得用户能够通过网络访问 NAS 中的文件。
