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

移动端真机验证宽度

01三个案例

每一页都能点开,每一条数据都真实

不是静态稿,也不是截图拼贴。下面三个链接可以直接打开, 表单可以提交、后台可以增删改、图表会随数据变化。

三个案例的截图均取自实际运行页面

mingxu-home.com
明序家居企业官网首页截图

明序家居 · 企业官网

全屋收纳定制品牌官网,5 页完整叙事 + 真联系表单。

首页、产品线、案例、关于、联系五页各自成立,不是首页加空链接。联系表单走 Server Action,服务端二次校验后写入 SQLite。

  • Next.js 16
  • App Router
  • Tailwind 4
  • Server Actions
  • 5 页完整内容
  • 表单真写库
  • 移动端独立适配
chengyu-bakery.cn
橙屿烘焙秋季新品预售落地页截图

橙屿烘焙 · 活动落地页

秋季新品预售单页,倒计时逼单 + 报名真入库。

围绕「桂花酒酿」预售做的单页转化:限量、倒计时、三档礼盒价格与 FAQ 都在一页里,报名提交后写入 signups 表,刷新后记录仍在。

  • Next.js 16
  • 倒计时
  • 服务端校验
  • 移动优先
  • 倒计时每日重算
  • 三档价格清晰
  • 报名真写库
admin · 运营后台
明序家居运营后台概览页截图

明序家居 · 运营后台

订单 / 客户 / 商品 / 日志四个模块,增删改查真连数据库。

概览看板 + 订单、客户、商品、操作日志四个管理模块,两个角色按权限显示菜单,图表每次访问都实时查库。

  • Recharts
  • node:sqlite
  • TanStack Table
  • 角色权限
  • 增删改真落库
  • 图表直读数据库
  • 角色权限控制

演示账号 admin / admin123

02接与不接

提前说清楚边界,比事后返工省事

下面这些是我能稳定交付的,以及我不接的。 写在前面,是为了不在项目中途才发现不合适。

我能接的

  • 企业官网

    品牌站、产品站、活动站,含响应式与基础 SEO。

  • 活动落地页

    预售、报名、留资,单页讲清价值并跑通转化。

  • 后台管理系统

    订单、客户、库存、日志,真实增删改查与权限。

  • 微信小程序二开

    在已有小程序上迭代功能,不从零另起一套。

  • 数据大屏

    可视化看板,数据源对接真实接口。

  • 响应式适配

    老站补移动端,或把桌面版改到 375px 可用。

  • 前端 Bug 修复

    按工时计费,先定位再报价,不做兜底返工。

  • AI 功能集成

    模型接口接入、流式输出、埋点与用量统计。

我不接的

  • App 整包

    只做 Web 前端,整包交付超出我的能力边界,接了要外包。

  • 垫资先做后付

    确认范围后按 50% 定金开工,不做零首付。

  • 没有需求文档的口头开发

    没有文档就没有验收标准,返工责任说不清。

  • 代备案代过审

    备案和资质属于主体责任,不代办。

  • 竞品项目

    不接直接复制同行在跑的站点。

03报价

三档套餐,价格和包含什么一次写清

报价是区间,因为同一档里页面数量和功能深度差别不小。 需求确认后我会给一个确定数字,写进交付清单,不在开发中追加。

快速上线包

单页落地页、活动页,或给现有站点做单页适配。

  • 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%
04交付流程

从需求确认到源码交付,七步走完

每一步都有明确的产出和确认点。你知道现在在哪一步、下一件要确认什么, 不用天天追问进度。

  1. 1

    需求确认

    半小时沟通,把要做哪些页面、要哪些功能列清楚。

  2. 2

    交付清单与报价

    输出功能清单、工期与价格,范围确认后不再随意加。

  3. 3

    50% 定金开工

    收到定金后排期开工,交付节奏按天同步。

  4. 4

    开发与进度同步

    每日同步进度,重要节点给可访问的预览地址。

  5. 5

    预发环境验收

    在预发地址逐页验收,修改在验收期内完成。

  6. 6

    结清尾款

    验收通过后支付尾款,不验收不催款。

  7. 7

    源码与文档交付

    交付源码、数据库结构说明与部署说明。

05技术细节

后台的增删改是真写数据库的

这是和那些只交付静态页的同行最大的区别。 下面这段是本作品集后台「新建订单」的真实代码, 你可以对着它去演示后台点一遍,数据会真的变。

lib/data.ts · createOrder()
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

    后台列表与筛选

06 · 开始合作

把需求发过来,我先给交付清单和报价

说清楚要做什么、大概什么时间要、预算在哪个区间。我会在 1 个工作日内回一份写明的交付清单和报价,确认范围后再开工。

  • 平台私信

    直接留言,附带需求描述即可

  • 邮件

    把文档或参考站点一并发来

  • 邮箱

    hello@qiantu.dev