5 年前端 · 独立接单
5 年前端企业官网活动落地页后台管理系统
3-7 天交付,源码和部署一起给
三个案例都能点开:官网的表单真提交、后台的增删改真落库、图表读的是数据库里的真实数据。不接垫资单,报价和交付清单确认后再开工。
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- shadcn/ui
- Server Actions
- node:sqlite
- Recharts
- 微信小程序
- 前端开发经验
5年
前端开发经验
- 可点开的完整案例
3个
可点开的完整案例
- 标准项目交付周期
3-7天
标准项目交付周期
- 移动端真机验证宽度
375px
移动端真机验证宽度
每一页都能点开,每一条数据都真实
不是静态稿,也不是截图拼贴。下面三个链接可以直接打开, 表单可以提交、后台可以增删改、图表会随数据变化。
三个案例的截图均取自实际运行页面
提前说清楚边界,比事后返工省事
下面这些是我能稳定交付的,以及我不接的。 写在前面,是为了不在项目中途才发现不合适。
我能接的
企业官网
品牌站、产品站、活动站,含响应式与基础 SEO。
活动落地页
预售、报名、留资,单页讲清价值并跑通转化。
后台管理系统
订单、客户、库存、日志,真实增删改查与权限。
微信小程序二开
在已有小程序上迭代功能,不从零另起一套。
数据大屏
可视化看板,数据源对接真实接口。
响应式适配
老站补移动端,或把桌面版改到 375px 可用。
前端 Bug 修复
按工时计费,先定位再报价,不做兜底返工。
AI 功能集成
模型接口接入、流式输出、埋点与用量统计。
我不接的
App 整包
只做 Web 前端,整包交付超出我的能力边界,接了要外包。
垫资先做后付
确认范围后按 50% 定金开工,不做零首付。
没有需求文档的口头开发
没有文档就没有验收标准,返工责任说不清。
代备案代过审
备案和资质属于主体责任,不代办。
竞品项目
不接直接复制同行在跑的站点。
三档套餐,价格和包含什么一次写清
报价是区间,因为同一档里页面数量和功能深度差别不小。 需求确认后我会给一个确定数字,写进交付清单,不在开发中追加。
快速上线包
单页落地页、活动页,或给现有站点做单页适配。
- 1 个页面的设计与实现
- 移动端适配(375px 起)
- 文案与视觉初稿
- 1 轮小改
- 源码交付
交付周期
1 – 2 天
价格(元)
1,980 – 2,980
官网标准包
主推中小品牌官网,需要多页内容、表单和上线。
- 5 页响应式官网(首页 / 产品 / 案例 / 关于 / 联系)
- 真提交的联系表单,服务端校验后入库
- 基础 SEO 与语义化标签
- 服务器部署上线
- 含 1 轮修改
- 源码与部署说明交付
交付周期
3 – 5 天
价格(元)
5,980 – 7,980
后台定制包
有订单、客户或库存数据要管,需要权限与图表。
- 登录与角色权限(管理员 / 运营)
- 3 – 5 个模块的增删改查,全部真写数据库
- 数据图表,看板直读业务表
- 数据导出与操作日志
- 服务器部署上线
- 含 1 轮修改
- 源码与部署说明交付
交付周期
7 – 12 天
价格(元)
12,800 – 19,800
可加购项
在任一套餐基础上单独计价,报价时一并写进清单。
- 部署上线¥800
- 埋点接入¥500
- 接口对接¥300 / 个
- 超出售后修改¥300 / 次
- 源码独占买断¥+30%
从需求确认到源码交付,七步走完
每一步都有明确的产出和确认点。你知道现在在哪一步、下一件要确认什么, 不用天天追问进度。
- 1
需求确认
半小时沟通,把要做哪些页面、要哪些功能列清楚。
- 2
交付清单与报价
输出功能清单、工期与价格,范围确认后不再随意加。
- 3
50% 定金开工
收到定金后排期开工,交付节奏按天同步。
- 4
开发与进度同步
每日同步进度,重要节点给可访问的预览地址。
- 5
预发环境验收
在预发地址逐页验收,修改在验收期内完成。
- 6
结清尾款
验收通过后支付尾款,不验收不催款。
- 7
源码与文档交付
交付源码、数据库结构说明与部署说明。
后台的增删改是真写数据库的
这是和那些只交付静态页的同行最大的区别。 下面这段是本作品集后台「新建订单」的真实代码, 你可以对着它去演示后台点一遍,数据会真的变。
export function createOrder(input: {
customerId: number;
productId: number;
qty: number;
amount: number;
status?: OrderStatus;
}) {
const db = getDb();
// 1. 先校验商品存在
const product = db
.prepare("SELECT id, name, price, stock FROM products WHERE id = ?")
.get(input.productId);
if (!product) throw new Error("商品不存在");
// 2. 真写订单主表
const res = db.prepare(
`INSERT INTO orders (order_no, customer_id, product_id,
product_name, qty, amount, status, created_at)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
).run(orderNo, customer.id, product.id, product.name,
input.qty, amount, status, now.toISOString());
const orderId = Number(res.lastInsertRowid);
// 3. 同步商品销量与客户消费额
db.prepare(
"UPDATE products SET sales = sales + ?, stock = MAX(stock - ?, 0) WHERE id = ?",
).run(input.qty, input.qty, product.id);
db.prepare(
"UPDATE customers SET total_spend = total_spend + ?, order_count = order_count + 1 WHERE id = ?",
).run(amount, customer.id);
// 4. 记一条操作日志,后台可查
writeLog("管理员 · 陈澜", "创建订单", orderNo, `登记了订单 ${orderNo}`);
return getOrderDetail(orderId);
}表单是真提交的
官网联系表单和落地页报名都走 Server Action,服务端重新校验后写进 SQLite,刷新页面记录还在。
增删改是真落库的
后台的订单状态、客户等级、商品上下架都直接写库。把订单改成「已取消」,销量和客户消费额会一起回退。
图表是真查出来的
概览看板的折线、环形和条形图每次访问都实时查表,不是写死的数据集,所以后台改一条数据,图表就跟着变。
数据库用的是 Node 内置的 node:sqlite,没有原生模块、不用编译、不用另装数据库。 交付给你时把源码和数据文件一起给,装好依赖就能跑。
技术栈
Next.js 16
App Router / Server Actions
React 19
服务端组件优先
TypeScript
strict 模式,零 any
Tailwind CSS 4
主题走 CSS 变量换肤
shadcn/ui
Radix 源码内联,可改
node:sqlite
零原生依赖,交付即用
Recharts
图表直读业务表
TanStack Table
后台列表与筛选
平台私信
直接留言,附带需求描述即可
邮件
把文档或参考站点一并发来
邮箱
hello@qiantu.dev