寻求.NET+React修改Azure Git中JSON文件的实现方向

整体流程 #

前端React提供表单输入新值，提交到.NET后端；后端通过Azure DevOps REST API完成仓库文件的读取、修改、提交操作——核心逻辑和GitHub操作类似，但需调用Azure官方API而非第三方库。

1. .NET后端核心实现 #

前置准备

• 创建Azure DevOps个人访问令牌（PAT），勾选**Code (Read & Write)**权限，用于API认证。
• 将PAT存储在.NET项目的环境变量或配置文件中，禁止硬编码。

关键步骤代码示例

using System.Text;
using System.Text.Json;

public class AzureGitService
{
    private readonly HttpClient _httpClient;
    private readonly string _orgUrl;
    private readonly string _projectName;
    private readonly string _repoName;
    private readonly string _pat;

    public AzureGitService(HttpClient httpClient, IConfiguration config)
    {
        _httpClient = httpClient;
        _orgUrl = config["AzureDevOps:OrgUrl"]; // 格式：https://dev.azure.com/你的组织名
        _projectName = config["AzureDevOps:ProjectName"];
        _repoName = config["AzureDevOps:RepoName"];
        _pat = config["AzureDevOps:PAT"];
        
        // 设置API认证：PAT转base64
        var authToken = Convert.ToBase64String(Encoding.ASCII.GetBytes($":{_pat}"));
        _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Basic", authToken);
    }

    public async Task UpdateJsonFile(string filePath, string targetKey, string newValue)
    {
        // 1. 获取文件最新提交版本（避免冲突）
        var getFileUrl = $"{_orgUrl}/{_projectName}/_apis/git/repositories/{_repoName}/items?path={Uri.EscapeDataString(filePath)}&api-version=7.1-preview.1";
        var fileResponse = await _httpClient.GetAsync(getFileUrl);
        fileResponse.EnsureSuccessStatusCode();
        var fileData = await fileResponse.Content.ReadFromJsonAsync<AzureGitFileResponse>();
        var currentCommitId = fileData.CommitId;

        // 2. 下载当前JSON文件内容
        var downloadUrl = $"{_orgUrl}/{_projectName}/_apis/git/repositories/{_repoName}/items?path={Uri.EscapeDataString(filePath)}&download=true&api-version=7.1-preview.1";
        var contentResponse = await _httpClient.GetAsync(downloadUrl);
        var jsonContent = await contentResponse.Content.ReadAsStringAsync();

        // 3. 修改JSON值（用System.Text.Json，也可替换为Newtonsoft.Json）
        var jsonDoc = JsonDocument.Parse(jsonContent);
        using var ms = new MemoryStream();
        using var writer = new Utf8JsonWriter(ms);
        
        writer.WriteStartObject();
        foreach (var property in jsonDoc.RootElement.EnumerateObject())
        {
            if (property.Name == targetKey)
            {
                writer.WriteString(targetKey, newValue);
            }
            else
            {
                property.WriteTo(writer);
            }
        }
        writer.WriteEndObject();
        writer.Flush();
        var updatedJson = Encoding.UTF8.GetString(ms.ToArray());

        // 4. 提交修改后的文件
        var commitUrl = $"{_orgUrl}/{_projectName}/_apis/git/repositories/{_repoName}/pushes?api-version=7.1-preview.1";
        var pushBody = new
        {
            refUpdates = new[]
            {
                new
                {
                    name = "refs/heads/main", // 替换为你的目标分支
                    oldObjectId = currentCommitId
                }
            },
            commits = new[]
            {
                new
                {
                    comment = $"Update {targetKey} in {filePath}",
                    changes = new[]
                    {
                        new
                        {
                            changeType = "edit",
                            item = new { path = filePath },
                            newContent = new
                            {
                                content = updatedJson,
                                contentType = "rawtext"
                            }
                        }
                    }
                }
            }
        };

        var pushContent = new StringContent(JsonSerializer.Serialize(pushBody), Encoding.UTF8, "application/json");
        var pushResponse = await _httpClient.PostAsync(commitUrl, pushContent);
        pushResponse.EnsureSuccessStatusCode();
    }

    // 用于解析API返回的文件信息
    private class AzureGitFileResponse
    {
        public string CommitId { get; set; }
    }
}

注意点

• 替换代码中的分支名、组织/项目/仓库名到配置中。
• 若需修改嵌套JSON字段，调整JSON解析逻辑即可。

2. React前端实现 #

制作简单表单收集修改信息，提交到后端接口：

import { useState } from 'react';

function JsonUpdateForm() {
    const [targetKey, setTargetKey] = useState('');
    const [newValue, setNewValue] = useState('');
    const [status, setStatus] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        setStatus('提交中...');
        
        try {
            const response = await fetch('/api/azuregit/updatejson', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    filePath: '/config/settings.json', // 替换为你的JSON文件路径
                    targetKey,
                    newValue
                })
            });
            
            if (response.ok) {
                setStatus('修改成功');
                setTargetKey('');
                setNewValue('');
            } else {
                setStatus('修改失败，请重试');
            }
        } catch (err) {
            setStatus('网络错误，请检查后端服务');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>要修改的JSON键：</label>
                <input 
                    type="text" 
                    value={targetKey} 
                    onChange={(e) => setTargetKey(e.target.value)}
                    required
                />
            </div>
            <div>
                <label>新值：</label>
                <input 
                    type="text" 
                    value={newValue} 
                    onChange={(e) => setNewValue(e.target.value)}
                    required
                />
            </div>
            <button type="submit">提交修改</button>
            <p>{status}</p>
        </form>
    );
}

export default JsonUpdateForm;

3. 常见问题处理 #

• JSON修改失败：检查JSON格式是否正确，或替换为Newtonsoft.Json解析逻辑。
• API调用401/403：确认PAT权限是否足够，以及认证头设置是否正确。
• 提交冲突：若后端返回409冲突，说明文件已被其他用户修改，可添加重试逻辑或提示用户刷新后重新提交。

内容的提问来源于stack exchange，提问作者bxn0