前言

做校园 / 同城社交类产品时，「匿名纸条 + 随机匹配 + 联系申请」是很常见也很有意思的玩法。最近把 扩列小纸条 的 前端代码 开源了，包含 H5 用户端 和 管理后台 两部分，适合学习 Vue 3 移动端项目结构，也可以对接自己的后端做二次开发。

在线体验（建议微信内打开）： https://h5.aisoui.com/

---

项目简介

扩列小纸条 是一款面向校园、同城社交场景的匿名纸条扩列产品。用户可以发布纸条、按性别随机抽取他人纸条、申请查看联系方式；墙主（校园墙运营者）可以推广引流；平台方通过管理后台完成审核与运营配置。

本次开源的是 完整前端工程，后端 API 需自行实现或对接兼容接口。

模块	目录	说明
H5 用户端	web/	抽纸条、发布、联系申请、墙主中心等
管理后台	admin/web/	用户 / 纸条 / 订单 / 提现 / 站点配置等

---

核心功能

H5 用户端

• 微信内 H5 适配：OAuth 登录、用户须知、个人资料与性别设置
• 抽纸条：校园 / 社会双频道，按性别匹配；支持免费次数与付费抽取（由后端配置）
• 发布纸条：正文、标签、城市 / 学校、多图上传、微信号加密展示
• 联系机制：抽中后可申请联系；作者可同意 / 拒绝；支持「需审核后才可见微信号」
• 我的纸条 / 抽中记录：历史发布与抽中列表、详情与图片预览
• 消息中心：收到的联系申请处理
• 墙主中心：推广二维码、邀请数据、佣金与提现
• 墙主入驻：在线申请，管理后台审核开通

管理后台

• 数据概览：用户、纸条、订单、待审数量统计
• 用户管理：搜索、封禁 / 解封、抽中记录、联系申请记录
• 纸条管理：审核通过 / 拒绝、公开 / 隐藏、后台代发 / 编辑、图片上传
• 墙主申请：审核通过 / 拒绝
• 订单管理：会员、抽卡、发布等订单列表
• 提现记录：墙主提现审核与状态跟踪
• 站点设置：域名、CORS、抽卡 / 发布定价、墙主奖励等业务开关

---

技术栈

层级	技术
H5 / Admin 前端	Vue 3、Vite 5、Vue Router 4、Tailwind CSS 3
通信方式	REST API（/api/v1/*）
构建工具	Vite
样式方案	Tailwind CSS

整体采用 Vue 3 Composition API + Vite，开发体验流畅，H5 端针对微信浏览器做了 OAuth、JSAPI 支付等环境适配。

---

项目结构

little-note/
├── web/                 # H5 用户端（开源）
├── admin/
│   └── web/             # 管理后台前端（开源）
├── docs/
│   └── images/          # README 截图等资源
└── README.md

H5 端主要页面路由：

路径	说明
/	首页抽纸条（校园 / 社会）
/publish	发布纸条
/messages	联系申请收件箱
/me	个人中心
/my-notes	我发布的纸条
/drawn-notes	抽中记录
/merchant	墙主中心
/merchant/apply	墙主入驻申请
/merchant/login	墙主登录

---

快速开始

环境要求

• Node.js 18+
• npm 或 pnpm
• 可访问的后端 API（自行实现兼容接口即可）

1. 启动 H5 用户端

git clone https://gitee.com/mtq851/little-note.git
cd little-note/web
npm install
npm run dev

默认开发地址：http://localhost:5173

开发环境会将 /api、/uploads 代理到 http://localhost:16666，可在 web/vite.config.js 中修改。

2. 启动管理后台

cd admin/web
npm install
npm run dev

默认开发地址：http://localhost:5174/admin/

3. 对接后端

前端默认请求同源 /api/v1/*。生产环境通常由 Nginx 将 API 反代到后端服务：

• H5：https://h5.example.com
• 管理后台：https://h5.example.com/admin/
• API：https://api.example.com 或与 H5 同域 /api

API 路径定义可参考：

• H5：web/src/api/
• 管理后台：admin/web/src/api/

没有现成后端时，可以根据上述 API 模块自行 Mock，或实现兼容接口。

---

生产构建

# H5
cd web && npm run build
# 产物：web/dist/

# 管理后台
cd admin/web && npm run build
# 产物：admin/web/dist/，部署到 /admin/ 路径下

---

界面预览

H5 用户端：

• 首页抽纸条
  

• 发布纸条
  

• 抽中记录
  

• 墙主中心
  

管理后台：

• 数据概览
  

• 用户管理
  

• 纸条审核
  

• 墙主申请
  

• 订单 / 提现
  
  

• 站点设置
  

---

开源协议

前端代码（web/、admin/web/）采用 MIT License，可自由学习、修改与二次开发。

使用本前端连接第三方或自研后端时，请自行遵守微信平台及相关法律法规。

---

仓库地址

• Gitee：https://gitee.com/mtq851/little-note
• 在线体验：https://h5.aisoui.com/（微信内打开效果更佳）

---

写在最后

如果你正在找一套 Vue 3 移动端 H5 + 运营后台 的完整前端参考，或者想做一个类似的「匿名纸条 / 扩列」类产品，欢迎 Star 和 Fork。

有问题可以在仓库提 Issue，也欢迎 PR 一起完善文档和体验。