时间 ：2026 年 3 月 10 日
标签：Node.js、Express、Vite、Tailwind CSS、Ollama、AI、Git 规范
引言：为什么我们需要"规范的 Git 提交信息"？
在现代软件开发中，Git 提交信息（Commit Message） 不仅是代码变更的记录，更是团队协作、项目追溯、自动化发布甚至绩效评估的重要依据。一个高质量的 Commit Message 能让：
- 新人快速理解历史变更；
- Leader 审核工作产出时有据可依；
- CI/CD 流水线自动解析提交类型（feat、fix、docs 等）；
- 自动生成 CHANGELOG。
但现实是：很多开发者（尤其是新手）写出的提交信息如 update code、fix bug，毫无信息量。于是，我萌生了一个想法：能否借助 AI，一键生成符合 Conventional Commits 规范的高质量提交信息？
于是，"Git 提交 AI 神器"项目诞生了！
项目架构：前后端分离 + 本地大模型
本项目采用典型的全栈架构，技术栈如下：
-
前端：Vite + Vue/React（任选）+ Tailwind CSS + Axios
-
后端：Node.js + Express
-
AI 引擎 ：Ollama 部署的开源大模型
deepseek-r1:8b（支持推理能力） -
部署方式：
- 前端运行于
http://localhost:5173 - 后端 API 伺服于
http://localhost:3000 - Ollama API 暴露于
http://localhost:11434
- 前端运行于
整个系统通过 HTTP 请求链 串联：
前端 → 后端（Express） → Ollama（AI） → 返回智能 Commit Message
后端实现：Express 构建稳健 API
1. 初始化 Express 应用
ini
const express = require('express');
const app = express();
const port = 3000;
// 解析 JSON 请求体（关键！否则 req.body 为 undefined）
app.use(express.json());
// 启用 CORS（解决跨域问题）
const cors = require('cors');
app.use(cors());💡 注意 ：Express 默认不解析请求体，必须手动添加
express.json()中间件。否则 POST 请求的数据无法读取。
2. 设计核心 API 路由
我们提供一个 /generate-commit 接口，接收 diff 内容，返回 AI 生成的提交信息：
php
app.post('/generate-commit', async (req, res) => {
const { diff } = req.body;
if (!diff) {
return res.status(400).json({ error: 'Missing diff content' });
}
try {
// 调用 Ollama API
const aiResponse = await fetch('http://localhost:11434/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
model: 'deepseek-r1:8b',
prompt: `你是一个专业的 Git 提交信息生成器。请根据以下代码 diff 生成一条符合 Conventional Commits 规范的提交信息（英文）：\n\n${diff}`,
stream: false
})
});
const result = await aiResponse.json();
const commitMessage = result.response.trim();
res.status(200).json({ commitMessage });
} catch (err) {
console.error(err);
res.status(500).json({ error: 'AI service error' });
}
});3. 处理 HTTP 状态码
遵循 RESTful 规范，合理使用状态码：
200 OK：成功生成400 Bad Request：缺少必要参数500 Internal Server Error：AI 服务异常
跨域问题：CORS 是"护照"
前端运行在 5173，后端在 3000，端口不同即跨域。浏览器出于安全考虑会直接 block 请求。
解决方案：后端启用 CORS 中间件。
less
app.use(cors()); // 允许所有来源（开发环境）
// 生产环境应指定 origin: ['https://yourdomain.com']这相当于给前端"签发签证"，浏览器放行请求。
前端实现：简洁 UI + 智能交互
使用 Vite 快速搭建前端，Tailwind CSS 实现美观界面：
ini
<template>
<div class="max-w-3xl mx-auto p-6">
<h1 class="text-2xl font-bold mb-4">Git 提交 AI 神器 ✨</h1>
<textarea
v-model="diff"
placeholder="粘贴你的 git diff 内容..."
class="w-full h-40 p-3 border rounded"
></textarea>
<button
@click="generate"
:disabled="loading"
class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
{{ loading ? '生成中...' : 'AI 生成 Commit' }}
</button>
<div v-if="commitMessage" class="mt-4 p-3 bg-gray-100 rounded">
<p class="font-mono">{{ commitMessage }}</p>
<button @click="copy" class="mt-2 text-sm text-blue-600">复制</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const diff = ref('');
const commitMessage = ref('');
const loading = ref(false);
const generate = async () => {
loading.value = true;
try {
const res = await axios.post('http://localhost:3000/generate-commit', {
diff: diff.value
});
commitMessage.value = res.data.commitMessage;
} catch (err) {
alert('生成失败，请检查后端或 Ollama 是否运行');
}
loading.value = false;
};
const copy = () => {
navigator.clipboard.writeText(commitMessage.value);
alert('已复制到剪贴板！');
};
</script>AI 集成：Ollama + DeepSeek-R1
Ollama 让本地运行大模型变得极其简单：
arduino
ollama pull deepseek-r1:8b
ollama run deepseek-r1:8b # 测试其 API 与 OpenAI 兼容，只需 POST 到 /api/generate 即可获得推理结果。
为什么选 DeepSeek-R1？
它专为**推理（Reasoning）**优化，在代码理解、文本生成任务上表现优异，且 8B 参数可在消费级 GPU 上流畅运行。
开发体验优化
-
使用
nodemon监听文件变化，自动重启后端：vbscriptnodemon server.js -
使用 Apifox 测试
/generate-commit接口，验证请求/响应结构。 -
前端热更新（Vite）+ 后端热重载（Nodemon）= 极致开发效率。
总结：小工具，大价值
这个"Git 提交 AI 神器"虽小，却融合了：
- 全栈开发（前端 + 后端）
- HTTP 协议与 RESTful 设计
- 跨域处理（CORS）
- 本地大模型集成（Ollama）
- 工程规范意识（Conventional Commits）
更重要的是，它降低了高质量 Git 提交的门槛，让每个开发者都能像资深工程师一样写出清晰、规范、有价值的提交信息。
未来可扩展方向：
- 支持多语言 Commit（中文/英文切换）
- 集成 VS Code 插件
- 自动检测 diff 并建议提交类型
代码即文档，提交即履历。
用 AI 赋能开发习惯，从写好每一次 git commit 开始！