C#SaaS大前端
.NET 集成 GoView 低代码可视化大屏完整案例详解
详细阐述了在 .NET 项目中集成 GoView 低代码可视化大屏的方案。内容包括环境搭建、静态资源部署、路由配置、API 接口对接以及进阶的身份验证与主题切换功能。同时提供了跨域、404 错误等常见问题的解决方案，旨在帮助开发者利用 .NET 后端能力结合 GoView 前端组件，快速构建企业级数据监控应用。
详细阐述了在 .NET 项目中集成 GoView 低代码可视化大屏的方案。内容包括环境搭建、静态资源部署、路由配置、API 接口对接以及进阶的身份验证与主题切换功能。同时提供了跨域、404 错误等常见问题的解决方案，旨在帮助开发者利用 .NET 后端能力结合 GoView 前端组件，快速构建企业级数据监控应用。
GoView 是一款基于 Vue3.x 构建的低代码数据可视化开发平台，它允许开发者通过简单的配置快速构建各种数据可视化大屏。
GoView 具有以下特点：
GoView 特别适合企业级数据可视化需求，如运营监控大屏、数据分析看板、指挥中心大屏等场景。
在 .NET 项目中集成 GoView 通常有两种方式：
本文将重点介绍第二种方式，实现 GoView 与 .NET 的无缝集成。
# 克隆 GoView 仓库
git clone https://gitee.com/MTrun/go-view.git
# 进入项目目录
cd go-view
# 安装依赖
npm install
# 构建生产版本
npm run build
构建完成后，会在项目目录下生成 dist 文件夹，包含所有静态资源。
dotnet new webapp -n GoViewDemo
cd GoViewDemo
将 GoView 的 dist 文件夹内容复制到 .NET 项目的 wwwroot 目录下：
wwwroot/
├─ css/
├─ js/
├─ img/
├─ favicon.ico
└─ index.html
在 Program.cs 中添加静态文件服务和重定向：
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
// 添加 GoView 路由
app.MapGet("/", () => Results.Redirect("/index.html"));
app.MapRazorPages();
app.Run();
在 .NET 中创建 API 控制器用于提供 GoView 所需数据：
// Controllers/GoViewController.cs
using Microsoft.AspNetCore.Mvc;
namespace GoViewDemo.Controllers;
[ApiController]
[Route("api/[controller]")]
public class GoViewController : ControllerBase
{
[HttpGet("chartData")]
public IActionResult GetChartData()
{
var data = new
{
categories = new[] { "周一", "周二", "周三", "周四", "周五", "周六", "周日" },
series = new[]
{
new { name = "邮件营销", data = new[] { 120, 132, 101, 134, 90, 230, 210 } },
new { name = "联盟广告", data = new[] { 220, 182, 191, 234, 290, 330, 310 } }
}
};
return Ok(data);
}
}
编辑 wwwroot/js/app.*.js 文件，修改 API 请求地址：
axios.defaults.baseURL = '/api';
dotnet run
访问 https://localhost:5001 即可看到集成的 GoView 大屏。
在 .NET 中添加 JWT 认证，并在 GoView 中配置请求拦截器：
// Program.cs
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = true,
ValidateAudience = true,
ValidateLifetime = true,
ValidateIssuerSigningKey = true,
ValidIssuer = builder.Configuration["Jwt:Issuer"],
ValidAudience = builder.Configuration["Jwt:Audience"],
IssuerSigningKey = new SymmetricSecurityKey(
Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
};
});
在 GoView 中添加请求拦截器：
// 在 main.js 或 axios 配置文件中
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
在 .NET 中创建主题 API：
[HttpGet("themes")]
public IActionResult GetThemes()
{
var themes = new[]
{
new { id = "default", name = "默认主题" },
new { id = "dark", name = "暗黑主题" },
new { id = "light", name = "明亮主题" }
};
return Ok(themes);
}
[HttpPost("setTheme/{themeId}")]
public IActionResult SetTheme(string themeId)
{
// 这里可以实现主题切换逻辑
return Ok(new { message = $"主题已切换为{themeId}" });
}
在 GoView 中添加主题切换组件并调用 API。
使用 .NET 的 MemoryCache 优化数据查询：
[HttpGet("cachedData")]
public async Task<IActionResult> GetCachedData([FromServices] IMemoryCache cache)
{
const string cacheKey = "chart_data";
if (!cache.TryGetValue(cacheKey, out var data))
{
// 模拟从数据库获取数据
data = await FetchDataFromDatabase();
// 设置缓存选项
var cacheOptions = new MemoryCacheEntryOptions().SetSlidingExpiration(TimeSpan.FromMinutes(5));
cache.Set(cacheKey, data, cacheOptions);
}
return Ok(data);
}
在开发环境中配置 CORS：
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAll", builder =>
{
builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});
});
app.UseCors("AllowAll");
启用响应压缩
builder.Services.AddResponseCompression(options =>
{
options.EnableForHttps = true;
});
app.UseResponseCompression();
通过本文的介绍，我们了解了如何在 .NET 项目中完整集成 GoView 数据可视化平台。这种集成方式既保留了 GoView 强大的可视化能力，又可以利用 .NET 的稳定性和安全性构建企业级应用。关键点包括：
这种集成方案特别适合需要将数据可视化功能嵌入到现有 .NET 应用中的场景，如企业内部管理系统、数据监控平台等。开发者可以根据实际需求进一步扩展和定制，构建更加强大和个性化的数据可视化解决方案。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online