.NET 集成 GoView 低代码可视化大屏实战指南

修改 GoView 配置

编辑 wwwroot/js/app.*.js 文件，将 Axios 的基础请求地址指向 .NET 的 API 路径。

axios.defaults.baseURL = '/api';

运行项目后访问对应端口即可看到集成的 GoView 大屏。

进阶集成方案

身份验证集成

若需保护数据，可在 .NET 中添加 JWT 认证，并在 GoView 的请求拦截器中携带 Token。

// 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);
});

动态主题切换

后端提供主题列表和切换接口，前端调用 API 更新样式配置。

[HttpGet("themes")]
public IActionResult GetThemes()
{
    var themes = new[]
    {
        new { id = "default", name = "默认主题" },
        new { id = "dark", name = "暗黑主题" },
        new { id = "light", name = "明亮主题" }
    };
    return Ok(themes);
}

数据缓存优化

利用 .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");

静态文件 404 错误

检查 UseStaticFiles 中间件是否在管道中的正确位置，并确保文件路径大小写匹配。

API 请求路径问题

确保 GoView 配置的 API 路径与 .NET 路由一致，优先使用相对路径。

性能优化

启用响应压缩以减少传输体积。

builder.Services.AddResponseCompression(options =>
{
    options.EnableForHttps = true;
});
app.UseResponseCompression();

总结

这种集成方式既保留了 GoView 强大的可视化能力，又利用了 .NET 的稳定性和安全性。关键在于正确部署静态资源、设计合理的 API 接口以及处理好认证与安全细节。该方案特别适合需要将数据可视化功能嵌入现有 .NET 应用的企业内部管理系统或监控平台。