二维码活码全栈项目开发分析

二维码活码全栈项目开发分析

导言

活码是一个或多个二维码聚合而成的一个固定的二维码。

活码常常用于用户线下推广等用途等。活码内容支持修改,编辑,极大的方便用户使用。

于是决定自己手写一个建议的活码工具

原理

活码的原理就是通过扫描一个固定的二维码(通常是一个跳转链接),然后跳转到另一真实的二维码页面,这个页面中的二维码可以随时在后台切换。

项目介绍

  • 前端技术

    • ts+vue3+vue-router+vite+axios+qrcode(实现二维码)+vant(前端移动端组件库)
  • 后端技术

    • express+cors(处理跨域)+multer(上传图片)+mysql(连接数据库)
  • 数据

    • mysql
  • 服务器

    • 阿里云+宝塔

新建活码页面

  • 添加活码标题
  • 活码描述
  • 添加子码
  • 设置切换阈值
  • 长传logo图片

我的活码页面

  • 显示所有已经添加的活码
  • 右滑删除添加的活码
  • 左滑预览活码(非后台用户进入,进行数据统计)

数据统计

  • 统计活码总数
  • 统计子码总数
  • 统计单个活码信息详情
  • 统计单个活码子码信息详情

个人中心页面

  • 待开发哈哈哈

子码页面

  • 长按图片扫码(非后台人员进行数据统计)

代码分析

视频地址:www.bilibili.com/video/BV17z...

总结

有点意思

相关推荐
日月云棠几秒前
12 Enum —— 枚举类型的底层实现
java·后端
工位植物人几秒前
深入理解Java中的类、抽象类、接口与枚举类
后端
Asize1 分钟前
重生之我在 Vibe Coding 时代当程序员:第十一课,JS底层 :变量提升真相
前端·javascript
HYCS1 分钟前
用pixi.js实现fabric.js(五):事件系统
前端·javascript·canvas
用户2181697049302 分钟前
Gin (二) 参数 路由分组
后端
Momo__4 分钟前
Node.js 26 来了:Temporal API 默认启用,Date 终于可以退休了
前端·node.js
用户925807911485 分钟前
nacos服务注册源码浅析
后端
雨季mo浅忆8 分钟前
记录前端内网开发之新入职篇
前端·内网开发
SimonKing11 分钟前
Java程序员接入AI的另一种姿势:LangChain4j
java·后端·程序员
右耳朵猫AI19 分钟前
Rust技术周刊 2026年第20周
开发语言·后端·rust