企业官网建设流程全解析

1. 从 Java 实体类转 JSON 这个需求说起

独立开发者想一天上线一个工具站，最怕的不是写代码，而是被环境、依赖、部署这些杂事拖住。我这次做的工具站功能很窄：把 Java 实体类粘贴进去，点一下按钮，输出对应的 JSON 示例。起因是写设计文档时，接口的入参出参要手敲 JSON，字段一多就很容易漏。搜了一圈，市面上大多是 JSON 转 Java 实体类，反向的工具反而少，于是决定自己做一个。

技术选型上，我一开始用 Python 的 streamlit 快速验证逻辑，功能能跑通，但界面实在拿不出手。后来换成 Next.js + shadcn-ui，用 Cursor 辅助开发，部署走 Vercel，域名接 Cloudflare 做加速。整套流程跑下来，从初始化到线上可访问，一天时间是够的，前提是把配置骨架提前定好，别在环境上反复折腾。

这篇文章会交付可复制的settings.json、config.toml骨架，以及 TaoToken 统一 Key 的接入步骤，再给出本地启动、构建、线上验证的逐条动作。适合已经会一点前端、想快速把想法变成可访问网站的人。

2. TaoToken 前置：统一 Key 与接入准备

在开始写业务代码之前，先把模型调用的入口统一掉。工具站本身可能只需要一个转换逻辑，但后续你想加 AI 润色、字段注释生成、错误提示优化，都会用到模型能力。如果每个功能各自去配 Key，后面维护会很乱。TaoToken 的作用就是提供一个统一的 Key，兼容常见的模型调用方式，省去多平台切换的麻烦。

你需要先拿到一个 API Key。访问官网注册后，在控制台里创建：

• 官网入口：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=
• 控制台创建 Key：https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=console
• API Keys 管理页：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=api-keys

API 的基础地址是https://taotoken.net/api，这个地址在配置里会用到，注意它不带 UTM 参数，直接写进配置文件即可。

注意：Key 只放在本地.env.local或部署平台的环境变量里，不要提交到 GitHub。Vercel 部署时在项目设置里单独加环境变量。

如果你后面要长期用 Cursor 做编码、跑 Agent 任务，可以了解 Coding Plan，它更适合持续性的开发场景：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=coding-plan

3. 可复制配置：settings.json 与 config.toml 骨架

Cursor 的配置分两块：一块是编辑器层面的settings.json，一块是模型接入相关的config.toml。下面这两个骨架可以直接复制，改掉 Key 就能用。

3.1 Cursor settings.json 骨架

这个文件放在用户配置目录下，Windows 一般在%APPDATA%\Cursor\User\settings.json，macOS 在~/Library/Application Support/Cursor/User/settings.json。核心是把默认的模型请求指向统一入口。

{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "files.autoSave": "onFocusChange", "terminal.integrated.defaultProfile.osx": "zsh", "terminal.integrated.defaultProfile.linux": "bash", "cursor.general.enableShadowWorkspace": true, "cursor.cpp.disabledLanguages": [], "cursor.chat.defaultModel": "claude-3-5-sonnet", "cursor.chat.customApiBase": "https://taotoken.net/api", "cursor.chat.customApiKey": "${env:TAOTOKEN_API_KEY}", "typescript.tsdk": "node_modules/typescript/lib", "tailwindCSS.experimental.classRegex": [ ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] ] }

这里用${env:TAOTOKEN_API_KEY}引用环境变量，避免把 Key 写死在文件里。你需要在系统环境变量里加一个TAOTOKEN_API_KEY，值就是控制台里创建的那串。

3.2 config.toml 骨架

有些工具链或 CLI 会读config.toml，比如你在项目里跑脚本调用模型时。放在项目根目录或者用户配置目录都行，内容如下：

[api] base_url = "https://taotoken.net/api" api_key = "${TAOTOKEN_API_KEY}" timeout = 60 max_retries = 3 [model] default = "claude-3-5-sonnet" fallback = "gpt-4o-mini" temperature = 0.3 max_tokens = 4096 [project] name = "java2json-tool" framework = "nextjs" ui = "shadcn-ui" deploy = "vercel"

temperature设成 0.3 是因为代码转换类任务需要稳定输出，太高容易生成奇怪的字段名。max_retries给 3 次，网络抖动时自动重试。

3.3 Next.js 项目环境变量

在项目根目录建.env.local：

TAOTOKEN_API_KEY=你的Key TAOTOKEN_BASE_URL=https://taotoken.net/api NEXT_PUBLIC_SITE_URL=https://你的域名

.env.local要加进.gitignore，Vercel 部署时在 Project Settings → Environment Variables 里手动加同样的键值。

4. Next.js + shadcn-ui 项目初始化与组件拼装

配置骨架定好后，开始建项目。这一步 Cursor 能帮你生成大部分命令，但有几个坑要提前避开。

4.1 初始化 Next.js 项目

在终端里执行：

npx create-next-app@latest java2json-tool --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" cd java2json-tool

参数说明：--app用 App Router，--src-dir把代码放src目录，--import-alias "@/*"配置路径别名，后面 import 组件更清爽。

4.2 初始化 shadcn-ui

这里有个版本坑。Cursor 早期给的命令是npx shadcn-ui@latest init，但某些版本会卡住或报错。实测下来换成指定版本更稳：

npx shadcn-ui@0.7.0 init

初始化时会问你几个问题：样式选 Default，基础色选 Slate，CSS 变量选 Yes。完成后项目里会多出components.json和src/components/ui目录。

接着按需添加组件：

npx shadcn-ui@0.7.0 add button textarea card tabs toast

这几个组件够用了：textarea放 Java 代码输入，button触发转换，card做结果展示区，tabs切换输入输出视图，toast做复制成功提示。

4.3 页面结构拼装

我想要的布局是左右结构：左边输入框，右边结果框，顶部一个导航栏。在src/app/page.tsx里大致这样组织：

import { Textarea } from "@/components/ui/textarea"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; export default function Home() { return ( <main className="min-h-screen bg-slate-50"> <nav className="flex items-center justify-between px-6 py-4 border-b bg-white"> <span className="font-bold text-lg">Java2JSON</span> <span className="text-sm text-slate-500">统一 Key 驱动</span> </nav> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-6"> <Card> <CardHeader><CardTitle>Java 实体类</CardTitle></CardHeader> <CardContent> <Textarea placeholder="粘贴 Java 代码..." className="min-h-[400px]" /> </CardContent> </Card> <Card> <CardHeader><CardTitle>JSON 结果</CardTitle></CardHeader> <CardContent> <pre className="min-h-[400px] bg-slate-900 text-slate-100 p-4 rounded-md overflow-auto" /> </CardContent> </Card> </div> <div className="flex justify-center pb-8"> <Button size="lg">生成 JSON</Button> </div> </main> ); }

告诉 Cursor 你要的布局，它会帮你补全状态管理和事件绑定。转换逻辑可以先写个简单的正则解析，后面再接模型做复杂字段推断。

4.4 接入 TaoToken 做字段推断

当 Java 类里有嵌套对象、泛型、枚举时，纯正则不够用。这时在 API Route 里调模型：

// src/app/api/convert/route.ts import { NextResponse } from "next/server"; export async function POST(req: Request) { const { code } = await req.json(); const res = await fetch(`${process.env.TAOTOKEN_BASE_URL}/v1/chat/completions`, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.TAOTOKEN_API_KEY}`, }, body: JSON.stringify({ model: "claude-3-5-sonnet", messages: [ { role: "system", content: "你是 Java 转 JSON 助手，只输出 JSON，不要解释。" }, { role: "user", content: code }, ], temperature: 0.2, }), }); const data = await res.json(); return NextResponse.json({ result: data.choices[0].message.content }); }

前端按钮点击时fetch("/api/convert")，把结果填到右侧pre里。

5. 本地启动、构建与 Vercel 部署验证

代码写得差不多，接下来是逐条动作验证。

5.1 本地启动

npm run dev

打开http://localhost:3000，粘贴一段 Java 代码，点按钮，看右侧是否出 JSON。如果报错，先看终端日志，再把报错整段复制给 Cursor，它基本能定位。

5.2 本地构建

这一步很关键，Vercel 部署失败大多是因为本地没跑构建：

npm run build

构建时会做严格检查。比如你定义了一个变量没用，或者 import 了没使用的组件，都会报错。解决办法就是哪里报错点哪里，删掉无用变量或补上使用逻辑。构建通过后再跑一次npm run start确认生产模式正常。

5.3 推送到 GitHub 并部署 Vercel

git init git add . git commit -m "init java2json tool" git remote add origin 你的仓库地址 git push -u origin main

然后在 Vercel 里 Import 这个仓库，框架会自动识别为 Next.js。在环境变量里加上TAOTOKEN_API_KEY、TAOTOKEN_BASE_URL、NEXT_PUBLIC_SITE_URL，点 Deploy。等一两分钟，Vercel 会给你一个xxx.vercel.app的临时域名。

5.4 Cloudflare 域名接入

Vercel 分配的域名在国内访问偏慢，解决办法是自己买个域名，解析到 Cloudflare 做 CDN 加速。

在 Cloudflare 添加站点，把域名的 NS 记录改成 Cloudflare 给的两个地址。等生效后，在 DNS 里加一条 CNAME 指向cname.vercel-dns.com，然后在 Vercel 的 Domains 里绑定你的域名。

这里有个高频坑：域名托管到 Cloudflare 后，访问一直提示重定向次数过多。原因是 SSL/TLS 加密模式没设对。进 Cloudflare 的 SSL/TLS 菜单，把加密模式设为「完全（Strict）」，问题就解决了。

5.5 线上验证清单

部署完成后逐条确认：

• 打开你的域名，页面能正常加载，没有 502 或重定向循环
• 粘贴一段带嵌套对象的 Java 代码，点生成，右侧出 JSON
• 点复制按钮，toast 提示成功
• 手机浏览器打开，布局没有错乱
• 在 Vercel 的 Functions 日志里看 API Route 有没有报错

全部通过，工具站就算上线了。

6. 本篇常见错排查

shadcn-ui 初始化卡住或报错：换指定版本npx shadcn-ui@0.7.0 init，别用@latest。如果还不行，删掉node_modules和package-lock.json重来。

Vercel 构建报 unused variable：本地npm run build先跑一遍，把 ESLint 报的未使用变量删掉。也可以在next.config.js里临时关掉严格检查，但不推荐，容易埋隐患。

API Route 返回 401：检查 Vercel 环境变量里TAOTOKEN_API_KEY有没有加，值有没有多余空格。本地.env.local和 Vercel 环境变量是两套，别只配一边。

Cloudflare 重定向次数过多：SSL/TLS 加密模式设为「完全（Strict）」。如果还不行，检查 Cloudflare 的 Page Rules 有没有强制 HTTPS 的规则和 Vercel 的冲突。

域名解析不生效：NS 记录变更通常要几十分钟到几小时，用dig 你的域名确认 NS 是否已指向 Cloudflare。CNAME 记录不要加代理状态为「仅 DNS」以外的设置，除非你确认要开橙云。

模型返回带 markdown 代码块：在 system prompt 里明确「只输出 JSON，不要用代码块包裹」，或者在解析时用正则去掉json 和。

7. 后续扩展与统一 Key 的长期用法

工具站上线只是第一步。后面你想加功能，比如 Java 转 TypeScript、JSON 转 Java、字段注释自动生成，都可以复用同一套 TaoToken Key 和 API Route 结构。统一 Key 的好处在这里体现出来：不用每个功能去申请不同平台的账号，配置一次，多处调用。

如果你打算长期用 Cursor 做编码和 Agent 任务，可以看看 Coding Plan，它更适合持续性的开发场景：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=coding-plan

想直接测试模型输出效果，可以用模型对话页：

• 模型对话：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=chat

接入过程中遇到报错，先查接入文档：

• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=doc

Key 管理和新建在 API Keys 页：

• API Keys：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=api-keys

整套流程跑下来，最耗时的其实是环境配置和部署排错，业务逻辑本身用 Cursor 辅助写得很快。把settings.json和config.toml骨架提前定好，Key 统一走 TaoToken，后面加功能就是复制粘贴改改的事。