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

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

导言

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

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

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

原理

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

项目介绍

  • 前端技术

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

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

    • mysql
  • 服务器

    • 阿里云+宝塔

新建活码页面

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

我的活码页面

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

数据统计

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

个人中心页面

  • 待开发哈哈哈

子码页面

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

代码分析

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

总结

有点意思

相关推荐
这是个栗子3 小时前
【问题解决】npm包下载速度慢
前端·npm·node.js
Komorebi_99993 小时前
数组和对象的深拷贝和浅拷贝的方法
前端·web
weixin_584121433 小时前
vue3+ts+elementui-表格根据相同值合并
前端·javascript·elementui
吃手机用谁付的款4 小时前
HTML常见标签
前端·html
好好研究4 小时前
CSS样式中的布局、字体、响应式布局
前端·css
拉不动的猪5 小时前
前端小白之 CSS弹性布局基础使用规范案例讲解
前端·javascript·css
伍哥的传说5 小时前
React强大且灵活hooks库——ahooks入门实践之开发调试类hook(dev)详解
前端·javascript·react.js·ecmascript·hooks·react-hooks·ahooks
界面开发小八哥6 小时前
界面控件Kendo UI for Angular 2025 Q2新版亮点 - 增强跨设备的无缝体验
前端·ui·界面控件·kendo ui·angular.js
midsummer_woo6 小时前
基于springboot+vue+mysql的中药实验管理系统设计与实现(源码+论文+开题报告)
vue.js·spring boot·mysql
枷锁—sha7 小时前
从零掌握XML与DTD实体:原理、XXE漏洞攻防
xml·前端·网络·chrome·web安全·网络安全