在 .NET 项目里接入 GoView 的实战做法

如果这里静态文件中间件顺序放错了，页面大概率会 404。这个坑不算深，但排起来很烦，尤其是你以为是前端包坏了的时候。

提供后端 API

GoView 本身只是前端壳，真正的数据还是得从 .NET 出。下面这个控制器返回一组图表数据，够做一个基础示例：

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

调整前端请求地址

GoView 打包后的资源里通常会带着自己的请求配置。这里把 axios 的基础地址改成本地 API：

axios.defaults.baseURL = '/api';

这样前端页面和后端接口就能在同一个站点下对上，不用额外处理跨域，调试时也少一层干扰。

启动项目

dotnet run

访问 https://localhost:5001，如果静态资源和接口都接对了，就能看到集成后的 GoView 页面。

进阶一点的做法

JWT 认证

如果这个大屏不是给所有人看的，认证最好早点加上。下面是 .NET 里的 JWT 配置：

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

前端这边再加一个请求拦截器，把 token 带上：

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

主题切换

如果同一套大屏要适配不同场景，主题切换会比较实用。后端可以先暴露一个主题列表，再提供切换接口：

[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}" });
}

前端再做一个切换组件去调用它就行。这个方案不复杂，但能让同一套大屏少改很多样式代码。

缓存数据

如果图表数据不是每次都要实时查库，可以加一层缓存，减轻数据库压力：

[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() 的位置是不是对的
• 复制到 wwwroot 的路径和文件名有没有出错

大小写问题在 Linux 上尤其容易踩。

API 路径不对

GoView 里配的接口地址要和 .NET 路由对上。调试时尽量用相对路径，别一上来就写死绝对地址，后面换环境会省很多麻烦。

性能

如果页面资源多、接口也多，可以把响应压缩打开：

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

这个优化不算激进，但成本低，通常值得顺手加上。

结尾

把 GoView 放进 .NET 项目里，最核心的事其实就三件：前端资源能正确部署，后端接口能稳定供数，权限和性能别拖后腿。方案不算复杂，真正容易出问题的是静态文件、路由和接口路径这几个细节。

如果目标是给现有 .NET 系统补一个可视化大屏，这种接法挺顺手。它不是最'优雅'的架构，但落地快，维护也直观。