streetmerchant Web界面开发：从静态页面到交互功能

streetmerchant Web界面开发：从静态页面到交互功能

【免费下载链接】streetmerchant 🤖 The world's easiest, most powerful stock checker 项目地址: https://gitcode.com/GitHub_Trending/st/streetmerchant

项目概述

streetmerchant 是一个功能强大的库存检查工具（Stock Checker），其 Web 界面允许用户通过浏览器配置和监控应用。本文将详细解析 Web 界面的开发过程，包括静态页面设计、后端 API 实现以及交互功能开发。项目核心代码位于 src/web/index.ts，静态资源存放在 web/ 目录下。

静态页面设计

Web 界面的静态页面 web/index.html 采用简洁的四列表单布局，主要包含以下功能区域：

• 商店选择列表（Store List）
• 品牌筛选列表（Brand List）
• 系列筛选列表（Series List）
• 型号筛选列表（Model List）
• 配置保存按钮
• 截图查看区域

页面使用原生 JavaScript 实现动态渲染逻辑，关键函数包括：

• renderList()：动态生成复选框列表
• listToArray()：将选中状态转换为配置数组
• setConfig()：保存用户配置到后端

<table>
  <tr>
    <th onclick="selectAll(this, 'storeList');">Stores</th>
    <th onclick="selectAll(this, 'brandList');">Brands</th>
    <th onclick="selectAll(this, 'seriesList');">Series</th>
    <th onclick="selectAll(this, 'modelList');">Models</th>
  </tr>
  <tr>
    <td valign="top" id="storeList"></td>
    <td valign="top" id="brandList"></td>
    <td valign="top" id="seriesList"></td>
    <td valign="top" id="modelList"></td>
  </tr>
</table>
<input type="button" onclick="setConfig();" value="Save" />

后端 API 实现

Web 服务的核心逻辑在 src/web/index.ts 中实现，主要功能包括：

HTTP 服务器创建

通过 Node.js 的 http 模块创建 Web 服务器，监听环境变量 WEB_PORT 指定的端口：

export async function startAPIServer() {
  await stopAPIServer();
  if (process.env.WEB_PORT) {
    server = createServer(requestListener);
    server.listen(Number(process.env.WEB_PORT));
  }
}

请求路由处理

requestListener 函数负责路由分发，将 /api/* 请求转发到 handleAPI 函数处理：

function requestListener(request: IncomingMessage, response: ServerResponse) {
  const url = request.url!;
  const urlComponents = url.slice(1).split('/');
  
  switch (urlComponents[0]) {
    case 'api':
      handleAPI(request, response, urlComponents);
      break;
    default:
      sendFile(response, url === '/' ? '/index.html' : url);
      break;
  }
}

API 端点实现

handleAPI 函数实现了以下主要端点：

端点	方法	功能
/api/config	GET	获取当前配置
/api/config	PUT	更新配置
/api/stores	GET	获取商店列表
/api/brands	GET	获取品牌列表
/api/series	GET	获取系列列表
/api/models	GET	获取型号列表
/api/screenshots	GET	获取截图列表

配置更新的实现逻辑：

case 'config':
  if (request.method === 'PUT') {
    const data: string[] = [];
    request.on('data', chunk => data.push(chunk));
    request.on('end', () => {
      try {
        setConfig(JSON.parse(data.join('')));
        updateStores();
      } catch {
        logger.warn('Could not setup config');
      }
      sendConfig(response);
    });
    return;
  }
  sendConfig(response);
  return;

交互功能开发

数据加载流程

页面加载时通过 loadInitial() 函数初始化数据：

async function loadInitial() {
  const respStores = await fetch('/api/stores');
  stores = await respStores.json();
  
  const respBrands = await fetch('/api/brands');
  brands = await respBrands.json();
  
  const respSeries = await fetch('/api/series');
  series = await respSeries.json();
  
  const respModels = await fetch('/api/models');
  models = await respModels.json();
  
  await loadConfig();
  await loadScreenshots();
}

配置保存流程

用户点击 "Save" 按钮后，setConfig() 函数将表单数据转换为 JSON 格式并发送到后端：

async function setConfig() {
  config.store.stores = listToArray('storeList', 'name');
  config.store.showOnlyBrands = listToArray('brandList');
  config.store.showOnlySeries = listToArray('seriesList');
  config.store.showOnlyModels = listToArray('modelList', 'name');
  
  const resp = await fetch('/api/config', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(config)
  });
  
  await onReceiveConfig(resp);
  alert('Saved!');
}

截图管理功能

系统会自动保存库存检查结果的截图，用户可通过 Web 界面查看：

async function loadScreenshots() {
  const respScreenshots = await fetch('/api/screenshots');
  const screenshots = await respScreenshots.json();
  
  const screenshotContainer = document.getElementById('screenshots');
  screenshotContainer.innerHTML = '';
  
  for (const screenshot of screenshots) {
    const htmlElement = document.createElement('a');
    htmlElement.href = `/api/screenshots/${screenshot}`;
    htmlElement.target = '_blank';
    htmlElement.innerText = screenshot;
    screenshotContainer.appendChild(htmlElement);
    screenshotContainer.appendChild(document.createElement('br'));
  }
}

功能扩展建议

界面美化

当前界面使用基础 CSS 样式，可通过以下方式改进：

• 引入 Tailwind CSS 或 Bootstrap 框架
• 添加响应式设计支持移动设备
• 实现配置项的折叠/展开功能

功能增强

1. 添加实时通知功能，集成 src/messaging/ 模块
2. 实现配置导入/导出功能
3. 添加操作日志查看区域
4. 集成 docs/faq.md 中的常见问题解答

部署与使用

Web 界面的部署和使用方法可参考官方文档：

• 快速开始指南
• 配置参考
• 故障排除

启动 Web 服务后，访问 http://localhost:${WEB_PORT} 即可打开控制界面，通过勾选不同选项来配置库存检查规则，点击 "Save" 按钮保存配置。系统会自动应用新配置并开始监控指定的产品库存。

【免费下载链接】streetmerchant 🤖 The world's easiest, most powerful stock checker 项目地址: https://gitcode.com/GitHub_Trending/st/streetmerchant