html界面上位机开发
一、html部分开发
1.item定义
<div class="bms-detail-item"> //是外层容器，作用：包裹一行数据，用来做整行的布局、间距、边框、对齐；
<div class="bms-detail-label">最高单体电压</div> //是标签，作用：显示固定的说明文字
<div class="bms-detail-value" id="bms-volts-max">0.00 V</div> //数值id="bms-volts-max"：JS 用来找到这个位置并更新数据，内容0.00 V：默认显示值，会被 JS 动态替换
2.浏览器界面强制刷新
如果界面没有立即更新，请在浏览器中按Ctrl + F5强制刷新，或清除浏览器缓存后重新加载页面。
3.html调试
动态加载的html文件
因为serial-tab.html是通过fetch 动态加载的，浏览器开发者工具中可能不直接显示。有以下解决方法：
遇到debugger会停下来
3.html基本元素认识
3.1标题
<h1>我是最大标题</h1>
<h3>我是中等标题</h3>
<h6>我是最小标题</h6>
3.2段落
写一段文字
<p>我是一段普通文字</p>
3.3盒子
装内容、排版、布局，最重要
<div>我是一个盒子，什么都能装</div>
div独占一行，分块布局，装一大块内容
3.4文字标签
<p>电池电压 <span style="color:red">3.7V</span></p>
<span>= 一小段文字的 “专用小盒子”,它不换行（和文字并排）,专门用来给某几个字改颜色、大小、加粗,它是行内元素，只包住文字，不占整行
用 span 给 3.7V 单独变色
3.5按钮
点击交互用
<button>点击刷新数据</button>
3.6输入框
<input type="text" placeholder="请输入">
<input type="password" placeholder="密码">
3.7链接
跳转到另一个页面
<a href="login.html">去登录</a>
3.8换行
第一行<br>第二行
3.9图片
<img src="logo.png" width="100">
3.10样式
给元素加颜色、大小、位置（写在 head 里）
<style> div { color: red; } </style>
4.style元素和控制div
4.1元素
4.2控制某一类div
4.3控制某一个div
二、script部分开发
1.注释
//BMS信息选项卡
2.变量定义
直接函数全面定义全局变量
3.fetch函数
前端 → 向后端发送请求 → 初始化 CAN 卡 → 拿到结果显示
fetch= 发送网络请求${API_BASE}= 后台地址前缀/init= 初始化接口?devType=${devType}&...= 把设备类型、设备序号、通道号传给后台
意思：我要初始化 CAN 卡，参数是这三个！
.then(res => res.json()) //后台收到请求，返回一串数据，这里把返回的数据转成 JS 能看懂的 JSON 格式
.then(data => { } //拿到后台返回的最终结果
三、c#部分
1.函数参数
函数未传递参数时使用默认赋值，传递参数了使用传递的值
2.可变长度二维 byte 数组
四、前后端交互
1.调用过程
后端注册了 [HttpGet("init")] init函数，调用can驱动函数InitCanCard
2.C#调试信息打印
// 毫秒时间戳 string timestamp = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff"); // 转十六进制 string hexData = BitConverter.ToString(data).Replace("-", " "); // ✅ 在 Visual Studio 输出窗口显示 System.Diagnostics.Debug.WriteLine($"[发送] {timestamp} {description}: {hexData}");可以打印调试信息
此处可以看到调试信息