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

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

导言

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

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

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

原理

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

项目介绍

  • 前端技术

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

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

    • mysql
  • 服务器

    • 阿里云+宝塔

新建活码页面

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

我的活码页面

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

数据统计

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

个人中心页面

  • 待开发哈哈哈

子码页面

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

代码分析

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

总结

有点意思

相关推荐
考虑考虑4 小时前
cmd局部设置java变量
运维·后端·自动化运维
benbenAItalk4 小时前
数字人口播视频的批量生产实践:素材规范、任务编排与质量验收
java·前端·音视频
2601_962885725 小时前
如何用 Python 扫描 A 股跳空缺口并统计缺口回补概率?
java·前端·python
西瓜太郎12345 小时前
Claude Code、Codex CLI、Gemini CLI 能否共用一枚 Key?先看协议选择矩阵
前端·api 网关·claude code·gemini cli·codex cli
陈随易7 小时前
在Finch用了62亿词元,我认为这是新一代Agent工具之神
前端·人工智能·后端
水域安全老周7 小时前
水趣钓鱼救生衣专利拆解:两级锁紧如何解决落水人衣分离
java·前端·网络
计算机魔术师8 小时前
Anthropic CEO突然喊踩刹车,OpenAI罕见力挺:AI这辆车不能只踩油门了
前端
wing988 小时前
从codex转战workbuddy使用一周的感受
前端·人工智能·后端
EatFan8 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
梦想平凡9 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理