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

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

导言

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

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

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

原理

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

项目介绍

  • 前端技术

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

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

    • mysql
  • 服务器

    • 阿里云+宝塔

新建活码页面

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

我的活码页面

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

数据统计

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

个人中心页面

  • 待开发哈哈哈

子码页面

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

代码分析

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

总结

有点意思

相关推荐
不法16 分钟前
uniapp map地图导航/地图路线
前端·vue.js·uni-app
星栈33 分钟前
LiveView 页面越写越卡,我最后抓到的凶手不是数据库,是我自己乱塞 `assigns`
前端·前端框架·elixir
不能放弃治疗37 分钟前
rule 和 skill
后端
ADIT40 分钟前
一、反射的定义与原理
后端
Csvn1 小时前
Python 开发技巧:标准库深度挖掘
后端·python
没落英雄1 小时前
6. 从零搭建一个 AI Agent —— 构建 Web 前端,让用户能和 agent 实时交互
前端·人工智能·架构
山东点狮信息科技有限公司1 小时前
SpringBoot+VUE3,一套系统完成OA+HRM+CRM+MES+合同+项目管理 —— 深度解析点狮全业务管理平台
java·spring boot·后端
爱勇宝1 小时前
《道德经》第4章,老子写得很像在描述一个“底层系统”。
前端·后端·程序员