Sonic云真机平台前端对接指南：Vue/React项目集成最佳实践

Sonic云真机平台前端对接指南Vue/React项目集成最佳实践【免费下载链接】sonic-serverBack end of Sonic cloud real machine platform. Sonic云真机平台后端服务。项目地址: https://gitcode.com/gh_mirrors/so/sonic-serverSonic云真机平台是一个功能强大的移动设备远程控制调试与自动化测试平台后端服务。本文将为您详细介绍如何在Vue.js或React.js项目中快速集成Sonic云真机平台API实现设备管理、测试执行等核心功能。为什么选择Sonic云真机平台Sonic云真机平台为开发者提供了完整的移动设备云端管理解决方案支持Android和iOS设备的远程控制、自动化测试、设备状态监控等功能。通过RESTful API接口前端应用可以轻松接入平台能力构建强大的设备管理和测试工具。前端对接准备工作1. 环境配置要求在开始前端对接之前请确保您已经完成以下准备工作Sonic后端服务部署按照官方文档完成Sonic云真机平台后端服务的部署API网关地址获取Sonic网关服务的访问地址默认端口通常为3000认证信息准备好管理员账号或普通用户账号用于API调用2. 项目技术栈选择Sonic云真机平台后端基于Spring Boot 3.0.3构建提供标准的RESTful API接口支持以下前端技术栈Vue.js 2.x/3.x AxiosReact.js 16.8 Fetch/AxiosTypeScript/JavaScript均可移动端框架Uni-app、Taro等跨端框架API接口结构详解核心API模块Sonic云真机平台提供了丰富的API接口主要分为以下几个模块设备管理API-sonic-server-controller/src/main/java/org/cloud/sonic/controller/controller/DevicesController.java用户认证API-sonic-server-controller/src/main/java/org/cloud/sonic/controller/controller/UsersController.java测试用例管理API-sonic-server-controller/src/main/java/org/cloud/sonic/controller/controller/TestCasesController.java测试套件管理API-sonic-server-controller/src/main/java/org/cloud/sonic/controller/controller/TestSuitesController.java项目管理API-sonic-server-controller/src/main/java/org/cloud/sonic/controller/controller/ProjectsController.java统一响应格式所有API接口都遵循统一的响应格式定义在sonic-server-common/src/main/java/org/cloud/sonic/common/http/RespModel.java{ code: 2000, message: 操作成功, data: {} // 响应数据 }快速开始Vue.js项目集成示例步骤1安装依赖并配置基础服务// 安装axios npm install axios // 创建api服务文件 // src/services/sonicApi.js import axios from axios const sonicApi axios.create({ baseURL: http://your-sonic-gateway:3000, timeout: 10000, headers: { Content-Type: application/json } }) // 请求拦截器添加认证token sonicApi.interceptors.request.use(config { const token localStorage.getItem(sonic_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一处理错误 sonicApi.interceptors.response.use( response { const { code, message, data } response.data if (code 2000) { return data } else { return Promise.reject(new Error(message)) } }, error { return Promise.reject(error) } ) export default sonicApi步骤2用户登录认证实现// src/services/authService.js import sonicApi from ./sonicApi export const authService { // 用户登录 async login(username, password) { try { const response await sonicApi.post(/users/login, { userName: username, password: password }) // 保存token到本地存储 if (response.token) { localStorage.setItem(sonic_token, response.token) localStorage.setItem(sonic_user, JSON.stringify(response.userInfo)) } return response } catch (error) { console.error(登录失败:, error) throw error } }, // 用户注册 async register(userData) { return await sonicApi.post(/users/register, userData) }, // 获取用户信息 async getUserInfo() { return await sonicApi.get(/users) }, // 退出登录 logout() { localStorage.removeItem(sonic_token) localStorage.removeItem(sonic_user) } }步骤3设备管理功能实现// src/services/deviceService.js import sonicApi from ./sonicApi export const deviceService { // 获取设备列表 async getDeviceList(params {}) { return await sonicApi.get(/devices/list, { params }) }, // 获取设备详情 async getDeviceDetail(deviceId) { return await sonicApi.get(/devices/${deviceId}) }, // 占用设备 async occupyDevice(deviceId, params) { return await sonicApi.post(/devices/occupy, { udId: deviceId, ...params }) }, // 释放设备 async releaseDevice(deviceId) { return await sonicApi.get(/devices/release, { params: { udId: deviceId } }) }, // 获取设备筛选选项 async getDeviceFilterOptions() { return await sonicApi.get(/devices/getFilterOption) } }步骤4测试用例管理// src/services/testCaseService.js import sonicApi from ./sonicApi export const testCaseService { // 获取测试用例列表 async getTestCaseList(projectId, params {}) { return await sonicApi.get(/testCases/list, { params: { projectId, ...params } }) }, // 创建测试用例 async createTestCase(testCaseData) { return await sonicApi.put(/testCases, testCaseData) }, // 更新测试用例 async updateTestCase(testCaseId, testCaseData) { return await sonicApi.put(/testCases, { id: testCaseId, ...testCaseData }) }, // 删除测试用例 async deleteTestCase(testCaseId) { return await sonicApi.delete(/testCases, { params: { id: testCaseId } }) }, // 复制测试用例 async copyTestCase(testCaseId) { return await sonicApi.get(/testCases/copy, { params: { id: testCaseId } }) } }React.js项目集成示例创建自定义Hook// src/hooks/useSonicApi.js import { useState, useCallback } from react import axios from axios const useSonicApi () { const [loading, setLoading] useState(false) const [error, setError] useState(null) const sonicApi axios.create({ baseURL: process.env.REACT_APP_SONIC_API_URL || http://localhost:3000, timeout: 10000 }) // 添加请求拦截器 sonicApi.interceptors.request.use(config { const token localStorage.getItem(sonic_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 添加响应拦截器 sonicApi.interceptors.response.use( response { const { code, message, data } response.data if (code 2000) { return data } else { return Promise.reject(new Error(message)) } }, error { return Promise.reject(error) } ) const request useCallback(async (method, url, data null, params null) { setLoading(true) setError(null) try { const response await sonicApi({ method, url, data, params }) setLoading(false) return response } catch (err) { setError(err.message) setLoading(false) throw err } }, [sonicApi]) return { loading, error, get: (url, params) request(GET, url, null, params), post: (url, data) request(POST, url, data), put: (url, data) request(PUT, url, data), delete: (url, params) request(DELETE, url, null, params) } } export default useSonicApi设备管理组件示例// src/components/DeviceList.jsx import React, { useState, useEffect } from react import useSonicApi from ../hooks/useSonicApi const DeviceList () { const { get, loading, error } useSonicApi() const [devices, setDevices] useState([]) const [filter, setFilter] useState({ platform: , status: }) useEffect(() { fetchDevices() }, [filter]) const fetchDevices async () { try { const data await get(/devices/list, filter) setDevices(data) } catch (err) { console.error(获取设备列表失败:, err) } } const handleOccupyDevice async (deviceId) { try { await post(/devices/occupy, { udId: deviceId }) alert(设备占用成功) fetchDevices() // 刷新列表 } catch (err) { alert(设备占用失败: ${err.message}) } } if (loading) return div加载中.../div if (error) return div错误: {error}/div return ( div classNamedevice-list h2设备列表/h2 div classNamefilters select onChange{(e) setFilter({...filter, platform: e.target.value})} option value全部平台/option option value1Android/option option value2iOS/option /select select onChange{(e) setFilter({...filter, status: e.target.value})} option value全部状态/option option valueONLINE在线/option option valueOFFLINE离线/option option valueDEBUGGING调试中/option /select /div table thead tr th设备名称/th th型号/th th系统版本/th th状态/th th操作/th /tr /thead tbody {devices.map(device ( tr key{device.id} td{device.name}/td td{device.model}/td td{device.version}/td td span className{status-${device.status.toLowerCase()}} {device.status} /span /td td {device.status ONLINE ( button onClick{() handleOccupyDevice(device.udId)} 占用设备 /button )} /td /tr ))} /tbody /table /div ) } export default DeviceList最佳实践与优化建议1. 错误处理策略// 统一的错误处理中间件 export const errorHandler { handleApiError(error) { if (error.response) { // 服务器返回错误 switch (error.response.status) { case 401: // Token过期跳转到登录页 localStorage.removeItem(sonic_token) window.location.href /login break case 403: // 权限不足 alert(您没有权限执行此操作) break case 404: // 资源不存在 alert(请求的资源不存在) break case 500: // 服务器内部错误 alert(服务器内部错误请稍后重试) break default: alert(请求失败: ${error.response.data.message || 未知错误}) } } else if (error.request) { // 请求未收到响应 alert(网络连接失败请检查网络设置) } else { // 请求配置错误 alert(请求配置错误: ${error.message}) } console.error(API请求错误:, error) } }2. 性能优化建议API请求缓存对不经常变化的数据使用缓存策略分页加载设备列表、测试用例等大数据量接口使用分页防抖节流搜索功能使用防抖避免频繁请求WebSocket实时更新设备状态变化使用WebSocket实时推送3. 安全注意事项Token管理定期刷新token避免长期使用同一token输入验证所有用户输入都需要在前端和后端双重验证敏感信息保护不要在客户端存储敏感信息HTTPS强制生产环境必须使用HTTPS4. 跨域配置说明Sonic网关已经配置了CORS支持允许所有来源的跨域请求。配置位于sonic-server-gateway/src/main/java/org/cloud/sonic/gateway/config/CORSConfig.javaConfiguration public class CORSConfig { Bean public CorsWebFilter corsWebFilter() { CorsConfiguration config new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOriginPattern(*); // 允许所有来源 config.addAllowedHeader(*); // 允许所有请求头 config.addAllowedMethod(*); // 允许所有HTTP方法 // ... 其他配置 } }常见问题与解决方案Q1: 如何获取API文档A: Sonic云真机平台使用SpringDoc自动生成API文档部署后访问http://your-sonic-gateway:3000/swagger-ui.html即可查看完整的API文档。Q2: 如何处理设备状态实时更新A: 建议使用WebSocket连接sonic-server-controller/src/main/java/org/cloud/sonic/controller/config/WebSocketConfig.java中配置的WebSocket端点实时接收设备状态变化通知。Q3: 前端项目如何部署A: 前端项目可以独立部署通过环境变量配置API网关地址。也可以将构建后的静态文件放入Nginx等Web服务器中。Q4: 如何处理大文件上传A: 文件上传相关API位于sonic-server-folder模块前端需要使用multipart/form-data格式上传文件注意设置合适的超时时间。总结通过本文的指南您应该已经掌握了如何在Vue.js或React.js项目中集成Sonic云真机平台API。Sonic提供了完整、规范的RESTful API接口配合统一的数据响应格式使得前端对接变得简单高效。记住以下关键点统一认证所有API请求都需要携带有效的JWT Token错误处理遵循统一的错误响应格式进行异常处理数据分页大数据量列表接口务必使用分页实时通信设备状态变化考虑使用WebSocket实现实时更新现在您可以开始构建基于Sonic云真机平台的强大前端应用了如果您在对接过程中遇到任何问题可以参考项目源码中的Controller实现或查看自动生成的API文档。下一步建议深入研究sonic-server-controller/src/main/java/org/cloud/sonic/controller/models/dto/目录下的DTO模型查看sonic-server-controller/src/main/java/org/cloud/sonic/controller/controller/目录中的具体Controller实现探索WebSocket实时通信功能提升用户体验祝您对接顺利开发愉快【免费下载链接】sonic-serverBack end of Sonic cloud real machine platform. Sonic云真机平台后端服务。项目地址: https://gitcode.com/gh_mirrors/so/sonic-server创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考