零基础上手yshop-drink全场景部署指南：从环境搭建到生产调优

2026-04-30 11:12:32作者：钟日瑜

yshop意象点餐(扫码点餐)系统，在线点餐(外卖与自取)小程序模式，支持多门店模式，支持saas多租户模式，基础技术Java17+sprringboot3+vue3+uniapp(vue3)（支持H5、微信小程序）采用当前流行技术组合的前后端分离点餐系统： SpringBoot3、Spring Security OAuth2、MybatisPlus、SpringSecurity、jwt、redis、Vue3的前后端分离的系统

项目地址：https://gitcode.com/gh_mirrors/ys/yshop-drink

副标题：yshop-drink从环境搭建到生产部署的实战指南

技术栈速览

模块	技术选型	核心优势
后端框架	SpringBoot3	基于Java17的新一代微服务框架，支持响应式编程
安全认证	Spring Security OAuth2 + JWT（JSON Web Token）	支持多端统一认证，令牌化身份验证
前端框架	Vue3	采用Composition API，性能优化的渐进式框架
移动端	uni-app (Vue3)	一套代码编译多端（微信小程序/H5）
数据库	MySQL	关系型数据库，稳定支持事务和复杂查询
缓存	Redis	高性能键值存储，提升系统响应速度
ORM	MyBatis-Plus	简化CRUD操作，内置分页插件

一、环境准备

1.1 开发环境要求

JDK 17+（推荐Amazon Corretto 17）
Maven 3.8+（依赖管理工具）
Node.js 16+（前端环境）
MySQL 8.0+（数据库服务）
Redis 6.2+（缓存服务）
Git（版本控制工具）

1.2 项目获取

# 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/ys/yshop-drink
cd yshop-drink

1.3 数据库准备

创建数据库：

CREATE DATABASE yshop_drink CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

导入初始化脚本：

# 进入SQL脚本目录
cd yshop-drink-boot3/sql
# 使用mysql命令导入
mysql -u root -p yshop_drink < yixiang-drink-open.sql

⚠️ 注意：导入过程中若出现"unknown collation"错误，需检查数据库版本是否兼容utf8mb4_unicode_ci排序规则。

二、核心服务部署

2.1 后端服务配置与启动

配置数据库连接：

# 文件路径：yshop-drink-boot3/yshop-server/src/main/resources/application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/yshop_drink?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false
    username: root  # 替换为实际数据库用户名
    password: 123456  # 替换为实际数据库密码
  redis:
    host: localhost
    port: 6379

项目打包：

# 返回项目根目录
cd ../../..
# 使用Maven打包（跳过测试）
mvn clean install package '-Dmaven.test.skip=true'

此命令会编译所有模块并生成可执行JAR文件，跳过测试阶段以加快构建速度

启动服务：

cd yshop-server/target
java -jar yshop-server.jar

2.2 后台前端部署

安装依赖：

cd yshop-drink-vue3
pnpm install

推荐使用pnpm而非npm，可显著提升依赖安装速度和版本一致性

配置API地址：

# 文件路径：yshop-drink-vue3/.env.development
VUE_APP_API_URL=http://localhost:8080/api

启动开发服务器：

npm run dev

访问后台：打开浏览器访问 http://localhost:3000，默认账号密码为admin/123456

三、多端启动

3.1 移动端部署（uni-app）

使用HBuilderX导入项目：
- 打开HBuilderX → 导入 → 选择yshop-drink-uniapp-vue3目录
配置API地址：

// 文件路径：yshop-drink-uniapp-vue3/config/index.js
module.exports = {
  baseUrl: {
    dev: 'http://localhost:8080/api',  // 开发环境API
    prod: 'https://api.yourdomain.com/api'  // 生产环境API
  }
}

运行方式：
- 微信小程序：连接微信开发者工具，运行 → 运行到小程序模拟器 → 微信开发者工具
- H5：运行 → 运行到浏览器

3.2 设备兼容性参考

平台	最低版本要求	适配状态
微信小程序	基础库 2.21.0+	完全适配
H5	Chrome 80+、Safari 14+	完全适配
Android	Android 8.0+	完全适配
iOS	iOS 12.0+	完全适配

四、配置优化

4.1 生产环境配置

后端生产配置：

# 文件路径：yshop-drink-boot3/yshop-server/src/main/resources/application-prod.yml
server:
  port: 8080
  compression:
    enabled: true  # 开启Gzip压缩
spring:
  datasource:
    hikari:
      maximum-pool-size: 20  # 数据库连接池大小
  redis:
    timeout: 2000ms
logging:
  level:
    root: WARN  # 生产环境日志级别调整为WARN

前端生产构建：

cd yshop-drink-vue3
npm run build

构建产物位于dist目录，可部署至Nginx或CDN

4.2 性能调优建议

数据库优化：为常用查询添加索引，特别是订单表和商品表
缓存策略：热门商品信息缓存至Redis，设置合理的过期时间
静态资源：前端资源使用CDN加速，图片进行压缩处理
JVM参数：生产环境建议配置：-Xms2g -Xmx2g -XX:+UseG1GC

五、常见问题诊断

Q1: 后端启动时报数据库连接错误？

A: 检查application.yml中的数据库URL、用户名和密码是否正确，确保MySQL服务正常运行，可通过telnet localhost 3306测试端口连通性。

Q2: 前端访问API出现跨域错误？

A: 确认后端是否配置了CORS（跨域资源共享），检查yshop-framework/yshop-spring-boot-starter-web模块中的跨域配置类。

Q3: 小程序端无法获取用户信息？

A: 检查微信开发者工具中的AppID配置是否正确，确保小程序已添加"获取用户信息"权限，后端接口是否正确配置了微信登录相关参数。

扩展阅读

SpringBoot3官方文档：了解更多关于SpringBoot3的新特性和配置方式
Vue3组合式API指南：掌握Vue3的核心编程模式
uni-app多端开发实战：深入学习跨端应用开发技巧
Redis缓存最佳实践：优化系统性能的缓存策略设计

通过以上步骤，您已完成yshop-drink项目从环境搭建到生产部署的全过程。该系统支持多门店管理、会员积分、订单跟踪等核心功能，可根据实际业务需求进行二次开发和定制。

yshop-drink