前面一篇咱们为了适配移动端套餐在Avalonia下简单玩耍了一下WebSocket,今天再次换另一种方式再来实现一下;
1、前端通过Get的方式获取数据:const fetchData = async () => { try { const response = await fetch('http://172.17.87.136:8989/XX/Control/GetAllScreen'); if (!response.ok) { throw new Error('Network response was not ok'); } // 使用 response.json() 方法来解析 JSON 数据 const data = await response.json(); return data.devices; } catch (error) { console.error('Fetch error:', error); return []; }};2、根据数据绘制界面和监听事件:
const loadPanels = async () => { //通过HTTP的方式获取数据 const devices = await fetchData(); const panelContainer = document.getElementById('panelContainer'); devices.forEach(device => { const panel = createPanel(device); panelContainer.appendChild(panel); // 为每个面板添加点击事件监听器 panel.addEventListener('click', function(event) { if (event.target.closest('.panel-header')) { this.classList.toggle('expanded'); document.querySelectorAll('.panel') .forEach(p => { if (p !== this) { p.classList.remove('expanded'); } }); } }); });};3、关于模拟返回数据的后端服务:
var response = new HttpResponse(); if(request.Method == "GET") { string data = "{\"devices\":[{\"id\":1,\"name\":\"1楼大屏\"},{\"id\":2,\"name\":\"2楼大屏\"},{\"id\":3,\"name\":\"3楼大屏\"}]}"; response.SetBody(data); SendResponseAsync(response); }4、结果前端出现:
5、最后只能这么玩了: //为了能让跨域访问 response.SetHeader("Access-Control-Allow-Origin", "*"); response.SetHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS"); response.SetHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");最终简单的效果先这样吧
;以后有时间的话,可以再去摸索一下更复杂的效果
;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持! 