企业官网建设流程全解析

自己如何建设企业网站,百度系优化,app制作教程视频全,杰奇网站地图怎么做修改日期内容120260102初版 上一篇我们完成了电脑上的API测试#xff0c;今天要实现一个关键需求#xff1a;让手机也能访问我们的测试工具。在实际开发中#xff0c;经常需要在不同设备上测试API#xff0c;手机访问是个硬需求。 一#xff1a;问题背景#xff1a;为什么…修改日期内容120260102初版上一篇我们完成了电脑上的API测试今天要实现一个关键需求让手机也能访问我们的测试工具。在实际开发中经常需要在不同设备上测试API手机访问是个硬需求。一问题背景为什么手机访问不成功我的电脑上API测试一切正常但用手机访问时遇到两个典型问题网络连接问题手机浏览器报错无法连接到服务器配置问题需要手动修改代码中的IP地址二解决方案两步搞定手机访问第一步找到正确的IP地址关键点手机和电脑必须在同一个局域网手机访问的是电脑的局域网IP不是localhost。# 在Windows上查看电脑的局域网IP ipconfig # 输出示例 # 无线局域网适配器 WLAN: # IPv4 地址 . . . . . . . . . . . . : 192.168.31.181 # 这就是手机需要访问的地址第二步修改配置文件// 修改前只能在电脑本机访问 serverBaseUrl: http://localhost:8080, // 修改后手机和电脑都能访问 serverBaseUrl: http://192.168.31.181:8080,三完整的可配置方案文件1config.js配置文件// 服务器配置文件 // 修改这里的IP地址让手机和电脑都能访问 const config { // 服务器基础URL核心配置只需修改这里 // ⭐ 电脑本机测试用 localhost 或 127.0.0.1 // ⭐ 手机访问测试用电脑的局域网IP运行 ipconfig 查看 serverBaseUrl: http://192.168.31.181:8080, // ← 修改这里的IP // API端点一般不需要修改 endpoints: { health: /health, message: /api/message }, // 请求配置一般不需要修改 requestConfig: { timeout: 5000, headers: { Content-Type: application/json } }, // 开发模式 development: true }; // 浏览器不支持ES6模块导出直接挂载到window window.APP_CONFIG config; console.log(✅ 当前服务器地址:, config.serverBaseUrl);文件2index.html前端测试页面!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleRESTful通信测试/title style body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; } button { padding: 10px 20px; font-size: 16px; margin: 10px; } .status { margin: 10px 0; padding: 10px; border: 1px solid #ddd; } /style /head body h1 RESTful通信测试/h1 button idsendMessageBtn发送消息给后端/button button idcheckHealthBtn检查后端状态/button div classstatus div前端状态: span idfrontendStatus等待发送/span/div div后端响应: span idbackendResponse暂无/span/div /div script typemodule // 导入配置文件 import config from ./config.js; // 获取DOM元素 const sendMessageBtn document.getElementById(sendMessageBtn); const checkHealthBtn document.getElementById(checkHealthBtn); const frontendStatus document.getElementById(frontendStatus); const backendResponse document.getElementById(backendResponse); // 显示当前配置 console.log( 使用服务器配置:, config.serverBaseUrl); // 发送消息给后端 async function sendMessage() { console.log( 前端准备发送消息...); frontendStatus.textContent 发送中...; // 使用配置中的服务器地址 const url ${config.serverBaseUrl}/api/message; const method POST; const body JSON.stringify({ message: 前端说我已发送 }); console.log( 请求详情:, { url: url, method: method, body: body, timestamp: new Date().toISOString() }); try { const response await fetch(url, { method: method, headers: config.requestConfig.headers, body: body }); console.log( 响应状态:, response.status, response.statusText); const data await response.json(); console.log(✅ 前端发送成功收到回复:, data.reply); frontendStatus.textContent 发送成功; backendResponse.textContent data.reply; } catch (error) { console.error(❌ 前端发送失败, error); frontendStatus.textContent 发送失败; backendResponse.textContent error.message; } } // 检查后端状态 async function checkHealth() { console.log( 前端检查后端状态...); frontendStatus.textContent 检查中...; // 使用配置中的服务器地址 const url ${config.serverBaseUrl}/health; const method GET; const body null; console.log( 请求详情:, { url: url, method: method, body: body, timestamp: new Date().toISOString() }); try { const response await fetch(url, { method: method, headers: config.requestConfig.headers }); console.log( 响应状态:, response.status, response.statusText); const data await response.json(); console.log(✅ 前端后端状态正常); frontendStatus.textContent 检查完成; backendResponse.textContent 后端状态: data.status; } catch (error) { console.error(❌ 前端后端无响应, error); frontendStatus.textContent 检查失败; backendResponse.textContent 后端无响应; } } // 绑定事件监听器 sendMessageBtn.addEventListener(click, sendMessage); checkHealthBtn.addEventListener(click, checkHealth); /script /body /html四部署测试步骤第1步启动C后端服务器使用cpp-httpLib的测试服务器具体参考上一篇RestfulApi01篇第2步配置前端修改config.js中的IP地址// 获取电脑的局域网IP // Windows: ipconfig // 找到 无线局域网适配器 WLAN 下的 IPv4 地址 serverBaseUrl: http://192.168.31.181:8080, // 替换为你的实际IP第3步启动Python HTTP服务器# 在项目目录下运行 python -m http.server 80 --bind 0.0.0.0第4步访问测试电脑测试浏览器访问http://127.0.0.1应该能看到测试界面点击按钮测试API手机测试确保手机连接同一个WiFi手机浏览器访问http://192.168.31.181:3000用你的电脑IP应该能看到同样的测试界面点击按钮测试API手机界面五常见问题解决问题1手机访问显示无法连接到服务器解决方法# 1. 检查电脑防火墙 netsh advfirewall firewall add rule nameAPI Test dirin actionallow protocolTCP localport8000 netsh advfirewall firewall add rule nameWeb Server dirin actionallow protocolTCP localport80 # 2. 检查C后端绑定地址 # 确保绑定的是 0.0.0.0 而不是 127.0.0.1问题2IP地址频繁变化解决方法设置静态IP推荐# Windows设置静态IP netsh interface ip set address nameWi-Fi static 192.168.31.181 255.255.255.0 192.168.31.1路由器绑定IP登录路由器管理界面通常是http://192.168.31.1找到DHCP静态分配/地址保留绑定电脑MAC地址到固定IP问题3配置修改不生效解决方法清理浏览器缓存使用隐私模式访问重启Python服务器六验证测试成功标志电脑端✅ 页面正常加载✅ 按钮可点击✅ API请求成功✅ 控制台有详细日志手机端✅ 页面正常加载适配移动端✅ 触摸按钮响应正常✅ API请求成功✅ 与电脑显示相同结果验证命令# 验证后端是否可达 curl http://192.168.31.181:8080/health # 应该返回{status:running} # 验证前端是否可达 curl http://192.168.31.181:80 # 应该返回HTML页面 # 验证手机网络在手机上执行 ping 192.168.31.181七总结通过这个方案我们实现了配置分离通过config.js灵活配置服务器地址跨设备访问手机和电脑都能测试同一个API简单部署只需修改一个配置项详细反馈清晰的界面和日志核心要点手机访问需要电脑的局域网IP不是localhost电脑和手机必须在同一个WiFi网络防火墙需要允许相关端口配置一次多端通用现在你可以轻松地在手机和电脑上测试API了这在移动开发和跨设备测试中非常实用。下一篇待定