代码拉取完成，页面将自动刷新
此为UI界面，内容很简单，就是访问接口获取数据，稍微处理一下，然后显示出来
如果是在有node.js的环境下使用，直接“npm run dev”
如果是编译部署到服务器上，需要依赖nginx，nginx的部署与使用网上有资料，这里不再重复
server {
listen 10000;
server_name localhost;
location / {
root E:\service\monitorUI;
index index.html;
try_files $uri /index.html;
}
location /html {
add_header Cache-Control no-store;
}
}
框架采用Vue3+Vite+TypeScript+element Plus，可以看：这篇分析
也是当前比较流行的技术
我采用pinia做状态管理，也可以理解为全局变量，方便页面数据的更新，系列文章里有分析，这里就不再介绍。
代码位于“src/service”下。首先有一个接收数据的结构体“models/source.ts”.
然后“api/source.ts”获取数据和处理数据，详情看代码，注释很详细
页面也很简单，采用el-card实现，相关资料可以看element plus官网
代码在“src/components/Card.vue“ ，它就调用数据接口更新数据，然后将数据按照形式展现出来，可以看代码解析。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。