安装指南

重要前置服务

在开始部署之前，请务必完成以下腾讯云服务的开通和配置：

腾讯云对象存储（COS）：用于存储用户上传的图片等媒体文件
- 创建存储桶
- 配置访问权限
- 获取SecretId和SecretKey
腾讯云数据万象内容审核服务：用于审核图片和文本内容的安全性
- 开通内容审核功能
- 配置审核策略
- 获取审核策略ID（可选）

环境要求

后端环境

Java 8 (OpenJDK 1.8)
Maven 3.6+
MySQL 5.7+
Redis
Elasticsearch（必需，用于搜索功能）
腾讯云COS（必需，用于文件存储）
腾讯云数据万象内容审核服务（必需，用于图片和文本内容安全审核）

前端环境

Node.js 22+
npm 或 yarn
Vite（构建工具）

后端部署

重要前提条件

在部署后端服务之前，您需要：

开通腾讯云对象存储（COS）服务
开通腾讯云数据万象内容审核服务
获取COS的SecretId、SecretKey和存储桶信息
配置内容审核策略（可选，但推荐）

1. 克隆项目

bash

git clone <repository-url>
cd 后端

2. 配置数据库

创建数据库并执行SQL脚本：

sql

CREATE DATABASE yuemupicture CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE yuemupicture;
-- 执行项目中的 sql/create_table.sql 脚本

3. 配置文件

修改 src/main/resources/application.yml 文件中的各项配置。项目采用多环境配置模式，支持开发(dev)、测试(test)和生产(prod)环境。

主配置文件 (application.yml)

yaml

spring:
  profiles:
    active: dev  # 指定激活的环境配置(dev/test/prod)

# 上传路径配置
app:
  upload:
    path: ${user.dir}/upload/app  # 使用项目根目录下的 upload/app 目录

# 推荐分数配置
recommend:
  # 增量更新限流配置
  increment:
    max-size: 500  # 单次增量处理最大数量，避免过载
  # 新图片优先级配置
  new:
    picture:
      hours: 24  # 24小时内的新图片优先更新
  # 核心权重配置（无随机）
  score:
    view: 0.10
    like: 0.10
    comment: 0.10
    share: 0.05
    time-weight: 0.55  # 提升时间权重，强化新内容优先级
    time-decay: 0.02   # 时间衰减率，越小分数越稳定
    smooth:
      alpha: 0.7       # 分数平滑系数（旧分数权重）
    new-bonus: 1.8     # 新图片额外加分倍数

# Netty WebSocket配置
netty:
  websocket:
    port: 8124  # WebSocket服务端口
    boss-threads: 1  # boss线程数
    worker-threads: 0  # worker线程数，0表示使用默认值（CPU核心数 * 2）
    max-frame-size: 65536  # 最大帧大小
    use-epoll: false  # 是否使用epoll（仅在Linux系统下有效）
    heartbeat:
      enabled: true  # 是否启用心跳检测
      interval: 30  # 心跳间隔（秒）
      timeout: 60  # 心跳超时时间（秒）

# 知识库初始化配置
knowledge:
  txt:
    # resources下TXT扫描目录
    scan-path: classpath:knowledge/
    # 文本分块大小（字符）
    chunk-size: 500
    # ES向量索引名
    es-index: txt_knowledge_base
    # TXT文件MD5记录索引（防重复初始化）
    init-record-index: txt_kb_init_record

# RAG基础配置
rag:
  # 检索配置
  retrieval:
    # 检索TOP数量
    top-k: 3
    # 相似度阈值
    similarity-threshold: 0.7
  # 增强配置
  augmentation:
    # 最大上下文轮数
    max-context-rounds: 8
    # Prompt最大字符数
    max-prompt-length: 3000
  # 生成配置
  generation:
    temperature: 0.6
    max-tokens: 3000

开发环境配置 (application-dev.yml)

注意：腾讯云COS相关配置如下，其中audit-biz-type和text-audit-biz-type为内容审核策略类型，如需启用内容审核功能，请在腾讯云控制台配置审核策略并填入对应策略ID：

yaml

server:
  port: 8123  # 服务器端口
  servlet:
    context-path: /api  # API上下文路径
    # cookie 30 天过期
    session:
      cookie:
        max-age: 2592000
  tomcat:
    max-threads: 200
    min-spare-threads: 10
    max-connections: 1000
    accept-count: 100
    connection-timeout: 20000

spring:
  ai:
    deepseek:
      apiKey: YOUR_DEEPSEEK_API_KEY  # 替换为您的DeepSeek API密钥
      apiUrl: https://api.deepseek.com/v1/chat/completions
      model: deepseek-chat
      temperature: 0.7
      maxTokens: 3000
  servlet:
    multipart:
      max-file-size: 10MB
    # 数据库配置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/yuemu_picture?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true
    username: root
    password: YOUR_MYSQL_PASSWORD  # 替换为您的MySQL密码
  # Redis 配置
  redis:
    database: 10
    host: 127.0.0.1
    port: 6379
    password: YOUR_REDIS_PASSWORD  # 替换为您的Redis密码
    lettuce:
      pool:
        max-active: 100
        max-idle: 8
        min-idle: 2
        max-wait: 1000
      shutdown-timeout: 100ms
  elasticsearch:
    connection-timeout: 5000
    uris: http://localhost:9201
    socket-timeout: 60000
    sync:
      batch:
        size: 1000
      alert:
        interval: 1800000
      retry:
        times: 3
        interval: 5000
      picture:
        enable: true
      user:
        enable: true
      post:
        enable: true
      space:
        enable: true
      incremental:
        random:
          delay:
            max: 30
  # Session 配置
  session:
    store-type: redis
    # session 30 天后过期
    timeout: 2592000

  #  邮箱
  mail:
    from: YOUR_EMAIL_ADDRESS  # 替换为您的邮箱地址
    password: YOUR_EMAIL_PASSWORD  # 替换为您的邮箱密码或授权码
    host: smtp.qq.com
    port: 465
    admin: ADMIN_EMAIL_ADDRESS  # 替换为管理员邮箱地址

  # 空间图片分表
  shardingsphere:
    datasource:
      names: yuemu_picture
      yuemu_picture:
        type: com.zaxxer.hikari.HikariDataSource
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/yuemu_picture
        username: root
        password: YOUR_MYSQL_PASSWORD  # 替换为您的MySQL密码
    rules:
      sharding:
        tables:
          picture:
            actual-data-nodes: yuemu_picture.picture # 动态分表
            table-strategy:
              standard:
                sharding-column: spaceId
                sharding-algorithm-name: picture_sharding_algorithm  # 使用自定义分片算法
        sharding-algorithms:
          picture_sharding_algorithm:
            type: CLASS_BASED
            props:
              strategy: standard
              algorithmClassName: com.lumenglover.yuemupicturebackend.manager.sharding.PictureShardingAlgorithm
    props:
      sql-show: true
  data:
    redis:
      timeout: 5000

mybatis-plus:
  configuration:
    # MyBatis 配置
    map-underscore-to-camel-case: false
    # 仅在开发环境打印日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    enable-sql-runner: true
    db-config:
      logic-delete-field: isDelete # 全局逻辑删除的实体字段名
      logic-delete-value: 1 # 逻辑已删除值（默认为 1）
      logic-not-delete-value: 0 # 逻辑未删除值（默认为 0)

# 接口文档配置
knife4j:
  enable: true
  production: false
  basic:
    enable: true
    username: YOUR_KNIFE4J_USERNAME  # 替换为您的Knife4j用户名
    password: YOUR_KNIFE4J_PASSWORD  # 替换为您的Knife4j密码
  openapi:
    title: 悦木图片管理系统 - API接口文档
    description: 基于SpringBoot + Vue3开发的图片管理系统，提供图片上传、管理、分享、搜索等完整功能的RESTful API接口文档
    version: v1.0.0
    group:
      default:
        api-rule: package
        api-rule-resources:
          - com.lumenglover.yuemupicturebackend.controller

## 对象存储配置（需要从腾讯云获取）
cos:
  client:
    enable: true
    duration: 1800
    host: https://YOUR_BUCKET_NAME.cos.ap-chongqing.myqcloud.com  # 替换为您的COS域名
    secretId: YOUR_COS_SECRET_ID  # 替换为您的COS SecretId
    secretKey: YOUR_COS_SECRET_KEY  # 替换为您的COS SecretKey
    region: ap-chongqing
    bucket: YOUR_BUCKET_NAME  # 替换为您的COS存储桶名称
    admin-email: ADMIN_EMAIL_ADDRESS  # 替换为管理员邮箱地址
    audit-biz-type: ""  # 图片审核策略类型，可选配置
    text-audit-biz-type: ""  # 文本审核策略类型，可选配置
    custom-domain: https://YOUR_CUSTOM_DOMAIN  # 替换为您的自定义域名

# 阿里云 AI 配置
aliYunAi:
  apiKey: YOUR_ALIYUN_API_KEY  # 替换为您的阿里云AI API密钥

生产环境配置 (application-prod.yml)

注意：腾讯云COS相关配置如下，其中audit-biz-type和text-audit-biz-type为内容审核策略类型，生产环境中建议启用内容审核功能以确保平台内容安全：

yaml

server:
  port: 8080
  servlet:
    context-path: /
    # cookie 30 天过期
    session:
      cookie:
        max-age: 2592000
  tomcat:
    max-threads: 200
    min-spare-threads: 10
    max-connections: 1000
    accept-count: 100
    connection-timeout: 20000
spring:
  ai:
    deepseek:
      apiKey: YOUR_DEEPSEEK_API_KEY  # 替换为您的DeepSeek API密钥
      apiUrl: https://api.deepseek.com/v1/chat/completions
      model: deepseek-chat # 选择模型（V3：deepseek-chat  R1：deepseek-reasoner）
      temperature: 0.7
      maxTokens: 3000
  servlet:
    multipart:
      max-file-size: 10MB
    # 数据库配置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://YOUR_MYSQL_HOST:3306/yuemu_picture?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true  # 替换为您的MySQL主机地址
    username: root
    password: YOUR_MYSQL_PASSWORD  # 替换为您的MySQL密码
    hikari:
      maximum-pool-size: 100
      minimum-idle: 5
      idle-timeout: 300000
      connection-timeout: 20000
      max-lifetime: 1200000
  # Redis 配置
  redis:
    database: 6
    host: YOUR_REDIS_HOST  # 替换为您的Redis主机地址
    port: 6379
    password: YOUR_REDIS_PASSWORD  # 替换为您的Redis密码
    timeout: 5000
    lettuce:
      pool:
        max-active: 100
        max-idle: 8
        min-idle: 2
        max-wait: 1000
      shutdown-timeout: 100ms

  # Elasticsearch 配置
  elasticsearch:
    uris: http://YOUR_ES_HOST:9200  # 替换为您的Elasticsearch主机地址
    username: elastic
    password: YOUR_ES_PASSWORD  # 替换为您的Elasticsearch密码
    connection-timeout: 5000
    socket-timeout: 60000
    sync:
      batch:
        size: 1000
      alert:
        interval: 1800000
      retry:
        times: 3
        interval: 5000
      picture:
        enable: true
      user:
        enable: true
      post:
        enable: true
      space:
        enable: true
      incremental:
        random:
          delay:
            max: 30

  #  邮箱
  mail:
    from: YOUR_EMAIL_ADDRESS  # 替换为您的邮箱地址
    password: YOUR_EMAIL_PASSWORD  # 替换为您的邮箱密码或授权码
    host: smtp.qq.com
    port: 465
    admin: ADMIN_EMAIL_ADDRESS  # 替换为管理员邮箱地址

  # Session 配置
  session:
    store-type: redis
    # session 30 天后过期
    timeout: 2592000

  # 空间图片分表
  shardingsphere:
    datasource:
      names: yuemu_picture
      yuemu_picture:
        type: com.zaxxer.hikari.HikariDataSource
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/yuemu_picture
        username: root
        password: YOUR_MYSQL_PASSWORD  # 替换为您的MySQL密码
    rules:
      sharding:
        tables:
          picture:
            actual-data-nodes: yuemu_picture.picture # 动态分表
            table-strategy:
              standard:
                sharding-column: spaceId
                sharding-algorithm-name: picture_sharding_algorithm  # 使用自定义分片算法
        sharding-algorithms:
          picture_sharding_algorithm:
            type: CLASS_BASED
            props:
              strategy: standard
              algorithmClassName: com.lumenglover.yuemupicturebackend.manager.sharding.PictureShardingAlgorithm
    props:
      sql-show: true

mybatis-plus:
  configuration:
    # MyBatis 配置
    map-underscore-to-camel-case: false
    # 在生产环境中关闭日志
    log-impl: org.apache.ibatis.logging.nologging.NoLoggingImpl
  global-config:
    enable-sql-runner: true
    db-config:
      logic-delete-field: isDelete # 全局逻辑删除的实体字段名
      logic-delete-value: 1 # 逻辑已删除值（默认为 1）
      logic-not-delete-value: 0 # 逻辑未删除值（默认为 0）
# 接口文档配置
knife4j:
  enable: true
  production: false
  basic:
    enable: true
    username: YOUR_KNIFE4J_USERNAME  # 替换为您的Knife4j用户名
    password: YOUR_KNIFE4J_PASSWORD  # 替换为您的Knife4j密码
  openapi:
    title: 悦木图片管理系统 - API接口文档
    description: 基于SpringBoot + Vue3开发的图片管理系统，提供图片上传、管理、分享、搜索等完整功能的RESTful API接口文档
    version: v1.0.0
    group:
      default:
        api-rule: package
        api-rule-resources:
          - com.lumenglover.yuemupicturebackend.controller

## 对象存储配置（需要从腾讯云获取）
cos:
  client:
    enable: true
    duration: 1800
    host: https://YOUR_BUCKET_NAME.cos.ap-chongqing.myqcloud.com  # 替换为您的COS域名
    secretId: YOUR_COS_SECRET_ID  # 替换为您的COS SecretId
    secretKey: YOUR_COS_SECRET_KEY  # 替换为您的COS SecretKey
    region: ap-chongqing
    bucket: YOUR_BUCKET_NAME  # 替换为您的COS存储桶名称
    admin-email: ADMIN_EMAIL_ADDRESS  # 替换为管理员邮箱地址
    audit-biz-type: ""  # 图片审核策略类型，可选配置
    text-audit-biz-type: ""  # 文本审核策略类型，可选配置
    custom-domain: https://YOUR_CUSTOM_DOMAIN  # 替换为您的自定义域名

# 阿里云 AI 配置
aliYunAi:
  apiKey: YOUR_ALIYUN_API_KEY  # 替换为您的阿里云AI API密钥

logging:
  config: classpath:logback-spring.xml

测试环境配置 (application-test.yml)

yaml

server:
  port: 8080
  servlet:
    context-path: /
    # cookie 30 天过期
    session:
      cookie:
        max-age: 2592000
  tomcat:
    max-threads: 200
    min-spare-threads: 10
    max-connections: 1000
    accept-count: 100
    connection-timeout: 20000
spring:
  ai:
    deepseek:
      apiKey: YOUR_DEEPSEEK_API_KEY  # 替换为您的DeepSeek API密钥
      apiUrl: https://api.deepseek.com/v1/chat/completions
      model: deepseek-chat # 选择模型（V3：deepseek-chat  R1：deepseek-reasoner）
      temperature: 0.7
      maxTokens: 3000
  servlet:
    multipart:
      max-file-size: 10MB
    # 数据库配置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://YOUR_MYSQL_HOST:3306/yuemu_picture?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true  # 替换为您的MySQL主机地址
    username: root
    password: YOUR_MYSQL_PASSWORD  # 替换为您的MySQL密码
    hikari:
      maximum-pool-size: 100
      minimum-idle: 5
      idle-timeout: 300000
      connection-timeout: 20000
      max-lifetime: 1200000
  # Redis 配置
  redis:
    database: 6
    host: YOUR_REDIS_HOST  # 替换为您的Redis主机地址
    port: 6379
    password: YOUR_REDIS_PASSWORD  # 替换为您的Redis密码
    timeout: 5000
    lettuce:
      pool:
        max-active: 100
        max-idle: 8
        min-idle: 2
        max-wait: 1000
      shutdown-timeout: 100ms

  # Elasticsearch 配置
  elasticsearch:
    uris: http://YOUR_ES_HOST:9200  # 替换为您的Elasticsearch主机地址
    username: elastic
    password: YOUR_ES_PASSWORD  # 替换为您的Elasticsearch密码
    connection-timeout: 5000
    socket-timeout: 60000
    sync:
      batch:
        size: 1000
      alert:
        interval: 1800000
      retry:
        times: 3
        interval: 5000
      picture:
        enable: true
      user:
        enable: true
      post:
        enable: true
      space:
        enable: true
      incremental:
        random:
          delay:
            max: 30

  #  邮箱
  mail:
    from: YOUR_EMAIL_ADDRESS  # 替换为您的邮箱地址
    password: YOUR_EMAIL_PASSWORD  # 替换为您的邮箱密码或授权码
    host: smtp.qq.com
    port: 465
    admin: ADMIN_EMAIL_ADDRESS  # 替换为管理员邮箱地址

  # Session 配置
  session:
    store-type: redis
    # session 30 天后过期
    timeout: 2592000

  # 空间图片分表
  shardingsphere:
    datasource:
      names: yuemu_picture
      yuemu_picture:
        type: com.zaxxer.hikari.HikariDataSource
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/yuemu_picture
        username: root
        password: YOUR_MYSQL_PASSWORD  # 替换为您的MySQL密码
    rules:
      sharding:
        tables:
          picture:
            actual-data-nodes: yuemu_picture.picture # 动态分表
            table-strategy:
              standard:
                sharding-column: spaceId
                sharding-algorithm-name: picture_sharding_algorithm  # 使用自定义分片算法
        sharding-algorithms:
          picture_sharding_algorithm:
            type: CLASS_BASED
            props:
              strategy: standard
              algorithmClassName: com.lumenglover.yuemupicturebackend.manager.sharding.PictureShardingAlgorithm
    props:
      sql-show: true

mybatis-plus:
  configuration:
    # MyBatis 配置
    map-underscore-to-camel-case: false
    # 在生产环境中关闭日志
    log-impl: org.apache.ibatis.logging.nologging.NoLoggingImpl
  global-config:
    enable-sql-runner: true
    db-config:
      logic-delete-field: isDelete # 全局逻辑删除的实体字段名
      logic-delete-value: 1 # 逻辑已删除值（默认为 1）
      logic-not-delete-value: 0 # 逻辑未删除值（默认为 0）
# 接口文档配置
knife4j:
  enable: true
  production: false
  basic:
    enable: true
    username: YOUR_KNIFE4J_USERNAME  # 替换为您的Knife4j用户名
    password: YOUR_KNIFE4J_PASSWORD  # 替换为您的Knife4j密码
  openapi:
    title: 悦木图片管理系统 - API接口文档
    description: 基于SpringBoot + Vue3开发的图片管理系统，提供图片上传、管理、分享、搜索等完整功能的RESTful API接口文档
    version: v1.0.0
    group:
      default:
        api-rule: package
        api-rule-resources:
          - com.lumenglover.yuemupicturebackend.controller

## 对象存储配置（需要从腾讯云获取）
cos:
  client:
    enable: true
    duration: 1800
    host: https://YOUR_BUCKET_NAME.cos.ap-chongqing.myqcloud.com  # 替换为您的COS域名
    secretId: YOUR_COS_SECRET_ID  # 替换为您的COS SecretId
    secretKey: YOUR_COS_SECRET_KEY  # 替换为您的COS SecretKey
    region: ap-chongqing
    bucket: YOUR_BUCKET_NAME  # 替换为您的COS存储桶名称
    admin-email: ADMIN_EMAIL_ADDRESS  # 替换为管理员邮箱地址
    audit-biz-type: ""  # 图片审核策略类型，可选配置
    text-audit-biz-type: ""  # 文本审核策略类型，可选配置
    custom-domain: https://YOUR_CUSTOM_DOMAIN  # 替换为您的自定义域名

# 阿里云 AI 配置
aliYunAi:
  apiKey: YOUR_ALIYUN_API_KEY  # 替换为您的阿里云AI API密钥

logging:
  config: classpath:logback-spring.xml

4. 构建运行

bash

# 编译打包
mvn clean package -DskipTests

# 运行后端服务
java -jar target/yuemupicturebackend-0.0.1-SNAPSHOT.jar

项目主要后端技术栈包括：

Spring Boot 2.6.13 - 核心框架
Spring Boot Starter Web - Web应用支持
Spring Boot Starter AOP - 切面编程支持
Spring Boot Starter Data Elasticsearch - Elasticsearch搜索引擎集成
MyBatis-Plus 3.5.9 - 数据持久层框架
MyBatis-Plus JSqlParser 4.9 - SQL解析支持
Spring Boot Starter Data Redis - Redis数据访问
Spring Session Data Redis - 基于Redis的Session管理
Redisson 3.21.0 - Redis客户端高级封装
Caffeine 2.9.3 - 本地缓存实现
Spring Boot Starter Cache - 缓存抽象支持
Spring Boot Starter WebSocket - WebSocket实时通信
Netty 4.1.104.Final - 网络编程框架
LMAX Disruptor 3.4.2 - 高性能无锁队列
Sa-Token 1.39.0 - 权限认证框架
Sa-Token Redis Jackson - Sa-Token与Redis集成(Jackson序列化)
Apache Commons Pool2 - Redis连接池支持
ShardingSphere JDBC Core 5.2.0 - 分库分表中间件
Tencent Cloud COS API 5.6.227 - 对象存储SDK
Hutool 5.8.26 - 工具库集合
Jsoup 1.15.3 - HTML解析与清理
Knife4j OpenAPI2 4.4.0 - API文档生成工具
IP2Region 2.7.0 - IP地理位置解析
WebP ImageIO 0.1.6 - WebP图片格式支持
JavaMail 1.6.2 - 邮件发送支持
Nacos Config 0.2.12 - 配置中心支持
Spring Boot Starter Validation - 参数校验支持
MySQL Connector/J - MySQL数据库驱动
Lombok - 代码简化注解
Apache POI 5.2.2 - Excel文档处理
Apache POI OOXML - Excel高级功能支持
LangChain4j 0.24.0 - RAG(AI)功能框架
LangChain4j Core - LangChain4j核心组件
LangChain4j AllMiniLmL6V2 Embeddings - 本地嵌入模型
LangChain4j Elasticsearch - Elasticsearch嵌入存储
Apache Commons Lang3 3.12.0 - 字符串处理工具
Apache Commons Text 1.10.0 - 文本处理工具
Fastjson 2.0.43 - JSON序列化/反序列化

前端部署

1. 安装依赖

bash

cd 前端
npm install
# 或
yarn install

项目主要前端依赖包括：

Vue 3 (~3.5.13) - 渐进式JavaScript框架
TypeScript (~5.6.3) - JavaScript超集，提供类型检查
Vant 4 (^4.9.22) - 移动端UI组件库
Ant Design Vue (^4.2.6) - PC端企业级UI组件库
Pinia (^2.2.6) - Vue官方推荐的状态管理库
Vue Router (^4.4.5) - Vue官方路由管理器
Axios (^1.10.0) - 基于Promise的HTTP客户端
ECharts (^5.6.0) - 数据可视化图表库
ECharts WordCloud (^2.1.0) - 词云图插件
Swiper (^12.0.3) - 触摸滑动组件
Vue Cropper (^1.1.4) - 图片裁剪组件
Vue Easy Lightbox (^1.19.0) - 图片灯箱浏览组件
Vue Waterfall Easy (^2.4.4) - 瀑布流布局组件
Vue Waterfall Plugin Next (^2.6.5) - 瀑布流布局插件
Bytemd (^1.22.0) - Markdown编辑器组件
@bytemd/plugin-gfm (^1.22.0) - GitHub Flavored Markdown插件
@bytemd/plugin-highlight (^1.22.0) - 代码高亮插件
@bytemd/plugin-medium-zoom (^1.22.0) - 图片缩放插件
@bytemd/vue-next (^1.21.0) - Vue 3适配器
Vue Quill (@vueup/vue-quill ^1.2.0) - 富文本编辑器
@wangeditor/editor (^5.1.23) - WangEditor富文本编辑器
@wangeditor/editor-for-vue (^5.1.12) - WangEditor Vue适配器
Vue Audio Visual (^3.0.11) - 音频可视化组件
Vue Baberrage (^3.2.4) - 弹幕组件
Vue Virtual Scroll List (^2.3.5) - 虚拟滚动列表
Vue Virtual Scroller (^2.0.0-beta.8) - 虚拟滚动组件
RecorderX (^2.0.2) - 音频录制组件
RecorderJS (^1.0.7) - 音频录制库
Wavesurfer.js (^7.9.9) - 音频波形可视化
LameJS (^1.2.1) - MP3编码库
Music Metadata Browser (^2.5.11) - 音乐元数据解析
FFmpeg.js (@ffmpeg/ffmpeg ^0.9.8) - 视频处理库
@ffmpeg/core (^0.10.0) - FFmpeg核心库
@ffmpeg/util (^0.12.2) - FFmpeg工具库
TUI Image Editor (^3.15.3) - 图片编辑器
CompressorJS (^1.2.1) - 图片压缩库
Browser Image Compression (^2.0.2) - 浏览器图片压缩
Vue3 Colorpicker (^2.3.0) - 颜色选择器
Vue3 Analog Clock (^0.1.1) - 模拟时钟组件
Vue3 Emoji Picker (^1.1.8) - 表情选择器
Vue Lottie (lottie-web-vue ^2.0.7) - Lottie动画组件
Lottie Web (^5.12.2) - Lottie动画库
Lottie Player (@lottiefiles/lottie-player ^2.0.12) - Lottie播放器
QRCode (^1.5.4) - 二维码生成库
QRCode Vue3 (^1.7.1) - Vue 3二维码组件
QRCodeJS2 (^0.0.2) - 二维码生成库
Date FNS (^4.1.0) - 日期处理库
Moment (^2.30.1) - 日期时间处理库
Lodash (^4.17.21) - JavaScript工具库
Lodash-es (^4.17.21) - Lodash ES模块版本
HTML2Canvas (^1.4.1) - 网页截图工具
File Saver (^2.0.5) - 文件保存工具
Highlight.js (^11.11.1) - 代码高亮库
Markdown-it (^14.1.0) - Markdown解析器
Markdown-it-image (^1.0.0) - Markdown图片插件
Color Thief (colorthief ^2.6.0) - 图片主色调提取
Animate.css (^4.1.1) - CSS动画库
Vue Use Motion (@vueuse/motion ^2.2.6) - Vue动画库
Vue Use (@vueuse/core ^12.5.0) - Vue组合式API工具库
Vue Lazy Hydration (vue3-lazy-hydration ^1.2.1) - 组件懒加载水合
Font Awesome (@fortawesome/fontawesome-svg-core ^7.1.0) - 图标库核心
Free Solid SVG Icons (@fortawesome/free-solid-svg-icons ^7.1.0) - Font Awesome免费实心图标
Vue Font Awesome (@fortawesome/vue-fontawesome ^3.1.2) - Font Awesome Vue适配器

2. 配置环境

创建 .env.development 和 .env.production 文件并配置API地址：

.env.development:

bash

VITE_API_BASE_URL=http://localhost:8080/api
VITE_BASE_URL=http://localhost:8080

.env.production:

bash

VITE_API_BASE_URL=https://yourdomain.com/api
VITE_BASE_URL=https://yourdomain.com

3. 启动项目

bash

# 开发模式
npm run dev
# 或
yarn dev

# 生产构建
npm run build
# 或
yarn build

# 预览生产构建
npm run preview
# 或
yarn preview

Docker部署

后端Dockerfile

bash

FROM openjdk:8-jre-alpine
WORKDIR /app
COPY target/yuemupicturebackend-0.0.1-SNAPSHOT.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "/app.jar"]

前端Dockerfile

bash

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml 示例

yaml

version: '3.8'

services:
  mysql:
    image: mysql:5.7
    container_name: yuemupicture-mysql
    environment:
      MYSQL_ROOT_PASSWORD: your_root_password
      MYSQL_DATABASE: yuemupicture
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
      - ./sql/create_table.sql:/docker-entrypoint-initdb.d/init.sql

  redis:
    image: redis:alpine
    container_name: yuemupicture-redis
    ports:
      - "6379:6379"

  backend:
    build:
      context: ./后端
      dockerfile: Dockerfile
    container_name: yuemupicture-backend
    depends_on:
      - mysql
      - redis
    ports:
      - "8080:8080"
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/yuemupicture
      SPRING_REDIS_HOST: redis
    restart: unless-stopped

  frontend:
    build:
      context: ./前端
      dockerfile: Dockerfile
    container_name: yuemupicture-frontend
    depends_on:
      - backend
    ports:
      - "80:80"
    restart: unless-stopped

volumes:
  mysql_data:

Nginx配置

反向代理配置

nginx

server {
    listen 80;
    server_name your-domain.com;

    # 前端静态资源
    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
        expires 1h;
    }

    # API请求代理到后端
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 文件上传/下载代理
    location /file/ {
        proxy_pass http://localhost:8080/file/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 静态资源缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        root /path/to/frontend/dist;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

环境变量配置

后端环境变量

MYSQL_URL: MySQL数据库连接URL
MYSQL_USERNAME: MySQL用户名
MYSQL_PASSWORD: MySQL密码
REDIS_HOST: Redis主机地址
REDIS_PORT: Redis端口
REDIS_PASSWORD: Redis密码
COS_SECRET_ID: 腾讯云COS SecretId
COS_SECRET_KEY: 腾讯云COS SecretKey
COS_REGION: 腾讯云COS区域
COS_BUCKET: 腾讯云COS桶名

前端环境变量

VITE_API_BASE_URL: API基础URL
VITE_BASE_URL: 基础URL
VITE_APP_TITLE: 应用标题
VITE_UPLOAD_SIZE_LIMIT: 上传文件大小限制

启动顺序

启动数据库(MySQL)和缓存(Redis)
初始化数据库表结构（执行SQL脚本）
启动后端服务
启动前端服务或部署前端静态文件
配置反向代理(Nginx)（生产环境）

常见问题

数据库连接问题

检查MySQL服务是否正常运行
确认数据库用户名密码正确
确认数据库已创建并执行了表结构脚本

Redis连接问题

检查Redis服务是否正常运行
确认Redis配置信息正确

文件上传问题

检查COS配置是否正确
确认COS权限设置
检查文件大小限制配置
确认腾讯云数据万象内容审核服务是否正确配置（如遇到内容审核相关错误）
检查内容审核策略是否符合业务需求

接口跨域问题

开发环境下通过Vite代理解决
生产环境下通过Nginx配置解决

安装指南 ​

重要前置服务 ​

环境要求 ​

后端环境 ​

前端环境 ​

后端部署 ​

重要前提条件 ​

1. 克隆项目 ​

2. 配置数据库 ​

3. 配置文件 ​

主配置文件 (application.yml) ​

开发环境配置 (application-dev.yml) ​

生产环境配置 (application-prod.yml) ​

测试环境配置 (application-test.yml) ​

4. 构建运行 ​

前端部署 ​

1. 安装依赖 ​

2. 配置环境 ​

3. 启动项目 ​

Docker部署 ​

后端Dockerfile ​

前端Dockerfile ​

docker-compose.yml 示例 ​

Nginx配置 ​

反向代理配置 ​

环境变量配置 ​

后端环境变量 ​

前端环境变量 ​

启动顺序 ​

常见问题 ​

数据库连接问题 ​

Redis连接问题 ​

文件上传问题 ​

接口跨域问题 ​

安装指南

重要前置服务

环境要求

后端环境

前端环境

后端部署

重要前提条件

1. 克隆项目

2. 配置数据库

3. 配置文件

主配置文件 (application.yml)

开发环境配置 (application-dev.yml)

生产环境配置 (application-prod.yml)

测试环境配置 (application-test.yml)

4. 构建运行

前端部署

1. 安装依赖

2. 配置环境

3. 启动项目

Docker部署

后端Dockerfile

前端Dockerfile

docker-compose.yml 示例

Nginx配置

反向代理配置

环境变量配置

后端环境变量

前端环境变量

启动顺序

常见问题

数据库连接问题

Redis连接问题

文件上传问题

接口跨域问题