整体说明​ SpringBoot3后端服务提供 RESTful 接口对接微信开放平台、操作数据库、鉴权、支付、文件存储​ Vue3 VitePC 运营管理后台管理员操作​ 微信小程序原生 /uni-app用户移动端共用同一套后端接口后端 SpringBoot3 技术栈1.基础信息 java17类、接口、泛型、Stream、函数式、异常、IOMavenSpringBoot3推荐MavenMySQL8.0CRUD、联表查询、索引、事务、分页SQL工具NavicatHTTP基础、JSON、接口请求调试ApiPost/Postman2.核心框架/核心组件 1SpringBoot3.xSpringMVC6接收小程序/Vue前端请求、统一接口封装 配置文件 application.yml 2ORM持久层MyBatis-Plus3.5.xCRUD、分页、条件构造器、逻辑删除Druid1.2.x 连接池监控、防SQL注入 3工具类/简化开发LombokData、Slf4j、简化实体Hutool微信接口调用、加密、日期、文件、HTTP请求Validation参数校验NotBlank、Pattern等全局校验异常处理 4接口文档Knife4j4.x 5鉴权登录JWTjjwt0.11.5无状态 token小程序本地存储 token 请求接口Sa-Token轻量化认证授权框架、SpringSecurity6重型企业级全栈安全框架)6跨域处理CrossOrigin、全局CORS配置解决Vue、小程序跨域报错 7Redis必学缓存中间件SpringDataRedis3.x 用途缓存用户信息、token 黑名单、验证码、热点商品、分布式锁 8微信小程序专用依赖核心WxJava工具包封装小程序登录、订阅消息、微信支付V3code2session 解密 openid、session_key 获取用户手机号、头像昵称 微信支付V3回调处理、退款、订单 9文件存储MinIO/阿里云OSS小程序、Vue后台上传图片 10日志/全局处理LogbackSpringBoot3默认日志 全局异常处理器、统一返回结果ResultT11进阶中间件可选项目上线用RabbitMQ异步订单、消息推送XXL-Job定时任务后端常用功能模块实战必须做PC 管理员账号登录账号密码 JWT小程序微信一键登录code 换取 openid用户权限区分管理员 / 小程序普通用户商品 / 分类 / 订单 CRUD、分页、条件筛选文件图片上传、图片预览微信支付、支付回调、订单状态更新小程序订阅消息推送数据统计接口给 Vue 后台图表使用PC 管理前端Vue3 Vite1.前置基础 HTML CSS ES6/ES7Promise、async/await、解构、模块化 2.核心技术/组件库 1构建工具Vite比 webpack 快Vue3 标配 2Vue3核心API Composition APIsetup、ref、reactive、computed、watch 生命周期、自定义组件、props、emit 3路由Vue Router 4 路由守卫未登录拦截、权限路由 动态菜单后端返回权限菜单渲染侧边栏 4状态管理PiniaVue3 官方推荐替代 Vuex 存储登录 token、用户信息、角色权限 5请求库Axios 请求拦截统一携带 token 响应拦截统一处理错误码、弹窗提示 6UI 组件库Element PlusVue3 主流后台 UI 高频组件Table 表格、Pagination 分页、Form 表单、Dialog 弹窗、Upload 上传、Select 下拉、Tree 树形菜单、Message 弹窗提示 7辅助组件/工具 ECharts后台数据可视化图表销量、用户统计 WangEditor/TinyMCE富文本编辑器商品详情 xlsxExcel 导入导出 dayjs日期格式化Vue 后台标准页面登录页、首页仪表盘、商品管理、订单管理、用户管理、分类管理、上传图片、数据统计、角色权限管理微信小程序一原生微信小程序纯小程序语法轻量1. 基础语法 WXML标签、WXSS样式、JS、页面 json 配置 Page 页面生命周期、Component 组件生命周期 2. 核心API wx.request网络请求封装统一请求携带 token 调用 SpringBoot3 接口 wx.login获取 code 传给后端换取 openid wx.uploadFile上传图片到后端 OSS wx.requestPayment调起微信支付 wx.setStorageSync/wx.getStorageSync本地缓存 token 交互wx.showToast、wx.showModal、wx.showLoading 3. UI 组件库Vant Weapp原生小程序最佳 UI 常用轮播、商品卡片、下拉筛选、弹窗、表单、分页、标签栏 4. 优化技术 分包加载、图片懒加载、自定义 tabbar二uni-app推荐复用 Vue3 语法一套多端1. 开发工具HBuilderX 2. 优势完全 Vue3 语法一套代码编译微信小程序 / H5/App学习成本低 3. UI 库uView UIuni-app 生态最强组件库 4. 语法复用直接使用 Vue3 的 ref、import、async/await不用重新学小程序原生语法小程序通用页面商城示例首页轮播、商品列表、商品详情、购物车、订单结算、我的页面、地址管理