SignalR实战：在.NET Framework和.NET Core中如何使用SignalR？

陈久

官网文档：https://learn.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-6.0&tabs=visual-studio
SignalR开源代码：https://github.com/signalr

很多小伙伴问：在前后端分离项目中，后端是.NET Core前端是Vue如何使用SignalR？在前后端不分离项目中，.NET Framework MVC项目中又如何使用SignalR技术呢？那就来看看下面这篇文章吧！本文主要介绍SignalR在实际项目中的应用，以及.NET Framework和.NET Core中如何去使用SignalR。

一、SignalR介绍

1.1-SignalR介绍

ASP.NET Core SignalR是一个开放源代码库，可用于简化向应用添加实时Web功能，实时Web功能使服务器端代码能够将内容推送到客户端。

1.2-SignalR的应用

• 需要从服务器进行高频更新的应用：包括游戏、社交网络、投票、拍卖、地图和GPS引用。
  
• 仪表盘和监视应用：包括公司仪表板、即时销售更新或旅行报警
  
• 协作应用：包括白板应用和团队会议软件。
  
• 通知应用：社交网络、电子邮件、聊天、游戏、旅行报警和其他应用都需要使用的通知。
  

二、.NET Framework使用SignalR

参考文献：
Owin介绍：https://www.cnblogs.com/Pinapple/p/6721361.html
Owin相关案例：https://blog.csdn.net/bifan546/article/details/77098896/

2.1-服务端（.NET Framework MVC）

（1）选择要使用Signalr的项目，点击【管理NuGet程序包】。

（2）搜索【SignalR】包，找到这个后然后点击下载。

会自动安装四个，注意他们之间有依赖关系：

（3）.NET Framework平台需要添加Owin相关的包。
OWIN 是一种定义 Web 服务器和应用程序组件之间的交互的规范 。这一规范的目的是发展一个广阔且充满活力的、基于 Microsoft .NET Framework 的 Web 服务器和应用程序组件生态系统。

Microsoft.Owin.Hosting
Microsoft.Owin.Cors
Microsoft.Owin.Host.HttpListener

（4）在Web项目（要使用的Signal）中创建一个【Startup.cs】文件。

1. using JiCai.Admin.Hubs;
2. using Microsoft.Owin;
3. using Owin;
5. [assembly: OwinStartup(typeof(JiCai.Admin.Startup))]
6. namespace JiCai.Admin
7. {
8.     public class Startup
9.     {
10.         /// <summary>
11.         /// 应用程序配置
12.         /// </summary>
13.         /// <param name="app"></param>
14.         public void Configuration(IAppBuilder app)
15.         {
16.             //启用SignalR
17.             app.MapSignalR();
18.             //绑定多个Hub
19.             app.MapSignalR<DemoHub>("/demoHub");
20.         }
21.     }
22. }

复制代码

例如：

（5）可以创建一个【Hubs】文件夹，专门放置Hub相关文件。[西瓜程序猿]这边是创建一个Hub文件，名为【DemoHub.cs】。

1. using Fenqibao.DTO;
2. using JiCai.Admin.Hubs.ConectionOperate;
3. using JiCai.Admin.Hubs.Models;
4. using log4net;
5. using Microsoft.AspNet.SignalR;
6. using Microsoft.AspNet.SignalR.Json;
7. using Newtonsoft.Json;
8. using System;
9. using System.Collections.Generic;
10. using System.Linq;
11. using System.Threading.Tasks;
13. namespace JiCai.Admin.Hubs
14. {
15.     /// <summary>
16.     /// 报表管理-总表Hub
17.     /// </summary>
18.     public class SummaryTableHub :  PersistentConnection
19.     {
20.         public readonly BaseService _base = new BaseService();
21.         private readonly ILog logger = LogManager.GetLogger(typeof(SummaryTableHub));
22.         private ConnectionManagement summaryTableCon = new ConnectionManagement();
23.         public CookieUserData LoginUserData
24.         {
25.             get
26.             {
27.                 IOperator oper = ContainerManager.Resolve<IOperator>();
28.                 LoginUser loginUser = oper as LoginUser;
29.                 if (loginUser != null && loginUser.UserData != null)
30.                 {
31.                     return loginUser.UserData;
32.                 }
33.                 return null;
34.             }
35.         }
37.         /// <summary>
38.         /// 连接成功后调用
39.         /// </summary>
40.         /// <param name="request"></param>
41.         /// <param name="connectionId"></param>
42.         /// <returns></returns>
43.         protected override Task OnConnected(IRequest request, string connectionId)
44.         {
45.             //获得SignalR的连接id
46.             var connid = connectionId;
47.             //获得用户id
48.             var userid = LoginUserData.Id.ToString();
49.             Console.Write($"【{connid}】：已建立连接！");
51.             //判断一下用户是不是已经链接了
52.             var checkUserConn = summaryTableCon.IsConn(connid, userid);
53.             if (!checkUserConn)
54.             {
55.                 //添加一个新的连接
56.                 summaryTableCon.AddConnInfo(new SignalRConn()
57.                 {
58.                     UserId = userid,
59.                     ConnectionId = connid
60.                 });
61.             }
62.             //更新连接
63.             else
64.             {
65.                 summaryTableCon.UpdateConnInfo(userid, connid);
66.             }
68.             return Connection.Send(connectionId, $"【用户：{connectionId}】真正连接成功！");
69.             //return base.OnConnected(request, connectionId);
70.         }
72.         /// <summary>
73.         /// 接收到请求的时候调用
74.         /// </summary>
75.         /// <param name="request"></param>
76.         /// <param name="connectionId"></param>
77.         /// <param name="data"></param>
78.         /// <returns></returns>
79.         protected override async Task OnReceived(IRequest request, string connectionId, string data)
80.         {
81.             //获得用户id
82.             var userid = LoginUserData.Id.ToString();
83.             await Task.Factory.StartNew(async () =>
84.             {
85.                 while (true)
86.                 {
87.                                         var list = GetSummaryTableList(userid);
88.                     string json_jieshou_mes = "";
89.                     if (list != null && list.Count > 0)
90.                     {
91.                                                 json_jieshou_mes = JsonConvert.SerializeObject(list);
92.                     }
95.                     await Connection.Send(connectionId, json_jieshou_mes);
97.                     //每5秒同步一次
98.                     await Task.Delay(5000);
99.                 }
100.             }, TaskCreationOptions.LongRunning);
102.             //return base.OnReceived(request, connectionId, data);
103.         }
105.         /// <summary>
106.         /// 连接中断的时候调用
107.         /// </summary>
108.         /// <param name="request"></param>
109.         /// <param name="connectionId"></param>
110.         /// <param name="stopCalled"></param>
111.         /// <returns></returns>
112.         protected override Task OnDisconnected(IRequest request, string connectionId, bool stopCalled)
113.         {
114.             Console.Write($"【{connectionId}】：已断开连接！");
115.             //获得SignalR的连接id
116.             var connid = connectionId;
117.             //关闭连接
118.             summaryTableCon.DelConnInfo(connid);
119.             return base.OnDisconnected(request, connectionId, stopCalled);
120.         }
122.         /// <summary>
123.         /// 连接超时重新连接的时候调用
124.         /// </summary>
125.         /// <param name="request"></param>
126.         /// <param name="connectionId"></param>
127.         /// <returns></returns>
128.         protected override Task OnReconnected(IRequest request, string connectionId)
129.         {
130.             return base.OnReconnected(request, connectionId);
131.         }
134.                 /// <summary>
135.                 /// 查询数据
136.                 /// </summary>
137.                 /// <param name="userId"></param>
138.                 /// <returns></returns>
139.                 private List<SummaryTableDataModel> GetSummaryTableList(string userId)
140.         {
141.             var result = _base.Query<SummaryTableDataModel>($@"
142.                             select * from demo-data
143.                                         ;
144.             ").ToList();
145.                         return result;
146.         }
147.     }
148. }

复制代码

（6）在Hubs/ConectionOperate文件夹中，[西瓜程序猿]这边创建【ConnectionManagement】文件，用来管理所有连接。

1. using System.Collections.Generic;
2. using System.Linq;
4. namespace JiCai.Admin.Hubs.ConectionOperate
5. {
6.     /// <summary>
7.     /// 连接管理
8.     /// </summary>
9.     public class ConnectionManagement
10.     {
11.         /// <summary>
12.         /// 用户连接集合
13.         /// </summary>
14.         public static  List<SignalRConn> SignalRConns { get; set; } = new List<SignalRConn>();
16.         /// <summary>
17.         /// 添加连接
18.         /// </summary>
19.         /// <param name="conn"></param>
20.         public  void AddConnInfo(SignalRConn conn)
21.         {
22.             SignalRConns.Add(conn);
23.         }
25.         /// <summary>
26.         /// 删除连接
27.         /// </summary>
28.         /// <param name="connid"></param>
29.         public  void DelConnInfo(string connid)
30.         {
31.             var signalRConns = SignalRConns.FirstOrDefault(u => u.ConnectionId == connid);
32.             if (signalRConns != null)
33.             {
34.                 SignalRConns.Remove(signalRConns);
35.             }
36.         }
38.         /// <summary>
39.         /// 更新链接（老的链接不起作用了）
40.         /// 场景：客户端重连了，userid没变，但是connid变了
41.         /// </summary>
42.         /// <param name="userId">用户id</param>
43.         /// <param name="newConnsId">新的链接id</param>
44.         public  void UpdateConnInfo(string userId, string newConnsId)
45.         {
46.             var signalRConns = SignalRConns.FirstOrDefault(u => u.UserId.ToLower() == userId.ToLower());
47.             if (signalRConns != null)
48.             {
49.                 signalRConns.ConnectionId = newConnsId;
50.             }
51.         }
53.         /// <summary>
54.         /// 判断用户是否已经链接
55.         /// </summary>
56.         /// <param name="connid">连接id</param>
57.         /// <param name="userid">用户id</param>
58.         /// <returns></returns>
59.         public bool IsConn(string connid,string userid)
60.         {
61.             var userConn = SignalRConns.FirstOrDefault(u => u.ConnectionId.ToLower() == connid.ToLower() && u.UserId.ToLower() == userid.ToLower());
62.             return userConn == null ? false : true;
63.         }
64.     }
65. }

复制代码

（7）在Hubs/ConectionOperate文件夹中，创建【SignalRConn.cs】文件用来作为SignalR和系统用户的连接实体。

1. namespace JiCai.Admin.Hubs.ConectionOperate
2. {
3.     /// <summary>
4.     /// 连接
5.     /// </summary>
6.     public class SignalRConn
7.     {
8.         /// <summary>
9.         /// 系统用户id
10.         /// </summary>
11.         public string UserId { get; set; }
13.         /// <summary>
14.         /// SignleR链接Id（每次链接SignalR都会分配一个id）
15.         /// </summary>
16.         public string ConnectionId { get; set; }
17.     }
18. }

复制代码

2.2-客户端（JS）

（1）下载相关jq/signalr相关包，分别是【jquery.signalR-2.4.3.js】和【jquery-1.6.4.min.js】。可以访问下载（如果失效了，请联系我[西瓜程序猿]）。

下载地址（编码：yRLCRp81）：https://yongteng.lanzoub.com/iXDlu1631ugd
密码：44x5

文件截图：

（2）创建一个js文件【data_list_table_hub.js】，用来连接signalR。

1. // 连接服务
2. var connection = $.connection("/summary_table_hub");
4. // 建立链接
5. connection.start(function () {
6.     //连接成功
7.     console.log("西瓜程序猿-【" + new Date().toLocaleString() +"】连接成功！");
8.     //发送消息
9.     connection.send("给我数据吧");
10. });
12. // 连接断开
13. connection.disconnected(function () {
14.     console.log("西瓜程序猿-【" + new Date().toLocaleString() +"】连接断开！");
15. });
17. // 接收服务器发来的消息
18. connection.received(function (data) {
19.     console.log("西瓜程序猿-【" + new Date().toLocaleString() +"】接收服务器发来的消息：");
20.     console.log(data);
21.     //显示数据
22.     if (data != "" && checkJson(data)) {
23.         var obj = JSON.parse(data);
24.         var html_box = "";
25.         for (var i = 0; i < obj.length; i++) {
26.             html_box += `<tr>
27.             <td>`+obj[i].project_name+`</td>
28.             <td>`+ obj[i].zuori_sum+`</td>
29.             <td>`+ obj[i].jinri_sum+`</td>
30.             <td>`+ obj[i].qunian_sum+`</td>
31.             <td>`+ obj[i].jinnian_sum+`</td>
32.             <td>`+ obj[i].sum+`</td>
33.             <td>`+ obj[i].yikaipiao_sum+`</td>
34.             <td>`+ obj[i].weikaipiao_sum +`</td>
35.             <td>`+ obj[i].yishoupiao_sum +`</td>
36.             <td>`+ obj[i].weishoupiao_sum +`</td>
37.             <td>`+ obj[i].kehu_yinghuikuan_sum+`</td>
38.             <td>`+ obj[i].kehu_yihuikuan_sum+`</td>
39.             <td>`+ obj[i].kehu_weihuikuan_sum +`</td>
40.             <td>`+ obj[i].fuwu_yingfukuan_sum+`</td>
41.             <td>`+ obj[i].fuwu_yifukuan_sum+`</td>
42.             <td>`+ obj[i].fuwu_weifukuan_sum+`</td>
43.             </tr>`
44.         }
45.         $("#last_async_date").text(new Date().toLocaleString());
46.         $("#table_body").html(html_box);
47.     }
48. });
50. //判断是不是json字符串
51. function checkJson(str) {
52.     if (typeof str == 'string') {
53.         try {
54.             var obj = JSON.parse(str);
55.             // 等于这个条件说明就是JSON字符串 会返回true
56.             if (typeof obj == 'object' && obj) {
57.                 return true;
58.             } else {
59.                 //不是就返回false
60.                 return false;
61.             }
62.         } catch (e) {
63.             return false;
64.         }
65.     }
66.     return false;
67. }

复制代码

（3）创建要展示的文件，我这边是用MVC模式，所有前台文件是cshtml。

1. @{
2.     ViewBag.Title = "西瓜程序猿-明细表";
3. }
5. @section styles{
6.    
7. }
9. @section scripts{
10.    
11.    
12.    
13. }
16.    
17.    
18.    
19.         
20.             报表最新同步时间：
21.         
22.         
23.             <table >
24.                 <colgroup>
25.                     <col>
26.                     <col>
27.                     <col>
28.                     <col>
29.                     <col>
30.                     <col>
31.                     <col>
32.                     <col>
33.                     <col>
34.                     <col>
35.                     <col>
36.                     <col>
37.                     <col>
38.                 </colgroup>
39.                 <thead>
40.                     <tr>
41.                         <th colspan="2" >项目信息</th>
42.                         <th colspan="5" >销售情况</th>
43.                         <th colspan="6" >款项情况</th>
44.                     </tr>
45.                     <tr>
46.                         <th >项目名称</th>
47.                         <th >服务商名称</th>
48.                         <th >昨天订单总额</th>
49.                         <th >今天订单总额</th>
50.                         <th >去年订单总额</th>
51.                         <th >今年订单总额</th>
52.                         <th >订单总额</th>
54.                         <th >客户应回款总额</th>
55.                         <th >客户已回款总额</th>
56.                         <th >客户未回款总额</th>
57.                         <th >服务商应付款总额</th>
58.                         <th >服务商已付款总额</th>
59.                         <th >服务商未付款总额</th>
60.                     </tr>
61.                 </thead>
62.                 <tbody id="table_body">
63.                 </tbody>
64.             </table>
65.         
66.    

复制代码

（4）效果展示：

三、.NET Core WebAPI使用SignalR

场景：项目中需要服务端主动向客户端发送通知消息，后端是使用.NETCore实现的，前端是使用Vue3全家桶项目，前后端分离模式。本次主要讲使用SignalR如何来实现的。

3.1-服务端（.NET Core WebAPI）

1、右击项目，点击【管理NuGet程序包】安装SignalR。

2、搜索【SignalR】，点击【安装】。

3、如果是.NET6以前的版本，在【Startup.cs】中配置：

如果是.NET6以后得版本，在【Program.cs】配置：

1. var builder = WebApplication.CreateBuilder(args);
2. //添加SignalR服务
3. builder.Services.AddSignalR();
6. app.UseEndpoints(endpoints =>
7. {
8.     endpoints.MapControllerRoute(
9.         name: "default",
10.         pattern: "{controller=Home}/{action=Index}/{id?}"
11.     );
13.     //添加SignalR端点
14.     endpoints.MapHub<ServerMonitorHub>("/serverMonitorHub");
15. });

复制代码

4、创建SignalR中心

中心是一个类，用于处理客户端服务器通信的高级管道。在SignalR_Demo项目文件夹中，创建Hubs文件夹。在Hubs文件夹中，使用已下代码创建ChatHub类。

1.     public class ChatHub:Hub
2.     {
3.         /// <summary>
4.         /// 发送消息
5.         /// </summary>
6.         /// <param name="user">用户名</param>
7.         /// <param name="message">发送信息</param>
8.         /// <returns></returns>
9.         public async Task SendMessage(string user,string message)
10.         {
11.             await Clients.All.SendAsync("ReceiveMessage", user, message);
12.         }
13.     }

复制代码

3.2-客户端（Vue3+Vite+TS）

（1）安装SugbalR

1. npm install @latelier/vue-signalr

复制代码

版本截图：

（2）然后新建一个文件，用来封装业务逻辑相关代码。[西瓜程序猿]是在【src/utils】目录下，创建了一个名为【signalr.ts】的文件，也可以是js文件，根据自己项目的需要去新建。

代码：

1. import * as signalR  from '@microsoft/signalr';
3. //如果需要身份验证
4. //.withUrl('/messageHub', {accessTokenFactory: () => sessionStorage.getItem('token')})
5. let connection;
7. // 建立连接
8. async function start(url) {
9.   try {
10.     connection = new signalR.HubConnectionBuilder()
11.       .withUrl(url)//跨域需要使用绝对地址
12.       .configureLogging(signalR.LogLevel.Information)
13.       .withAutomaticReconnect() // 设置自动重连机制
14.       .build();
15.   } catch(err) {
16.     console.log(err);
17.     setTimeout(start, 10000);//错误重连
18.   }
19. }
21. // 开始signalr连接
22. const connect = async (url) => {
23.   await start(url);
24.   console.log(`【西瓜程序猿-${new Date().toLocaleString()}：SignalR已连接成功!`);
25. };
27. // 调用服务端方法
28. async function send(methodName, param){
29.   try {
30.     await connection.invoke(methodName, param);
31.   } catch (err) {
32.     console.error(err);
33.   }
34. }
36. //断开连接
37. const disconnect = async ()=>{
38.   await connection.stop();
39.   console.log(`【西瓜程序猿-${new Date().toLocaleString()}：SignalR已断开连接!`);
40. };
42. export {
43.   connection,
44.   connect,
45.   send,
46.   disconnect
47. };

复制代码

（3）然后再页面进行使用。[西瓜程序猿]这里以Echarts图表展示为例子，首先先安装Echarts包。

npm install echarts --save

版本截图：

（4）然后再页面写入如下代码，具体页面样式根据需要进行修改调整哦。

1. <template>
2.   
3.   <breadcrumb  />
4.   
6.     <el-row>
8.       <el-col :span="24" >
9.         <el-card>
10.           <template #header>
11.             <i ></i> 服务器信息
12.           </template>
13.          
14.             <table cellspacing="0" >
15.               <tbody>
16.                 <tr>
17.                   <td >主机名称</td>
18.                   <td >{{serverInfo.HostName}}</td>
19.                   <td >系统名称</td>
20.                   <td >{{serverInfo.OSDescription}}</td>
21.                 </tr>
22.                 <tr>
23.                   <td >IP地址</td>
24.                   <td >{{serverInfo.IpAddress}}</td>
25.                   <td >操作系统</td>
26.                   <td >{{serverInfo.OperatingSystem}} {{serverInfo.OsArchitecture}}</td>
27.                 </tr>
28.               </tbody>
29.             </table>
30.          
31.         </el-card>
32.       </el-col>
35.       <el-col :span="24" >
36.         <el-card>
37.           <template #header>
38.             <i ></i> 应用信息
39.           </template>
40.          
41.             <table cellspacing="0" >
42.               <tbody>
43.                 <tr>
44.                   <td >.NET Core版本</td>
45.                   <td >{{serverInfo.FrameworkDescription}}</td>
46.                   <td >内存占用</td>
47.                   <td >{{serverInfo.MemoryFootprint}}</td>
48.                 </tr>
49.                 <tr>
50.                   <td >环境变量</td>
51.                   <td >{{serverInfo.EnvironmentName}}</td>
52.                   <td >项目路径</td>
53.                   <td >{{serverInfo.ContentRootPath}}</td>
54.                 </tr>
55.               </tbody>
56.             </table>
57.          
58.         </el-card>
59.       </el-col>
61.       <el-col :span="24" >
62.         <el-card>
63.           <template #header>
64.             <i ></i> 磁盘状态
65.           </template>
66.          
67.             <table cellspacing="0"  >
68.               <thead>
69.                 <tr>
70.                   <th >磁盘名称</th>
71.                   <th >盘符路径</th>
72.                   <th >文件系统</th>
73.                   <th >盘符类型</th>
74.                   <th >总大小</th>
75.                   <th >已用大小</th>
76.                   <th >可用大小</th>
77.                   <th >已使用率</th>
78.                 </tr>
79.               </thead>
80.               <tbody v-if="diskInfos" >
81.                 <tr v-for="(sysFile, index) in diskInfos" :key="index">
82.                   <td >{{ sysFile.DiskName }}</td>
83.                   <td >{{ sysFile.RootPath }}</td>
84.                   <td >{{ sysFile.DriveType }}</td>
85.                   <td >{{ sysFile.FileSystem }}</td>
86.                   <td >{{ sysFile.TotalSize }}</td>
87.                   <td >{{ sysFile.UseSize }}</td>
88.                   <td >{{ sysFile.ResidueSize }}</td>
89.                   <td ><el-progress :percentage="sysFile.UseRate" :text-inside="true" :stroke-width="14" :color="customColor"/></td>
90.                 </tr>
91.               </tbody>
92.             </table>
93.          
94.         </el-card>
95.       </el-col>
100.       <el-col :span="24" >
101.         <el-card >
102.           <template #header>
103.             <i ></i> 状态
104.           </template>
105.          
106.             <el-row>
107.               <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"  >
108.                 CPU使用率
109.                
110.                   <el-progress type="dashboard" :percentage="cpuInfo.CPULoadVal" :color="customColor" />
111.                
112.          
113.                 {{ cpuInfo.ProcessorCount }} 核心
114.               </el-col>
116.               
117.               <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"  >
118.                 内存使用率
119.                
120.                   <el-progress type="dashboard" :percentage="memoryInfo.UsedPercentage" :color="customColor" />
121.                
122.                 {{ memoryInfo.UsedPhysicalMemory }} / {{ memoryInfo.TotalPhysicalMemory }}
123.               </el-col>
126.               <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"  >
127.                 网络监控上传
128.                
129.                   <el-progress type="dashboard" :percentage="networkInfo.SentSize" :color="customColor" >
130.                     <template #default>
131.                       {{networkInfo.SentSize}} {{ networkInfo.SentSizeType }}
132.                     </template>
133.                   </el-progress>
134.                
135.                  {{networkInfo.SentSize}} {{ networkInfo.SentSizeType }}/S
136.               </el-col>
139.               <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"  >
140.                 网络监控下载
141.                
142.                   <el-progress type="dashboard" :percentage="networkInfo.ReceivedSize" :color="customColor" >
143.                     <template #default>
144.                       {{networkInfo.ReceivedSize}} {{ networkInfo.ReceivedSizeType }}
145.                     </template>
146.                   </el-progress>
147.                
148.                  {{networkInfo.ReceivedSize}} {{ networkInfo.ReceivedSizeType }}/S
149.               </el-col>
150.             </el-row>
151.          
152.         </el-card>
153.       </el-col>
158.       <el-col :span="24" >
159.         <el-row :gutter="25">
160.             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" >
161.               <el-card >
162.                 <template #header>
163.                   <i ></i> CPU使用率监控
164.                 </template>
165.                
166.                   
167.                
168.               </el-card>
169.             </el-col>
170.             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" >
171.               <el-card >
172.                 <template #header>
173.                   <i ></i> 内存使用率监控
174.                 </template>
175.                
176.                   
177.                
178.               </el-card>
179.             </el-col>
180.           </el-row>
181.       </el-col>
183.     </el-row>
184.   
185. </template>

复制代码

（5）效果展示：

原文链接：https://www.cnblogs.com/kimiliucn/p/17648543.html

来源:https://www.cnblogs.com/kimiliucn/archive/2023/08/22/17648543.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！