前言

在互联网技术日新月异的今天，全栈开发已成为许多开发者追求的目标。GoWVP作为一个基于Golang的Web视频平台，不仅提供了核心信令与设备管理后台的功能，还支持多种设备的接入。本文将带你深入了解GoWVP的全栈开发过程，从搭建服务端到解决跨域问题，再到接口联调，一步步揭开GoWVP开发的神秘面纱。

一、项目背景

GoWVP是一个基于GB28181-2022标准实现的网络视频平台，支持海康、大华、宇视等品牌的IPC、NVR、DVR接入。它不仅实现了核心信令与设备管理后台部分，还支持国标级联，视频流转发等功能。

二、技术栈

GoWVP的开发涉及多种技术的运用，包括Golang v1.23、Goweb v1.x、Gin v1.10、Gorm v1.25等后端框架，以及React 19、Vite 6.x、Typescript等前端技术。

三、搭建服务端

在开始之前，我们需要完成前端的剩余工作。GoWVP采用前后端合并部署的方式，由Go服务端提供静态资源访问。前端静态资源可以使用nginx部署，但本文将按照前后端合并的方式部署。

1. 编辑vite.config.ts文件

增加base配置，表示开发模式还是根目录，生产模式以/web/为公共前缀。

base: mode === "development" ? "/" : "/web/",

2. 编辑react-router.config.ts文件

增加basename配置，表示开发模式还是根目录。

basename: import.meta.env.MODE === "development" ? "/" : "/web/",

3. 打包前端

使用yarn build命令打包前端资源，生成的静态文件放在build/client目录下，并重命名为www，放到服务端项目目录下。

四、解决跨域问题

在前端项目中，我们使用axios向服务端发出请求。为了解决跨域问题，在vite.config.ts中定义了反向代理规则，将/api路径转发到服务端。

1. 定义环境变量

在项目目录下创建.env.development和.env.production两个文件，分别设置开发模式和生产模式的环境变量。

# .env.development
VITE_API_BASE_URL=/api

# .env.production
VITE_API_BASE_URL=/api

2. 配置vite.config.ts文件

在vite.config.ts文件中配置代理规则。

server: {
  proxy: {
    "/api": {
      target: "http://localhost:8080",
      changeOrigin: true,
      rewrite: (path) => path.replace(/^/api/, ""),
    },
  },
},

五、接口联调

在GoWVP中，我们定义了HTTP接口响应模型，并使用postman/apifox/apipost等工具定义接口文档。前端使用react-query每5秒请求一次服务端，获取最新服务主机资源状态。

1. 定义HTTP接口响应模型

在app/service/model/stat.ts文件中定义FindStats函数。

export async function FindStats() {
  return await GET<FindStatResponse>`(/stats`);
}

2. 定义接口请求

在app/service/api/stat.ts文件中定义FindStats函数。

export async function FindStats() {
  return await GET<FindStatResponse>`(/stats`);
}

3. 使用react-query获取数据

在任意页面，使用react-query每5秒请求一次服务端，获取最新服务主机资源状态。

const query = useQuery({ queryKey: ["dashboard"], queryFn: FindStats, refetchInterval: 5000, throwOnError: (error, query) => { return false; }, });

六、总结

本文详细介绍了GoWVP全栈开发的整个过程，从搭建服务端到解决跨域问题，再到接口联调。通过本文的学习，你将掌握如何使用Go语言和多种前端技术实现一个功能完善的网络视频平台。希望本文对你有所帮助，让你在GoWVP的全栈开发之路上更进一步！