Overall requirements and detailed design of building a personal knowledge payment application system

Overall system requirements

revenue model

• advertise

  • Visitors and ordinary users display advertisements

• Paid content

  • Visitors and regular users cannot view the full content of paid content
  • Free browsing of paid content
  • Paid content can be paid individually
  • Paid resource accessories need to be paid for purchase (ordinary user original price, VIP member X discount)

• member

  • Ad-free for VIP members
  • Free browsing of paid content

System Architecture Diagram

 graph LR
    app[知识付费系统]
    app --- user[用户中心]
    app --- content[内容]
    app --- ad[广告]
    
    user --- 注册/登录
    user --- 会员中心
    user --- 支付历史

    content --- 文章 --- 收费附件
    content --- 页面 --- 收费附件
    content --- 代码片段 --- 收费附件
    content --- comp1[禁止文本选中复制组件]
    content --- comp2[代码复制组件]
    
    ad --- 会员免广告组件
    ad --- comp3[AntiAdBlock 插件]

Module description

User Center

register log in

• Github account login
• WeChat scan code login
• SMS verification code login
• Account password login

Member Centre

• Non-members: prompt to open
• Member: Displays expiration time and prompts for renewal

payment history

The following three types of payment data can be queried:

• Membership record
• Content payment record
• Resource purchase records

content

Articles, pages, code snippets

field	illustrate	Required	article	page	code segment
slug	Link	✅	✅	✅	✅
title	title	✅	✅	✅	✅
content	content	✅	✅	✅	✅
paid	Is it paid	❌	✅	✅	✅
price	selling price	❌	✅	✅	✅
tags	Label	❌	✅	❌	✅

Label

• slug : string
• name : i18nObj
• desc : i18nObj

appendix

• slug : string
• title : i18nObj
• desc : i18nObj
• path : string
• tags : Tag[]

Paid Content Core Business Process

 graph TB
    Start([Start]) --访问付费内容-->
    check1{是否登录} --F--> free[仅免费内容可见]
    check1 --T--> check2{是否为 VIP 会员} --F-->
    check3{是否购买该内容} --F--> free
    check2 --T--> paid[可见全部内容]
    check3 --T--> paid
    paid --下载付费资源--> check4{是否购买付费资源}
    free --下载付费资源--> check4
    check4 --F--> payment[购买支付页面]
    check4 --T--> download[下载]

    download --> Stop([Stop])
    payment --> Stop

advertise

Tentatively, there are two types of ads:

• Display Google Adsense by default
• Advertising space can be paid for reservation (completed in stages)

Require

Detect the browser ad blocking plug-in. If the visitor (non-VIP user) has enabled the ad blocking plug-in, the content of the article will be prohibited from being displayed, and the ad blocking plug-in will be prompted to close instead.

System detailed design

To be perfected.

System structure design

• User module

  • register log in
  • Completion of personal information
  • Membership module

• payment module

  • Prisma Schema
  • Alipay QR code order pre-creation
  • Payment callback processing
  • Manual query to update order status

• content module

  • Sanity Schema
• Advertising module

Project code structure

 .
├── app            # 核心应用代码，下属目录酌情添加
│   ├── components    # 前端组件
│   ├── i18n    # 翻译
│   ├── layout    # 布局页面（可省，算组件也行）
│   ├── routes    # Nested 路由
│   ├── services # 后端服务，如 Cache、Prisma 等
│   └── types    # 类型定义 （不一定需要）
├── prisma        # Prisma 数据库 Schema
├── public        # Assets 静态资源
└── styles        # Tailwind CSS 源码

The project root directory will also place files for other configuration classes, such as Sanity, ESLint, Prettier configuration, etc.

Detailed design of functional modules

User module

Use the Authing service to combine registration and login, and support third-party login (such as Github, Gitee, Alipay, WeChat applet, etc.).

Detailed interface design