从 0 到 1 设计、编码、搭建个人知识付费应用（Remix 全栈框架、集成支付和用户、React、TailwindCSS、Prisma）

感兴趣或者喜欢的请点赞关注我，本文超过 100 个赞正式动工。

变更记录

• 2022-07-30 初稿，设想提出
• 2022-07-31 添加需求草稿

系统概述

类似于个人博客系统，可以发布文章、页面及代码片段。

设置付费粒度：

• 付费 VIP，享受所有资源免费访问（有效周期内）
• 单篇付费，对于设置付费的资源进行购买并获得访问权限（买断）

类似的应用

• CodeHike： 一个开源代码高亮库，网站上部分示例需要 Github 赞助可见。
• Framer book： 知名动画库 Framer Motion 的配套教程，年费制会员。
• DesignCode： 免费限制 5 个视频课程，付费订阅解锁全部。

涉及的技术栈及云服务

技术栈：

• Remix ：下一代全栈框架，前端部分是 React
• TailwindCSS、 Daisy UI： 下一代设计、样式框架
• Prisma：下一代数据库 ORM

云服务：

• Vercel： 免费的服务应用托管 + 边缘网络 + CDN
• PlanetScale： 免费云端 MySQL 数据库
• Sanity： Headless CMS 内容管理，提供免费的云托管

关于开源

该项目涉及的设计文档将放置于 CSDN 专栏，代码开源于 Github。

也可以提前关注我的 Github： https://github.com/willin

---

需求设计

基础需求

• 个人知识付费博客应用系统
  • 图文内容
    • 文章
    • 代码片段 （动态可交互内容）
    • 页面（如关于、赞助商、友链、开源项目等）
  • 资源/附件
    • 如源码压缩包等文件
    • 开源项目 URL 等信息卡片
  • VIP 会员
    • 订阅制，可以访问付费图文内容
    • 但付费资源仍需要额外购买才能下载，享受 6 折优惠（可配置，0 折表示也免费下载）

图文内容

Sanity

使用 Headless CMS 进行内容（文章、页面、代码片段、资源/附件）的管理。

MDX

使用 MDX 动态组件内容，以提升页面的交互性。

为什么不用数据库

首先，该系统基本都以免费的服务为依托。比如 MySQL 的云端服务商 PlanetScale 对于免费套餐是有每月请求数限制的。所以数据库仅用于存放文章阅读数、下载统计、用户付费账单等信息。

支付集成

• 微信支付 （个人开发者 不支持）
• 支付宝 当面付

当面付签约

打开支付宝手机 App，搜索【签约助手】。

选择【当面付】进行签约

营业执照是选填项，所以如果没有，个人也是可以签约的。（单笔 1,000 元，每月 50,000 元限制）

支付需求

普通用户

• 需付费购买标记为付费的图文内容
• 原价购买标记为付费的资源附件
• 升级为订阅制 VIP 会员

VIP 会员

• 免费访问标记为付费的图文内容
• 优惠价（可配置折扣或免费）购买标记为付费的资源附件