实战复盘：基于C#与EMLOG架构的在线工具开发全流程

大家好，我是零点。最近在零点博客后台收到不少私信，都在问如何利用现有的技术栈去拓展业务，或者说想做一个在线工具开发的实战项目。其实，不论是做PHP的EMLOG主题，还是用C#写后端接口，核心逻辑都是通的。今天我就不扯那些虚的，直接拿一个常见的“批量字符串格式化工具”为例，手把手带大家拆解一遍从后端逻辑到前端交互的落地过程。

一、需求分析与技术选型

想做工具，先定方案。我们的目标是一个无需安装、网页端就能用的格式化工具。

后端语言： 我们选C#，配合 ASP.NET Core，处理业务逻辑和正则校验非常高效。
数据存储： 为了保持轻量，我们直接在前端处理数据，如果涉及历史记录，再简单对接MySQL。
接口交互： 请求和响应都走JSON格式，轻量且跨平台。

二、后端逻辑搭建（C#）

首先是后端。很多新手写接口容易犯一个错，就是把所有逻辑都揉在一起。我们得把业务拆分。这里的核心是SQL注入防护和预处理语句的使用，虽然我们的工具不一定查库，但养成这个习惯是底层开发的精髓。

[ApiController]
[Route("api/[controller]")]
public class ToolController : ControllerBase
{
    // 模拟处理数据的核心方法
    [HttpPost("/process")]
    public IActionResult ProcessData([FromBody] JsonInput input)
    {
        try
        {
            // 1. 使用正则表达式进行数据清洗
            var regex = new Regex(input.Rule, RegexOptions.IgnoreCase);
            var results = new List<string>();

            foreach (var item in input.RawData)
            {
                // 将所有空白字符替换为指定字符
                var cleanText = regex.Replace(item, input.ReplaceChar.ToString());
                results.Add(cleanText);
            }

            // 2. 返回JSON格式结果
            return Ok(new { success = true, data = results });
        }
        catch (Exception ex)
        {
            // 3. 异常捕获，防止程序崩溃
            return BadRequest(new { success = false, message = "处理失败：" + ex.Message });
        }
    }
}

上面的代码里，我特意加入了正则表达式的操作。在做工具时，正则就是你的瑞士军刀，处理复杂的字符串匹配（比如爬虫采集时过滤脏数据）非常顺手。

三、前端交互与JSON解析

后端跑通了，接下来看HTML/CSS/JS。前端的工作主要是收集用户输入，发送请求，然后解析后端传回的JSON/XML数据并展示。这里有个坑：一定要处理跨域问题，否则C#后端跑起来，浏览器会报错。

function fetchProcessData() {
    // 获取输入框内容
    const rawData = document.getElementById('input-text').value;

    // 构建请求数据
    const payload = {
        raw: rawData,
        rule: "\s+", // 默认替换空白
        replaceChar: "-"
    };

    // 发起POST请求
    fetch('/api/tool/process', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
    .then(response => response.json())
    .then(data => {
        // 简单的JSON解析与DOM更新
        if(data.success) {
            document.getElementById('output-area').innerText = data.data.join('\n');
        } else {
            alert('出错啦：' + data.message);
        }
    });
}

四、数据库与安全避坑指南

有些在线工具可能会记录用户的操作记录。这时候就要用到MySQL数据库了。请注意，SQL注入防护绝不能少。千万不要用字符串拼接SQL，必须使用预处理语句。

-- 错误示范（高风险）
string sql = "INSERT INTO logs VALUES ('" + userInput + "')"; 

-- 正确示范（推荐）
string sql = "INSERT INTO logs VALUES (@Input)";
using (SqlCommand cmd = new SqlCommand(sql, conn)) {
    cmd.Parameters.AddWithValue("@Input", userInput); // 参数化查询
    cmd.ExecuteNonQuery();
}

五、总结与源码获取

从C#后端的接口设计，到HTML/CSS/JS的前端渲染，再到JSON数据的流转，这个在线工具开发的闭环就跑通了。如果你觉得上面的代码逻辑清晰，可以直接拿去改造成其他工具，比如批量重命名、批量转换大小写等。

源码我已经打包上传到了零点博客的资源区，大家可以去下载配合练习。有任何技术问题，欢迎在评论区留言，我们下期继续聊技术细节！