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

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

导言

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

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

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

原理

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

项目介绍

  • 前端技术

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

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

    • mysql
  • 服务器

    • 阿里云+宝塔

新建活码页面

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

我的活码页面

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

数据统计

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

个人中心页面

  • 待开发哈哈哈

子码页面

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

代码分析

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

总结

有点意思

相关推荐
木辰風几秒前
idea npm install 很慢(nodejs)
前端·npm·node.js
阿笑带你学前端几秒前
Drift数据库开发实战:类型安全的SQLite解决方案
前端·flutter
知其然亦知其所以然几秒前
MySQL8.x 面试高频题:为什么一定要有主键?99%的人答不全
后端·mysql·面试
FE_C_P小麦3 分钟前
Git 常用指令
前端·后端·github
北城笑笑3 分钟前
Server 13 ,CentOS 上使用 Nginx 部署多个前端项目完整指南( 支持多端口与脚本自动化 )
linux·服务器·前端·nginx·centos
Java陈序员4 分钟前
听歌体验直接拉满!推荐一款高颜值音乐播放器!
vue.js·docker·vite
卓伊凡5 分钟前
完整的苹果内购in-purchase实例-采用object-c语言使用苹果的Storyboard开发模式的完整购买实例
前端
用泥种荷花5 分钟前
【web音频学习(一)】音频基础
前端
Mintopia6 分钟前
Next.js自建部署:Docker + PM2 + Nginx
前端·javascript·全栈
艾小码8 分钟前
还在重复造轮子?3个Vue3组合函数让你开发效率翻倍!
前端·javascript·vue.js