基于小程序的任务打卡系统一、项目概述1.1 项目背景随着移动互联网轻量化应用的快速普及微信小程序凭借无需安装、即用即走、占用内存小、传播便捷的核心优势成为当下中小型业务系统、便民服务、轻量化业务场景的首选载体。传统纯原生小程序开发存在代码复用率低、工程化程度弱、后端接口管理混乱、迭代维护成本高等问题。为解决以上痛点本项目采用SpringBoot Vue前后端分离架构开发微信小程序后端基于SpringBoot实现快速开发、稳定服务、接口统一管理前端基于Vue语法结合小程序原生框架进行开发兼顾Vue的组件化、工程化优势与小程序的运行特性实现一套高效、易维护、可扩展的轻量化小程序业务系统。1.2 项目目标搭建标准化前后端分离架构实现小程序前端展示、交互逻辑与后端业务逻辑、数据存储完全解耦基于SpringBoot快速构建高可用后端服务提供统一的RESTful API接口支撑小程序所有业务功能利用Vue组件化开发思想封装通用页面、弹窗、表单、导航等组件提升前端代码复用率和开发效率实现小程序核心业务功能包括用户授权登录、数据查询、业务操作、消息提示、权限控制等搭建完善的项目开发规范、接口文档、部署流程保障项目可迭代、可维护、可商用。1.3 适用场景本项目架构适用于各类轻量化微信小程序开发场景包括便民服务小程序、校园小程序、门店营销小程序、企业内部轻应用、信息展示查询类小程序、简易预约报名类小程序等中小型业务系统。二、核心技术栈2.1 后端技术栈SpringBoot核心框架SpringBoot 2.7.x稳定版简化Spring配置、自动装配、快速构建Java后端服务内置Tomcat容器无需额外配置服务器持久层框架MyBatis-Plus 3.5.x简化CRUD操作提供通用Mapper、分页插件、条件构造器减少重复代码编写数据库MySQL 8.0开源稳定、适配性强适配中小型项目数据存储需求权限与认证JWT令牌认证实现小程序用户无状态登录、接口权限校验替代传统Session工具类Hutool、FastJSON2简化数据处理、格式转换、参数校验接口文档Knife4j基于Swagger自动生成可视化RESTful接口文档支持在线调试项目构建Maven统一项目依赖管理、版本控制、打包部署。2.2 前端技术栈Vue 小程序核心框架uni-appVue语法基于Vue3/Vue2开发一次开发、多端适配完美兼容微信小程序运行环境语法基础Vue3组合式API实现组件化、模块化开发代码结构清晰、复用性强UI组件库uView UI适配uni-app的轻量化UI库提供表单、弹窗、按钮、列表等通用组件网络请求uni.request二次封装统一请求拦截、响应拦截、超时处理、token携带、错误提示状态管理Pinia轻量化状态管理工具管理小程序全局用户信息、全局配置、页面状态开发工具微信开发者工具、VS Code支持小程序实时预览、调试、代码热更新。2.3 开发与运维工具开发工具IDEA后端、VS Code前端、微信开发者工具小程序预览发布版本控制Git Gitee/GitHub实现代码版本管理、团队协作部署环境CentOS服务器、JDK1.8、MySQL8.0、Nginx反向代理。三、系统整体架构3.1 架构模式本项目采用标准前后端分离架构完全解耦前端视图层与后端服务层前端专注页面展示、用户交互、数据渲染后端专注业务逻辑处理、数据持久化、接口服务提供双方通过HTTPJSON格式的RESTful API进行数据交互。3.2 架构分层3.2.1 前端分层小程序端视图层View页面页面、UI组件、弹窗、导航栏负责用户可视化展示和点击交互逻辑层ScriptVue业务逻辑、页面生命周期、事件处理、数据绑定网络层Request封装统一请求工具、拦截器处理接口请求、token校验、异常捕获状态层StorePinia全局状态管理存储用户登录信息、全局参数工具层Utils封装时间格式化、参数校验、缓存处理、弹窗提示等通用工具方法。3.2.2 后端分层SpringBoot端控制层Controller接收前端小程序请求定义API接口接收参数、响应数据负责请求分发业务层Service核心业务逻辑处理事务控制、数据校验、业务规则判断区分接口与实现类持久层Mapper基于MyBatis-Plus操作数据库实现数据增删改查实体层Entity数据库实体类与数据表字段一一对应工具配置层Config/Utils全局配置、拦截器配置、JWT工具、分页配置、跨域配置等。3.3 核心流程小程序用户操作页面 → 前端发起HTTP请求 → 后端跨域拦截校验 → JWT权限校验 → Controller接收请求 → Service处理业务逻辑 → Mapper操作数据库 → 数据原路返回 → 前端渲染页面数据。四、项目环境搭建4.1 开发环境要求环境/软件版本要求用途JDK1.8后端Java运行环境Maven3.6后端项目依赖构建MySQL8.0项目数据存储Node.js16.0前端项目运行、依赖安装微信开发者工具最新稳定版小程序预览、调试、上传发布IDEA/VS Code最新稳定版前后端代码开发4.2 后端环境搭建步骤创建SpringBoot项目通过IDEA初始化项目选择Spring Web、MyBatis、MySQL、Validation等核心依赖配置POM依赖引入MyBatis-Plus、Knife4j、JWT、Hutool等所需依赖统一版本管理配置全局配置文件在application.yml中配置数据库连接、端口号、项目路径、JWT过期时间、跨域配置、日志配置创建数据库新建项目专属数据库设置字符集为utf8mb4执行初始化SQL脚本创建业务数据表配置核心组件配置MyBatis-Plus分页插件、全局主键策略、跨域拦截器、JWT认证拦截器启动项目运行主启动类访问接口文档地址验证后端服务启动成功。4.3 前端环境搭建步骤创建uni-app项目通过HBuilderX或Vue脚手架创建uni-app项目选择Vue3版本安装项目依赖执行npm install安装基础依赖安装uView UI、Pinia等核心组件库封装全局请求新建request.js工具类统一封装请求地址、请求头、token携带、响应拦截、错误提示配置全局状态创建Pinia仓库管理用户登录状态、用户信息、全局配置引入通用组件注册全局弹窗、表单、加载动画、空数据展示等通用组件关联微信小程序在微信开发者工具中导入项目配置小程序AppID开启编译预览。五、项目模块详细设计5.1 后端模块设计后端采用模块化开发根据业务功能拆分核心模块结构清晰、便于迭代扩展完整项目结构如下com.xxx.miniprogram ├── config// 全局配置类│ ├──CorsConfig.java// 跨域配置│ ├──JwtConfig.java// JWT认证配置│ ├──MybatisPlusConfig.java// 分页插件配置│ └──SwaggerConfig.java// 接口文档配置├── controller// 接口控制层│ ├──UserController.java// 用户相关接口│ ├──CommonController.java// 公共通用接口│ └──BusinessController.java// 核心业务接口├── service// 业务逻辑层│ ├── impl// 业务实现类│ ├──UserService.java │ └──BusinessService.java ├── mapper// 持久层接口│ ├──UserMapper.java │ └──BusinessMapper.java ├── entity// 数据库实体类│ ├──User.java │ └──Business.java ├── dto// 数据传输对象入参/出参├── utils// 通用工具类│ ├──JwtUtil.java │ ├──ResultUtil.java │ └──ValidateUtil.java ├── exception// 全局异常处理│ ├──GlobalExceptionHandler.java │ └──BusinessException.java └──MiniprogramApplication.java// 项目启动类5.1.1 核心功能模块说明用户模块实现小程序微信授权登录、token生成与校验、用户信息新增/更新、登录状态校验、权限控制业务核心模块根据小程序核心业务实现数据新增、查询、修改、删除、分页列表查询、条件筛选等功能公共模块文件上传、数据字典、全局返回结果封装、参数校验、异常统一处理权限认证模块拦截所有接口请求校验token有效性未登录用户禁止访问核心业务接口。5.2 前端小程序模块设计前端基于uni-appVue3开发采用页面模块化、组件复用化设计项目结构如下miniprogram ├── pages// 小程序核心页面│ ├── index// 首页│ ├── user// 个人中心│ ├── business// 业务功能页面│ └── login// 授权登录页面├── components// 全局通用组件│ ├── u-dialog// 弹窗组件│ ├── u-list// 列表组件│ └── loading// 加载组件├──static// 静态资源图片、图标├── store// Pinia状态管理│ └── user.js// 用户状态管理├── utils// 前端工具类│ ├── request.js// 全局请求封装│ ├── format.js// 数据格式化│ └── common.js// 通用方法├── App.vue// 全局入口文件└── main.js// 全局配置文件5.2.1 核心页面功能登录授权页调用微信小程序授权接口获取用户头像、昵称提交后端完成登录存储本地token首页展示核心业务数据、公告信息、功能入口实现数据下拉刷新、上拉加载更多业务功能页实现用户核心操作数据提交、查询、编辑、删除等交互功能个人中心页展示用户信息、登录状态、功能设置、关于我们等辅助功能。六、数据库设计6.1 数据库设计原则遵循三范式设计字段命名规范、类型统一主键自增、逻辑删除、时间戳统一维护预留扩展字段适配业务迭代需求所有表添加创建时间、更新时间、删除标记通用字段。6.2 核心数据表设计6.2.1 用户数据表sys_user存储小程序用户基础信息关联微信唯一标识用于登录认证和用户管理字段名字段类型是否主键字段说明idbigint是用户主键IDopen_idvarchar(100)否微信用户唯一标识nick_namevarchar(50)否用户昵称avatarvarchar(255)否用户头像地址statustinyint否用户状态0禁用 1正常create_timedatetime否创建时间update_timedatetime否更新时间is_deletedtinyint否逻辑删除0未删 1已删6.2.2 业务数据表biz_data存储小程序核心业务数据可根据实际业务需求扩展字段字段名字段类型是否主键字段说明idbigint是业务主键IDuser_idbigint否关联用户IDtitlevarchar(100)否业务标题contenttext否业务内容statustinyint否业务状态create_timedatetime否创建时间update_timedatetime否更新时间is_deletedtinyint否逻辑删除七、核心接口设计项目统一采用RESTful API风格所有接口返回统一格式JSON数据请求方式规范统一接口前缀统一为 /api/miniprogram。7.1 统一返回格式{code:200,// 状态码 200成功 500失败 401未登录msg:操作成功,// 提示信息data:{}// 返回数据主体}7.2 核心接口列表接口名称请求地址请求方式是否需要Token接口说明微信授权登录/api/miniprogram/user/loginPOST否接收微信code获取用户信息返回登录token获取用户信息/api/miniprogram/user/infoGET是根据token获取当前登录用户详情业务数据列表/api/miniprogram/business/listGET是分页查询业务数据支持条件筛选新增业务数据/api/miniprogram/business/addPOST是提交新增业务数据修改业务数据/api/miniprogram/business/updatePUT是更新已有业务数据删除业务数据/api/miniprogram/business/deleteDELETE是逻辑删除指定数据八、核心功能实现详解8.1 小程序登录认证流程核心小程序端调用微信官方接口wx.login()获取临时登录code前端将code提交到后端登录接口后端通过code调用微信开放平台接口换取用户唯一openid和session_key后端根据openid查询数据库判断用户是否已注册新用户自动注册保存信息老用户直接读取信息后端生成JWT令牌返回给前端前端存储token到本地缓存后续所有请求自动携带token后端拦截器校验token有效性完成登录状态认证。8.2 全局请求拦截实现前端统一封装请求工具请求拦截器自动添加token、设置请求头响应拦截器统一捕获异常、处理登录过期、弹出错误提示无需每个页面重复处理。8.3 全局异常处理后端通过全局异常处理器统一捕获业务异常、参数异常、空指针异常统一返回友好提示信息避免前端出现500空白报错提升用户体验。九、项目部署流程9.1 后端部署IDEA执行Maven打包命令 clean package生成jar包将jar包上传至Linux服务器服务器安装JDK1.8、MySQL8.0创建数据库并执行SQL脚本执行命令启动jar包配置项目开机自启开放服务器端口配置防火墙保证接口可正常访问。9.2 前端部署修改前端全局请求地址为服务器公网IP地址微信开发者工具编译代码校验代码无误上传代码至微信小程序后台小程序后台提交审核审核通过后正式发布。十、项目优势与总结10.1 项目优势架构规范标准前后端分离架构分层清晰、模块独立符合企业级开发规范开发高效Vue组件化开发MyBatis-Plus简化CRUD大幅降低重复开发工作量安全性高JWT无状态认证、接口权限拦截、全局异常处理保障系统安全稳定扩展性强模块化设计可快速新增业务功能、适配不同小程序场景维护简单代码注释规范、接口文档自动生成、统一返回格式迭代维护成本低。10.2 项目总结本项目基于SpringBootVue搭建的小程序前后端分离系统完美结合了后端高效稳定、前端轻量化交互的优势完整实现了小程序登录认证、数据管理、业务交互等核心功能。项目结构规范、技术选型成熟、可落地性强不仅可以直接用于各类轻量化小程序的开发落地也可作为小程序前后端分离开发的标准模板支持后续持续迭代优化。十一、项目资料 精彩专栏推荐订阅 在下方专栏不然下次找不到哟《Java精品推荐项目》《springbootvue项目100套》《ssm项目100套》《微信小程序合集》