技术分享随笔

从零搭建AI小程序全栈实战（四）：模型训练

Mon, 05 Jan 2026 00:00:00 GMT

:::note

欢迎来到“从零搭建AI小程序全栈实战”系列文章！
此为本系列的第五篇文章，你可以点击跳转到第一篇文章在系列文章中快速跳转。

:::

一、这篇文章将要做的

1.1 回顾

上一篇我们完成了微信小程序前端，拍照上传→识别展示→历史记录全链路已通
当前状态：小程序能跑通，但后端 /predict 返回的还是 fake_prediction，AI 是假的

1.2 目标

训练一个真正的图像分类模型，替换掉假预测
四个里程碑：
- 数据集准备与预处
- 用 PyTorch 训练 ResNet18 分类模型
- 用训练好的模型替换 Flask API
- 调整 Spring Boot 后端适配新模型接口

1.3 最终效果预览

小程序拍照后显示 "organic（置信度: 93.21%）" 而非 "fake_prediction"
这一切跑在你自己的 GPU 上，不依赖任何第三方 AI 服务

二、数据集准备与预处理

2.1 选择数据集

我们使用 Kaggle 垃圾分类数据集

地址：Waste Classification data | Kaggle
包含 2.5 万张图片，分 Organic（厨余）和 Recyclable（可回收）两类
二分类最简单，8G 显存轻松训练

2.2 下载数据集并整理

在 Windows 上的 G:\DEMO_Project\demo_assist\api-server\ 中创建目录 dataset、目录 models 与文件 train.py 。
创建后 api-server 总体结构如下：

G:\DEMO_Project\demo_assist\api-server\
├── dataset/
│   ├── train/
│   │   ├── organic/        # 厨余垃圾图片
│   │   └── recyclable/     # 可回收垃圾图片
│   └── test/
│       ├── organic/
│       └── recyclable/
├── models/                  # 训练好的模型存这里
├── train.py                 # 训练脚本
└── ....                     # 其他原有文件

三、模型训练脚本

3.1 安装 PyTorch 依赖

打开 Anaconda Prompt，激活环境并安装新包：

conda activate ai-env
pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118
pip install matplotlib tqdm pillow

3.2 编写训练脚本

编写 train.py ，完整代码如下：

import torch
import torch.nn as nn
import torch.optim as optim
from torchvision import datasets, transforms, models
from torch.utils.data import DataLoader
import os
import matplotlib.pyplot as plt

# ========== 1. 配置参数 ==========
DATA_DIR = './dataset'
MODEL_SAVE_PATH = './models/waste_classifier.pth'
BATCH_SIZE = 32
EPOCHS = 10
LEARNING_RATE = 0.001
IMG_SIZE = 224
NUM_CLASSES = 2  # 根据你的类别数修改

device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
print(f'使用设备: {device}')

# ========== 2. 数据预处理 ==========
# 训练集：随机裁剪、翻转、旋转，增加数据多样性
train_transforms = transforms.Compose([
    transforms.RandomResizedCrop(IMG_SIZE),
    transforms.RandomHorizontalFlip(),
    transforms.RandomRotation(15),
    transforms.ColorJitter(brightness=0.2, contrast=0.2),
    transforms.ToTensor(),
    transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225])
])

# 测试集：只需要缩放和归一化
test_transforms = transforms.Compose([
    transforms.Resize((IMG_SIZE, IMG_SIZE)),
    transforms.ToTensor(),
    transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225])
])

# ========== 3. 加载数据 ==========
train_dataset = datasets.ImageFolder(
    os.path.join(DATA_DIR, 'train'), transform=train_transforms)
test_dataset = datasets.ImageFolder(
    os.path.join(DATA_DIR, 'test'), transform=test_transforms)

train_loader = DataLoader(train_dataset, batch_size=BATCH_SIZE, shuffle=True)
test_loader = DataLoader(test_dataset, batch_size=BATCH_SIZE, shuffle=False)

# 自动获取类名映射
class_names = train_dataset.classes
print(f'类别数量: {len(class_names)}, 类名: {class_names}')

# ========== 4. 构建模型 ==========
# 使用预训练的 ResNet18，只改最后的全连接层
model = models.resnet18(weights='DEFAULT')
num_features = model.fc.in_features
model.fc = nn.Linear(num_features, NUM_CLASSES)
model = model.to(device)

# ========== 5. 损失函数和优化器 ==========
criterion = nn.CrossEntropyLoss()
optimizer = optim.Adam(model.parameters(), lr=LEARNING_RATE)

# ========== 6. 训练循环 ==========
train_losses = []
test_accuracies = []

for epoch in range(EPOCHS):
    # --- 训练 ---
    model.train()
    running_loss = 0.0
    for images, labels in train_loader:
        images, labels = images.to(device), labels.to(device)

        optimizer.zero_grad()
        outputs = model(images)
        loss = criterion(outputs, labels)
        loss.backward()
        optimizer.step()

        running_loss += loss.item()

    avg_loss = running_loss / len(train_loader)
    train_losses.append(avg_loss)

    # --- 测试 ---
    model.eval()
    correct = 0
    total = 0
    with torch.no_grad():
        for images, labels in test_loader:
            images, labels = images.to(device), labels.to(device)
            outputs = model(images)
            _, predicted = torch.max(outputs, 1)
            total += labels.size(0)
            correct += (predicted == labels).sum().item()

    accuracy = 100 * correct / total
    test_accuracies.append(accuracy)

    print(f'Epoch [{epoch+1}/{EPOCHS}], Loss: {avg_loss:.4f}, Test Accuracy: {accuracy:.2f}%')

# ========== 7. 保存模型 ==========
os.makedirs('models', exist_ok=True)
torch.save({
    'model_state_dict': model.state_dict(),
    'class_names': class_names,
    'img_size': IMG_SIZE
}, MODEL_SAVE_PATH)
print(f'模型已保存到 {MODEL_SAVE_PATH}')

# ========== 8. 绘制训练曲线 ==========
plt.figure(figsize=(12, 4))
plt.subplot(1, 2, 1)
plt.plot(train_losses)
plt.title('Training Loss')
plt.xlabel('Epoch')
plt.subplot(1, 2, 2)
plt.plot(test_accuracies)
plt.title('Test Accuracy')
plt.xlabel('Epoch')
plt.ylabel('%')
plt.tight_layout()
plt.savefig('./models/training_curve.png')
plt.show()

3.3 开始训练

cd "G:\DEMO_Project\demo_assist\api-server\"
python train.py

正常输出类似：

使用设备: cuda
类别数量: 2, 类名: ['organic', 'recyclable']
Epoch [1/10], Loss: 0.3456, Test Accuracy: 85.23%
...
Epoch [10/10], Loss: 0.0213, Test Accuracy: 95.67%
模型已保存到 ./models/waste_classifier.pth

我们使用 nvidia-smi 确认 GPU 在工作（显存占用约2~4GB）

预计10 个 epoch 大约跑 15-30 分钟，时长取决于数据集大小。

四、使用真实模型替换 Flask API

现在 Flask API 里 /predict 还在返回 "fake_prediction"，用刚训练好的模型替换掉。

4.1 改造 Flask API

在 api-server 文件夹上找到之前创建的 app.py，完整替换为：

from flask import Flask, request, jsonify
import torch
import torch.nn as nn
from torchvision import transforms, models
from PIL import Image
import io
import os

app = Flask(__name__)

# ========== 1. 加载模型 ==========
MODEL_PATH = 'D:/ai-project/models/waste_classifier.pth'
device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')

# 加载保存的模型信息
checkpoint = torch.load(MODEL_PATH, map_location=device)
class_names = checkpoint['class_names']
img_size = checkpoint.get('img_size', 224)

# 重建模型结构并加载权重
model = models.resnet18(weights=None)
num_features = model.fc.in_features
model.fc = nn.Linear(num_features, len(class_names))
model.load_state_dict(checkpoint['model_state_dict'])
model = model.to(device)
model.eval()

print(f'模型已加载，类别: {class_names}, 设备: {device}')

# ========== 2. 预处理函数 ==========
transform = transforms.Compose([
    transforms.Resize((img_size, img_size)),
    transforms.ToTensor(),
    transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225])
])

def predict_image(image_bytes):
    """输入图片字节流，返回预测类名和置信度"""
    image = Image.open(io.BytesIO(image_bytes)).convert('RGB')
    image_tensor = transform(image).unsqueeze(0).to(device)

    with torch.no_grad():
        outputs = model(image_tensor)
        probabilities = torch.nn.functional.softmax(outputs, dim=1)
        confidence, predicted_idx = torch.max(probabilities, 1)

    class_name = class_names[predicted_idx.item()]
    confidence_val = confidence.item()

    return class_name, confidence_val

# ========== 3. API 接口 ==========
@app.route('/health')
def health():
    return jsonify({
        "status": "ok",
        "cuda": torch.cuda.is_available(),
        "classes": class_names
    })

@app.route('/predict', methods=['POST'])
def predict():
    # 方案A：接收图片URL（后端下载）
    if request.is_json:
        data = request.get_json()
        image_url = data.get('image_url', '')
        if image_url.startswith('http'):
            import requests
            response = requests.get(image_url, timeout=10)
            image_bytes = response.content
        else:
            # 本地路径
            with open('.' + image_url, 'rb') as f:  # 路径前加 . 因为Flask工作目录问题
                image_bytes = f.read()
        class_name, confidence = predict_image(image_bytes)
        return jsonify({
            "class": class_name,
            "confidence": round(confidence, 4)
        })

    # 方案B：直接上传图片文件
    if 'file' in request.files:
        file = request.files['file']
        image_bytes = file.read()
        class_name, confidence = predict_image(image_bytes)
        return jsonify({
            "class": class_name,
            "confidence": round(confidence, 4)
        })

    return jsonify({"error": "no image provided"}), 400

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=False)

4.2 本地测试新 API

在 Windows 端的 Powershell 上启动 Flask：

cd "G:\DEMO_Project\demo_assist\api-server\"
python app.py

用 Windows 端的浏览器访问 http://localhost:5000/health，确认返回类名。

在服务器端上用 curl 测试：

curl -X POST http://localhost:5000/predict \
  -F "file=@D:/test_organic.jpg"

期望返回：

{
  "class": "organic",
  "confidence": 0.9578
}

五、Spring Boot 后端适配新模型

现在 Flask 返回的真结果格式变了，Spring Boot 后端需要做一点适配。

5.1 新增 DTO 类

原来的预测方法返回 Map<String, Object>，现在需要解析新的字段。
让我们创建专门的 DTO 类来接收。

新建 src/main/java/com/example/demo/dto/AiPredictResult.java：

package com.example.demo.dto;

public class AiPredictResult {
    private String clazz;      // 注意：class 是关键字，用 @JsonProperty
    private Double confidence;

    // Getter / Setter
    public String getClazz() { return clazz; }
    public void setClazz(String clazz) { this.clazz = clazz; }
    public Double getConfidence() { return confidence; }
    public void setConfidence(Double confidence) { this.confidence = confidence; }
}

5.2 修改 AiService

修改 AiServce.java 中的调用：

public AiPredictResult predictByFile(MultipartFile file) throws IOException {
    // 把 MultipartFile 转成字节，发给 Flask
    // 注意：Spring Boot 在服务器上，笔记本 API 在 localhost:5000（通过 frp）
    String url = AI_BASE_URL + "/predict";

    // 用 RestTemplate 上传文件
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.MULTIPART_FORM_DATA);

    // 先存为临时文件
    File tempFile = File.createTempFile("upload_", ".jpg");
    file.transferTo(tempFile);

    MultiValueMap<String, Object> body = new LinkedMultiValueMap<>();
    body.add("file", new FileSystemResource(tempFile));

    HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(body, headers);
    ResponseEntity<AiPredictResult> response = restTemplate.postForEntity(
        url, requestEntity, AiPredictResult.class);

    // 清理临时文件
    tempFile.delete();

    return response.getBody();
}

5.3 修改 Controller

在 ImageController 的 uploadAndRecognize 方法中，调用新的 predictByFile 并保存结果：

@PostMapping("/upload-and-recognize")
public Result<ImageRecord> uploadAndRecognize(@RequestParam("file") MultipartFile file) throws IOException {
    // 保存文件（原有逻辑）
    Files.createDirectories(Paths.get(uploadDir));
    String filename = System.currentTimeMillis() + "_" + file.getOriginalFilename();
    File dest = new File(uploadDir + "/" + filename);
    file.transferTo(dest);

    // 调用真实 AI 预测（新逻辑）
    AiPredictResult aiResult = aiService.predictByFile(file);
    String resultStr = aiResult.getClazz() + " (置信度: " + 
                       String.format("%.2f", aiResult.getConfidence() * 100) + "%)";

    // 存数据库
    ImageRecord record = new ImageRecord(file.getOriginalFilename(), "/uploads/" + filename);
    record.setRecognitionResult(resultStr);
    return Result.success(repository.save(record));
}

5.4 确保网络穿透正常

确保：

笔记本上 Flask API 在跑（端口 5000）
笔记本上 frpc 在跑，连上了服务器
服务器上 frps 在跑

在服务器上验证：

curl -X POST http://localhost:5000/predict -F "file=@一张图片.jpg"

返回真实分类结果即可。

六、全链路验证

笔记本：Flask + frpc 运行中
服务器：jar 运行中
小程序：拍照 → 上传 → 等待 2-3 秒 → 显示 "recyclable (置信度: 95.67%)"
历史记录：能看到带有真实识别结果的记录

七、验证清单

数据集下载或自建完成，目录结构正确
train.py 训练完毕，测试准确率 > 85%（分类越少越容易达标）
模型保存为 .pth 文件，class_names 正确保存
Flask /predict 接口能返回真实类名和置信度
Spring Boot 能正确解析 AI 返回结果并存入数据库
小程序拍照后显示的不是 "fake_prediction"，而是 "organic（置信度: 93.21%）"

从零搭建AI小程序全栈实战（三）：微信小程序前端

Sun, 04 Jan 2026 00:00:00 GMT

:::note

欢迎来到“从零搭建AI小程序全栈实战”系列文章！
此为本系列的第四篇文章，你可以点击跳转到第一篇文章在系列文章中快速跳转。

:::

一、这篇文章将要做的

1.1 回顾

上一篇我们完成了后端工程化加固，现在 Spring Boot 有统一响应、异常处理、接口文档、数据校验
当前状态：后端接口全部就绪，/api/images/upload-and-recognize 能接收图片并返回识别结果

1.2 目标

写一个微信小程序，把后端的能力"装进手机"
四个里程碑：
1. 小程序开发环境搭建 + 拍照页面
2. 调用后端接口，打通上传→识别→展示
3. 历史记录列表页
4. 体验优化（图片压缩、加载动画、底部导航）

二、创建第一个小程序项目

2.1 注册小程序账号与下载工具

注册（如果还没有）

打开微信公众平台，点击“立即注册”，选择“小程序”。
用未注册过公众平台的邮箱注册，按提示完成主体类型选择（个人即可）。
注册完成后，在「开发」→「开发管理」→「开发设置」页面，记下你的 AppID（后面要用）。

下载开发者工具

打开微信开发者工具下载，下载 Windows 64 位稳定版。
安装后打开，用刚刚注册的小程序绑定的微信扫码登录。

2.2 创建项目

点击「+」创建项目。
填入：
- 项目名称：ai-mini-app
- 目录：选一个空文件夹
- AppID：粘贴你在后台记下的 AppID
- 开发模式：小程序
- 模板选择：「JavaScript 基础模板」（不要选 TypeScript，先降低复杂度）
点击确定，你会看到默认模板生成的项目结构：

├── pages/
│   └── index/       首页
│       ├── index.js
│       ├── index.wxml
│       ├── index.wxss
│       └── index.json
├── app.js           全局逻辑
├── app.json         全局配置
├── app.wxss         全局样式
└── project.config.json

2.3 认识四个核心文件

文件类型	作用	类比
`.wxml`	页面结构，写 HTML 类似的标签	相当于网页的 HTML
`.wxss`	页面样式，写 CSS	相当于网页的 CSS
`.js`	页面逻辑，处理数据、发请求	相当于网页的 JavaScript
`.json`	页面配置（如标题、导航栏颜色）	微信特有的配置

一个页面由这四个文件组成，名字必须完全相同。

2.4 改造首页

改写 pages/index/index.wxml（清空原有内容，写入）：

<view class="container">
  <!-- 标题 -->
  <view class="title">AI图像识别</view>

  <!-- 图片展示区（拍照后显示在这里） -->
  <view class="image-area">
    <image wx:if="{{imageUrl}}" src="{{imageUrl}}" mode="aspectFit" class="preview-image"/>
    <view wx:else class="placeholder">
      <text>请点击下方按钮拍照</text>
    </view>
  </view>

  <!-- 拍照按钮 -->
  <button class="camera-btn" bindtap="takePhoto">
    📷 拍照识别
  </button>

  <!-- 识别结果区 -->
  <view wx:if="{{result}}" class="result-area">
    <text class="result-title">识别结果：</text>
    <text class="result-text">{{result}}</text>
  </view>
</view>

改写 pages/index/index.wxss（样式）：

.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}
.image-area {
  width: 100%;
  height: 400rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}
.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}
.placeholder {
  color: #999;
  font-size: 28rpx;
}
.camera-btn {
  width: 80%;
  background: #07c160;
  color: white;
  font-size: 32rpx;
  margin-bottom: 30rpx;
}
.result-area {
  width: 100%;
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}
.result-title {
  font-size: 30rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}
.result-text {
  font-size: 28rpx;
  color: #333;
}

改写 pages/index/index.js：

Page({
  data: {
    imageUrl: '',   // 拍照后的图片临时路径
    result: ''      // 识别结果文本
  },

  // 拍照方法
  takePhoto() {
    // 调用微信相机
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['camera'],  // 只允许拍照
      success: (res) => {
        const tempFilePath = res.tempFiles[0].tempFilePath
        this.setData({
          imageUrl: tempFilePath
        })
        // 拍照后直接提示（后续连接后端）
        wx.showToast({ title: '拍照成功！', icon: 'success' })
      },
      fail: (err) => {
        console.error('拍照失败', err)
        wx.showToast({ title: '拍照失败', icon: 'error' })
      }
    })
  }
})

2.5 预览效果

在开发者工具顶部点击「预览」→ 手机微信扫码，在真机上点击按钮看能否调起相机，并显示图片。
如果工具里没法调相机，先点「编译」确认页面显示正常即可。

三、发起HTTP请求连接后端

3.1 配置服务器域名

在微信公众平台后台 →「开发」→「开发管理」→「开发设置」→「服务器域名」：

request 合法域名：添加 https://你的域名 或先用 https://你的服务器IP（如果只有 IP，临时设置为 https://12.34.56.78）
uploadFile 合法域名：同样添加你的服务器地址

开发阶段绕过域名校验：在开发者工具右上角「详情」→「本地设置」→ 勾选「不校验合法域名、TLS 证书等」，否则本地 HTTP 请求发不出去。

3.2 封装网络请求工具

为了方便管理，统一封装请求。创建 utils/api.js：

// 你的服务器地址（阶段1部署的 Spring Boot）
const BASE_URL = 'http://你的服务器IP:8080'

function request(url, method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method: method,
      data: data,
      header: {
        'Content-Type': 'application/json'
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 上传图片专用
function uploadImage(filePath) {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: BASE_URL + '/api/images/upload-and-recognize',
      filePath: filePath,
      name: 'file',
      success: (res) => {
        try {
          const data = JSON.parse(res.data)
          if (data.code === 200) {
            resolve(data.data)
          } else {
            reject(data)
          }
        } catch(e) {
          reject({ message: '解析失败' })
        }
      },
      fail: (err) => reject(err)
    })
  })
}

module.exports = { request, uploadImage }

3.3 在页面中调用后端

改造 pages/index/index.js，引入 api 模块，拍照后自动上传：

const api = require('../../utils/api')

Page({
  data: {
    imageUrl: '',
    result: ''
  },

  takePhoto() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['camera'],
      success: (res) => {
        const tempFilePath = res.tempFiles[0].tempFilePath
        this.setData({ imageUrl: tempFilePath })

        // 显示上传中
        wx.showLoading({ title: '识别中...' })

        // 调用后端 AI 识别接口
        api.uploadImage(tempFilePath)
          .then(record => {
            wx.hideLoading()
            this.setData({
              result: record.recognitionResult || '识别完成'
            })
            wx.showToast({ title: '识别成功！', icon: 'success' })
          })
          .catch(err => {
            wx.hideLoading()
            console.error('识别失败', err)
            wx.showToast({ title: '识别失败，请重试', icon: 'error' })
          })
      },
      fail: (err) => {
        console.error('拍照失败', err)
      }
    })
  }
})

3.4 验证全链路

确保服务器上 jar 在跑，笔记本上 Flask API + frp 也在跑。
小程序拍照 → 显示 loading → 返回结果（目前是 fake_prediction，但证明链路通）。
现在是小程序 → Spring Boot → 笔记本 AI → 返回结果的全链路打通时刻！

四、历史记录列表页

4.1 创建 history 页面

在 pages 文件夹上右键 → 新建文件夹 history，然后新建 Page（选四个文件）。

修改以下文件

history.wxml :

<view class="container">
  <view class="title">历史记录</view>

  <view wx:if="{{list.length === 0}}" class="empty">暂无记录</view>

  <view wx:for="{{list}}" wx:key="id" class="card">
    <image src="{{serverUrl}}{{item.imageUrl}}" mode="aspectFill" class="card-image"/>
    <view class="card-info">
      <text class="card-name">{{item.originalFilename}}</text>
      <text class="card-result">{{item.recognitionResult || '未识别'}}</text>
      <text class="card-time">{{item.createTime}}</text>
    </view>
  </view>
</view>

history.js :

const api = require('../../utils/api')

Page({
  data: {
    list: [],
    serverUrl: 'http://你的服务器IP:8080'  // 拼图片完整路径
  },

  onShow() {
    this.loadHistory()
  },

  loadHistory() {
    wx.showLoading({ title: '加载中' })
    api.request('/api/images', 'GET')
      .then(res => {
        wx.hideLoading()
        if (res.code === 200) {
          this.setData({ list: res.data.reverse() })  // 最新的在前
        }
      })
      .catch(err => {
        wx.hideLoading()
        console.error(err)
      })
  }
})

history.wxss :

.container { padding: 20rpx; }
.title { font-size: 36rpx; font-weight: bold; padding: 20rpx; }
.empty { text-align: center; color: #999; margin-top: 100rpx; }
.card { display: flex; background: white; border-radius: 16rpx; padding: 20rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); }
.card-image { width: 150rpx; height: 150rpx; border-radius: 12rpx; }
.card-info { flex: 1; margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-around; }
.card-name { font-size: 28rpx; font-weight: bold; }
.card-result { font-size: 24rpx; color: #07c160; }
.card-time { font-size: 22rpx; color: #999; }

4.2 注册页面

在 app.json 的 pages 数组中注册：

"pages": [
  "pages/index/index",
  "pages/history/history"
]

4.3 添加底部导航栏

在 app.json 中添加 tabBar：

"tabBar": {
  "color": "#999",
  "selectedColor": "#07c160",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "拍照",
      "iconPath": "images/camera.png",
      "selectedIconPath": "images/camera-active.png"
    },
    {
      "pagePath": "pages/history/history",
      "text": "记录",
      "iconPath": "images/history.png",
      "selectedIconPath": "images/history-active.png"
    }
  ]
}

五、图片压缩

5.0 为什么要压缩

手机拍照一张图通常 2-5 MB，服务器带宽小（2核2G），直接上传可能要 5-10 秒。压缩到 100KB 以内，秒传。

5.1 改造 `index.js`

实现思路

在 takePhoto 拍照成功后，不直接上传，而是先调用 wx.compressImage 压缩，压缩后的临时文件再上传。

完整改造 pages/index/index.js

const api = require('../../utils/api')

Page({
  data: {
    imageUrl: '',        // 压缩后的用于展示
    originalUrl: '',     // 原始图（如果需要预览大图）
    result: '',
    uploading: false     // 上传中状态，防重复点击
  },

  takePhoto() {
    // 防重复点击
    if (this.data.uploading) return

    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['camera'],
      success: (res) => {
        const originalPath = res.tempFiles[0].tempFilePath

        // 先显示原图（给用户即时反馈）
        this.setData({ 
          imageUrl: originalPath,
          originalUrl: originalPath,
          result: ''  // 清空旧结果
        })

        // 压缩图片
        this.compressAndUpload(originalPath)
      },
      fail: (err) => {
        console.error('拍照失败', err)
        wx.showToast({ title: '拍照失败', icon: 'error' })
      }
    })
  },

  // 压缩后上传
  compressAndUpload(filePath) {
    wx.showLoading({ title: '压缩中...' })

    wx.compressImage({
      src: filePath,
      quality: 60,           // 60%质量，肉眼几乎看不出差别
      success: (compressRes) => {
        wx.hideLoading()
        // 用压缩后的图片展示（加载更快）
        this.setData({ imageUrl: compressRes.tempFilePath })
        // 上传并识别
        this.uploadAndRecognize(compressRes.tempFilePath)
      },
      fail: () => {
        // 压缩失败直接用原图上传
        wx.hideLoading()
        this.uploadAndRecognize(filePath)
      }
    })
  },

  // 上传到后端识别
  uploadAndRecognize(filePath) {
    this.setData({ uploading: true })
    wx.showLoading({ title: '识别中...', mask: true })

    api.uploadImage(filePath)
      .then(record => {
        wx.hideLoading()
        this.setData({
          result: record.recognitionResult || '识别完成',
          uploading: false
        })
        wx.showToast({ title: '识别成功！', icon: 'success' })
      })
      .catch(err => {
        wx.hideLoading()
        this.setData({ uploading: false })
        console.error('识别失败', err)
        // 显示重试选项（任务3详讲）
        this.showRetryDialog(filePath)
      })
  },

  showRetryDialog(filePath) {
    wx.showModal({
      title: '识别失败',
      content: '网络似乎不太好，要重试吗？',
      confirmText: '重试',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          this.uploadAndRecognize(filePath)
        }
      }
    })
  }
})

关键点说明

quality: 60：平衡清晰度与大小，可调，80/60/40 根据实际压缩结果选。
mask: true：loading 时阻止用户点其他按钮。
uploading 状态：防止用户狂点按钮造成重复上传。

六、前端系统优化

6.1 加载状态与空状态完善

6.1.1 历史记录页优化 `pages/history/history.js`

const api = require('../../utils/api')

Page({
  data: {
    list: [],
    serverUrl: 'http://你的服务器IP:8080',
    loading: true,      // 首次加载状态
    error: false,       // 是否加载失败
    errorMsg: ''
  },

  onShow() {
    this.loadHistory()
  },

  loadHistory() {
    this.setData({ loading: true, error: false })

    api.request('/api/images', 'GET')
      .then(res => {
        this.setData({ loading: false })
        if (res.code === 200) {
          this.setData({ list: res.data.reverse() })
          if (res.data.length === 0) {
            // 空状态由 wxml 处理
          }
        }
      })
      .catch(err => {
        console.error('加载历史失败', err)
        this.setData({
          loading: false,
          error: true,
          errorMsg: '加载失败，请检查网络'
        })
      })
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.loadHistory()
    wx.stopPullDownRefresh()
  },

  // 重试按钮
  retry() {
    this.loadHistory()
  }
})

6.1.2 历史记录页模板优化`pages/history/history.wxml`

<view class="container">
  <view class="title">历史记录</view>

  <!-- 加载中 -->
  <view wx:if="{{loading}}" class="status-box">
    <text>加载中...</text>
  </view>

  <!-- 加载失败 -->
  <view wx:elif="{{error}}" class="status-box">
    <text class="error-text">{{errorMsg}}</text>
    <button class="retry-btn" bindtap="retry">重新加载</button>
  </view>

  <!-- 空状态 -->
  <view wx:elif="{{list.length === 0}}" class="status-box">
    <text class="empty-icon">📷</text>
    <text class="empty-text">还没有识别记录</text>
    <text class="empty-hint">去首页拍张照片试试吧</text>
  </view>

  <!-- 列表 -->
  <view wx:else>
    <view wx:for="{{list}}" wx:key="id" class="card" bindtap="previewImage" data-url="{{serverUrl}}{{item.imageUrl}}">
      <image src="{{serverUrl}}{{item.imageUrl}}" mode="aspectFill" class="card-image"/>
      <view class="card-info">
        <text class="card-name">{{item.originalFilename}}</text>
        <text class="card-result">{{item.recognitionResult || '未识别'}}</text>
        <text class="card-time">{{item.createTime}}</text>
      </view>
      <text class="arrow">></text>
    </view>
  </view>
</view>

6.1.3 历史记录页样式补充

/* 状态占位 */
.status-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}
.empty-icon { font-size: 80rpx; margin-bottom: 20rpx; }
.empty-text { font-size: 28rpx; color: #666; }
.empty-hint { font-size: 24rpx; color: #999; margin-top: 10rpx; }
.error-text { color: #e74c3c; font-size: 28rpx; margin-bottom: 20rpx; }
.retry-btn {
  background: #07c160;
  color: white;
  font-size: 26rpx;
  padding: 10rpx 40rpx;
  border-radius: 40rpx;
}
.arrow { color: #ccc; font-size: 28rpx; align-self: center; }

6.2 错误处理

完善 utils/api.js，加入超时和统一错误提示：

const BASE_URL = 'http://你的服务器IP:8080'

// 通用请求
function request(url, method = 'GET', data = {}, showError = true) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method: method,
      data: data,
      timeout: 10000,  // 10秒超时
      header: { 'Content-Type': 'application/json' },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          if (showError) wx.showToast({ title: '服务器错误', icon: 'none' })
          reject(res.data)
        }
      },
      fail: (err) => {
        if (showError) {
          wx.showToast({ title: '网络连接失败', icon: 'none' })
        }
        reject(err)
      }
    })
  })
}

// 上传图片
function uploadImage(filePath) {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: BASE_URL + '/api/images/upload-and-recognize',
      filePath: filePath,
      name: 'file',
      timeout: 30000,  // 上传给30秒
      success: (res) => {
        try {
          const data = JSON.parse(res.data)
          if (data.code === 200) {
            resolve(data.data)
          } else {
            wx.showToast({ title: data.message || '识别失败', icon: 'none' })
            reject(data)
          }
        } catch(e) {
          reject({ message: '数据解析失败' })
        }
      },
      fail: (err) => {
        wx.showToast({ title: '上传失败', icon: 'none' })
        reject(err)
      }
    })
  })
}

module.exports = { request, uploadImage }

6.3 完善UI细节

6.3.1 图片预览

在 history.wxml 中，卡片已经绑定了 bindtap="previewImage"。现在在 history.js 中加入方法：

// 在 Page({}) 内部添加
previewImage(e) {
  const url = e.currentTarget.dataset.url
  wx.previewImage({
    urls: [url],       // 图片地址数组，可以多张左右滑动
    current: url       // 当前显示哪张
  })
}

首页也想预览的话，在 index.wxml 的 <image> 标签上加 bindtap="previewImage"，index.js 中同样加：

previewImage() {
  wx.previewImage({
    urls: [this.data.originalUrl || this.data.imageUrl],
  })
}

6.3.2 统一色调

选定一个主色，比如微信绿 #07c160，所有按钮、高亮用这个色。在 app.wxss 中定义全局变量：

page {
  --primary: #07c160;
  --danger: #e74c3c;
  --text: #333;
  --text-light: #999;
  --bg: #f5f5f5;
  background-color: var(--bg);
  font-size: 28rpx;
  color: var(--text);
}

6.3.3 首页美化与细节交互

/* 全面美化版 index.wxss */
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.title {
  font-size: 42rpx;
  font-weight: bold;
  color: var(--primary);
  margin: 40rpx 0 30rpx;
  letter-spacing: 2rpx;
}

.image-area {
  width: 100%;
  height: 450rpx;
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 24rpx;
}

.placeholder {
  text-align: center;
  color: #bbb;
}

.placeholder-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 16rpx;
}

.placeholder-text {
  font-size: 28rpx;
}

.camera-btn {
  width: 80%;
  height: 88rpx;
  background: linear-gradient(135deg, #07c160, #06ad56);
  color: white;
  font-size: 34rpx;
  font-weight: bold;
  border-radius: 44rpx;
  box-shadow: 0 8rpx 20rpx rgba(7, 193, 96, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.camera-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.result-box {
  width: 100%;
  background: white;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}

.result-label {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 12rpx;
}

.result-text {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--primary);
  word-break: break-all;
}

对应更新 index.wxml 的占位区：

<view wx:else class="placeholder">
  <text class="placeholder-icon">📷</text>
  <text class="placeholder-text">点击下方按钮拍照</text>
</view>

以及结果区：

<view wx:if="{{result}}" class="result-box">
  <text class="result-label">🔍 识别结果</text>
  <text class="result-text">{{result}}</text>
</view>

6.3.4 底部导航图标生成

用 emoji 代替图标文件，或者去 iconfont 下载免费图标（48x48 px）。

如果 app.json 中没图标，可以暂时注释掉 iconPath 和 selectedIconPath，只用文字：

"tabBar": {
  "color": "#999",
  "selectedColor": "#07c160",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "📷 拍照"
    },
    {
      "pagePath": "pages/history/history",
      "text": "📋 记录"
    }
  ]
}

七、验收清单

小程序点击"拍照识别"能调起相机
拍照后图片显示在页面上，并上传到后端
后端返回识别结果，页面显示
历史记录页能展示所有识别过的记录
底部导航栏正常切换

从零搭建AI小程序全栈实战（二·下篇）：Java 后端工程化加固

Sat, 03 Jan 2026 00:00:00 GMT

:::note

欢迎来到“从零搭建AI小程序全栈实战”系列文章！
此为本系列的第三篇文章，你可以点击跳转到第一篇文章在系列文章中快速跳转。

:::

一、这篇文章将要做的

1.1 回顾

上一篇我们完成了CRUD、图片上传、调用AI推理
当前状态：接口能跑，但返回格式参差不齐，出错时直接500页面

1.2 目标

让后端"像个正经项目"
四个加固项：
1. 统一响应格式——前端解析不再猜
2. 全局异常处理——错误也返回JSON
3. Swagger接口文档——在线可测试
4. 数据校验——非法参数提前拦截

二、统一响应格式

2.0 为什么需要统一格式

先看现在的问题，你现在 ImageController 的返回是这样的：

// 返回 ImageRecord 对象
@PostMapping
public ImageRecord create(@RequestBody ImageRecord record) {
    return repository.save(record);
}

// 返回字符串
@DeleteMapping("/{id}")
public String delete(@PathVariable Long id) {
    repository.deleteById(id);
    return "deleted";
}

前端收到的东西会像这样：

// 调用创建接口可能返回：
{"id":1, "originalFilename":"test.jpg", "imageUrl":"/uploads/test.jpg", ...}

// 调用删除接口可能返回：
"deleted"

问题来了：

前端同学不知道返回的到底是成功还是失败，只能猜
返回格式不统一，前端要写两套处理逻辑
万一出错，Spring Boot 直接扔个 500 页面的 HTML，前端根本没法解析

统一格式后，无论是创建、查询、删除、所有接口都返回这种结构：

{
  "code": 200,        // 200=成功，400=参数错误，500=服务器错误
  "message": "success", // 给人类看的提示
  "data": {            // 真正的数据放在这里
    "id": 1,
    "originalFilename": "test.jpg"
  }
}

前端只需要写一套解析逻辑，看 code 就能知道成败。

2.1 创建 Result 类

在服务器上创建 src/main/java/com/example/demo/common/Result.java：

package com.example.demo.common;

public class Result<T> {
    private int code;
    private String message;
    private T data;

    // 无参构造（必须，框架反射用）
    public Result() {}

    // 全参构造
    public Result(int code, String message, T data) {
        this.code = code;
        this.message = message;
        this.data = data;
    }

    // ========== 静态工厂方法 ==========

    // 成功，带数据
    public static <T> Result<T> success(T data) {
        return new Result<>(200, "success", data);
    }

    // 成功，不带数据（比如删除操作）
    public static <T> Result<T> success() {
        return new Result<>(200, "success", null);
    }

    // 失败，自定义状态码和消息
    public static <T> Result<T> error(int code, String message) {
        return new Result<>(code, message, null);
    }

    // ========== Getter / Setter ==========
    public int getCode() { return code; }
    public void setCode(int code) { this.code = code; }

    public String getMessage() { return message; }
    public void setMessage(String message) { this.message = message; }

    public T getData() { return data; }
    public void setData(T data) { this.data = data; }
}

代码	什么意思
`Result<T>`	泛型，`T` 可以是 String、ImageRecord、List，复用同一个类
`private T data`	实际返回的数据，类型由调用时决定
`public static <T> Result<T> success(T data)`	静态方法，直接 `Result.success(某对象)` 就能生成一个成功响应
`Result.error(400, "参数错误")`	返回错误时用，前端看到 `code=400` 就知道出问题了

2.2 改造 Controller

把 ImageController 每个方法的返回值都包一层 Result。

2.2.1 导入 Result 类

在 ImageController.java 顶部加上：

import com.example.demo.common.Result;

2.2.2 新建记录——返回创建好的数据

原来：

@PostMapping
public ImageRecord create(@RequestBody ImageRecord record) {
    return repository.save(record);
}

改后：

@PostMapping
public Result<ImageRecord> create(@RequestBody ImageRecord record) {
    ImageRecord saved = repository.save(record);
    return Result.success(saved);
}

2.2.3 查询列表——返回数组

原来：

@GetMapping
public List<ImageRecord> list() {
    return repository.findAll();
}

改后：

@GetMapping
public Result<List<ImageRecord>> list() {
    List<ImageRecord> records = repository.findAll();
    return Result.success(records);
}

2.2.4 查询单个——不存在时返回错误

原来：

@GetMapping("/{id}")
public ImageRecord getById(@PathVariable Long id) {
    return repository.findById(id).orElse(null);
}

改后：

@GetMapping("/{id}")
public Result<ImageRecord> getById(@PathVariable Long id) {
    return repository.findById(id)
        .map(Result::success)
        .orElse(Result.error(404, "记录不存在"));
}

2.2.5 删除——返回成功但不带数据

原来：

@DeleteMapping("/{id}")
public String delete(@PathVariable Long id) {
    repository.deleteById(id);
    return "deleted";
}

改后：

@DeleteMapping("/{id}")
public Result<Void> delete(@PathVariable Long id) {
    repository.deleteById(id);
    return Result.success();  // data = null
}

2.2.6 上传并识别——返回待识别结果的记录

原来：

@PostMapping("/upload-and-recognize")
public ImageRecord uploadAndRecognize(@RequestParam("file") MultipartFile file) throws IOException {
    // ...上传和调用AI...
    return repository.save(record);
}

改后：

@PostMapping("/upload-and-recognize")
public Result<ImageRecord> uploadAndRecognize(@RequestParam("file") MultipartFile file) throws IOException {
    // ...上传和调用AI逻辑不变...
    ImageRecord saved = repository.save(record);
    return Result.success(saved);
}

2.3 验证

继续使用 curl 查看效果：

# 创建
curl -X POST http://localhost:8080/api/images \
  -H "Content-Type: application/json" \
  -d '{"originalFilename":"test.jpg", "imageUrl":"/uploads/test.jpg"}'

返回会变成：

{
  "code": 200,
  "message": "success",
  "data": {
    "id": 1,
    "originalFilename": "test.jpg",
    "imageUrl": "/uploads/test.jpg",
    ...
  }
}

当我们尝试用一个不存在的编号查找图片时：

# 查询
curl http://localhost:8080/api/images/999

此时会返回：

{
  "code": 404,
  "message": "记录不存在",
  "data": null
}

三、全局异常处理

3.0 为什么我们需要这个

因为：

即使我们写得再好，运行时总有意想不到的异常
不能让前端收到HTML格式的500错误页面

现在，让所有未捕获的异常和手动抛出的异常都返回统一格式的 Result。

创建 src/main/java/com/example/demo/exception/GlobalExceptionHandler.java：

package com.example.demo.exception;

import com.example.demo.common.Result;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    public Result handleException(Exception e) {
        // 记录日志（实际项目用 log）
        e.printStackTrace();
        return Result.error(500, "服务器内部错误：" + e.getMessage());
    }

    // 可以针对性捕获，比如参数校验异常
}

之后再故意制造错误（如请求一个不存在的接口），返回的 JSON 会是：

{"code":500, "message":"服务器内部错误：...", "data":null}

四、Springdoc 接口文档

4.0 为什么我们需要这个

现在你的后端有七八个接口了：健康检查、CRUD、上传、识别等等。你自己写的时候可能记得清清楚楚，但过两周再回来看，或者前端同学来问你"这个接口参数是什么、返回什么"，你大概率要翻半天代码才能答上来。

Springdoc 的作用就是自动生成一份在线接口文档，列出所有接口的地址、参数、返回格式，还能直接在页面上测试。省去了手动写文档的麻烦，也方便前后端联调。

4.1 添加依赖

在 pom.xml 的 <dependencies> 中添加 SpringDoc（Spring Boot 3.x 对应的 Swagger 实现）：

<dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
    <version>2.3.0</version>
</dependency>

springdoc-openapi-starter-webmvc-ui 这个依赖已经内置了 Swagger UI，不需要额外引入任何 UI 包。

4.2 配置类（可选）

大多数情况下 springdoc 零配置就能跑，但加上配置类可以让文档页面更专业。

新建 src/main/java/com/example/demo/config/SpringDocConfig.java：

package com.example.demo.config;

import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class SpringDocConfig {
    @Bean
    public OpenAPI customOpenAPI() {
        return new OpenAPI()
                .info(new Info()
                        .title("AI 小程序后端 API")
                        .version("1.0")
                        .description("垃圾分类识别——图像上传、AI推理、记录管理"));
    }
}

字段	含义
`title`	显示在文档页顶部的标题
`version`	API 版本号
`description`	对整套接口的简要说明

4.3 访问文档

启动项目后，在浏览器打开：

http://localhost:8080/swagger-ui/index.html

你会看到一个可直接交互的 API 文档页面，列出了所有 Controller 的接口，还能在线填入参数、发送请求、查看响应，不需要再开 Postman 或 curl。

五、数据校验

5.1 添加依赖

在 pom.xml 的 <dependencies> 中添加 spring-boot-starter-validation

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

5.2 在实体或DTO上加注解

比如限制文件名不能为空：

import jakarta.validation.constraints.NotBlank;

public class ImageRecord {
    // ...
    @NotBlank(message = "文件名不能为空")
    private String originalFilename;
}

5.3 Controller 参数加 `@Valid`

@PostMapping
public Result<ImageRecord> create(@Valid @RequestBody ImageRecord record) {
    // ...
}

此时如果请求不带 originalFilename，会抛出 MethodArgumentNotValidException，但会被我们的 GlobalExceptionHandler 捕获并返回 500 错误。

为了返回更友好的格式，可以在 GlobalExceptionHandler 中单独处理：

import org.springframework.web.bind.MethodArgumentNotValidException;

@ExceptionHandler(MethodArgumentNotValidException.class)
public Result handleValidation(MethodArgumentNotValidException e) {
    String msg = e.getBindingResult().getAllErrors().get(0).getDefaultMessage();
    return Result.error(400, msg);
}

六、重新打包部署

以下演示一次完整的打包部署过程。

6.0 前置条件假设

Spring Boot 项目根目录位于 G:\DEMO_Project\demo 。
远程 Linux 服务器中 JAVA 项目工作目录为 /opt/app/ 。
Spring Boot 项目中 pom.xml 中为 <version>1.0.0</version>。

6.1 Maven 打包

打开 Intellij IDEA ，选择侧边栏中的 Maven ，选择 执行Maven项目 。

输入 mvn clean package 。

等待出现如下提示：

[INFO] -------------------------------------------
[INFO] BUILD SUCCESS
[INFO] -------------------------------------------
[INFO] Total time:  4.368 s
[INFO] Finished at: 2026-05-20T21:39:41+08:00
[INFO] -------------------------------------------

此时 Spring Boot 项目中出现新文件夹 target 。

在G:\DEMO_Project\demo\target 文件夹下出现两个文件 demo-1.0.0.jar 和 demo-1.0.0.jar.original 和若干文件夹。

注意，我们只需要 demo-1.0.0.jar ，不需要带 original 版本的文件。

6.2 传送文件

我们使用 scp 传送我们打包好的 JAR 文件。

首先，让我们在 Windows 上切换我们的 Powershell 工作目录。

打开 Powershell ，输入以下命令：

PS C:\Users\TerryC> cd "G:\DEMO_Project\demo"
PS G:\DEMO_Project\demo> scp target/demo-1.0.0.jar terryc@1.2.3.4:/opt/app

terryc 此处替换为你在远程服务器的用户名，如 root 。
@1.2.3.4 此处替换为你的服务器外网IP地址，如 @111.111.111.111 。
:/opt/app 此处为你的应用工作目录，你的项目将会在这个目录启动，可替换为其他目录。

6.3 重建软链接，重启服务

在服务器上关闭 demo 项目：

sudo systemctl stop demo

把我们传送到服务器上的 demo-1.0.0.jar 链接到 demo.service 的 demo-current.jar

ln -sf /opt/app/demo-1.0.0.jar /opt/app/demo-current.jar

启动并检查 demo 项目的状态：

sudo systemctl start demo
sudo systemctl status demo

出现 Active: active (running) ，则为成功启动。

terryc@i23fFG3edMoPa321Z:~$ sudo systemctl status demo
● demo.service - Demo Application
     Loaded: loaded (/etc/systemd/system/demo.service; enabled; preset: enabled)
     Active: active (running) since Wed 2026-05-20 22:02:11 CST; 1s ago
   Main PID: 46722 (java)
      Tasks: 14 (limit: 1860)
     Memory: 46.6M (peak: 46.9M)
        CPU: 1.962s
     CGroup: /system.slice/demo.service
             └─46722 /usr/bin/java -Xms512m -Xmx1g -jar /opt/app/demo-current.jar

七、验收清单

所有接口返回统一的 Result 格式（已做）
出错时返回 JSON 而不会出现 500 页面（全局异常处理）
可以访问 doc.html 看到接口文档
提交非法参数时收到 code: 400 和具体错误信息

从零搭建AI小程序全栈实战（二·上篇）：Spring Boot 基础功能开发

Fri, 02 Jan 2026 00:00:00 GMT

:::note

欢迎来到“从零搭建AI小程序全栈实战”系列文章！
此为本系列的第二篇文章，你可以点击跳转到第一篇文章在系列文章中快速跳转。

:::

一、这篇文章将要做的

1.1 回顾

上一篇文章中，我们把笔记本GPU推理服务和服务器Spring Boot骨架都跑起来了，网络也打通了。

我们完成了以下目标：

笔记本跑通GPU推理——驱动、CUDA、PyTorch、Flask
服务器跑通Spring Boot——JDK、Demo应用
打通网络——frps、frpc、验证

1.2 这一篇的目标

集成MySQL + 完整CRUD
图片上传接口
调用笔记本AI推理服务

二、集成 MySQL 与完整 CRUD

2.1 服务器端安装 MySQL

在服务器上执行：

sudo apt install mysql-server -y
sudo mysql_secure_installation   # 按提示设置 root 密码，后面都选 Y

创建数据库和用户：

sudo mysql -u root -p

CREATE DATIF NOT EXISTS mini_app DEFAULT CHARACTER SET utf8mb4;
-- 把 'your_password' 改成自己的强密码，记住它
CREATE USER 'appuser'@'localhost' IDENTIFIED BY 'your_password';
GRANT ALL PRIVILEGES ON mini_app.* TO 'appuser'@'localhost';
FLUSH PRIVILEGES;
EXIT;

2.2 本地项目添加依赖

在你的 pom.xml 里添加依赖（放在 <dependencies> 里现有的 spring-boot-starter-web 旁边）：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>

2.3 配置数据库连接

在 src/main/resources/application.properties 中加入数据库连接（注意替换密码）：

spring.datasource.url=jdbc:mysql://你的IP地址:3306/mini_app?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
spring.datasource.username=appuser
spring.datasource.password=你的密码
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

2.4 创建实体类 ImageRecord

创建 src/main/java/com/example/demo/entity/ImageRecord.java：

package com.example.demo.entity;
import jakarta.persistence.*;
import java.time.LocalDateTime;

@Entity
@Table(name = "image_records")
public class ImageRecord {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String originalFilename;

    @Column(columnDefinition = "TEXT")
    private String imageUrl;        // 存储路径或base64
    private String recognitionResult;
    private LocalDateTime createTime;

    // 必须有无参构造
    public ImageRecord() {}

    // 快捷构造
    public ImageRecord(String originalFilename, String imageUrl) {
        this.originalFilename = originalFilename;
        this.imageUrl = imageUrl;
        this.createTime = LocalDateTime.now();
    }

    // Getter / Setter （IDE生成，篇幅限制省略，你全加上）
    // 至少需要：getId setId getOriginalFilename setOriginalFilename ...
}

2.5 创建 Repository 和 Controller

创建 src/main/java/com/example/demo/repository/ImageRecordRepository.java：

package com.example.demo.repository;
import com.example.demo.entity.ImageRecord;
import org.springframework.data.jpa.repository.JpaRepository;
public interface ImageRecordRepository extends JpaRepository<ImageRecord, Long> {}

创建 src/main/java/com/example/demo/repository/ImageController.java：

package com.example.demo.controller;
import com.example.demo.entity.ImageRecord;
import com.example.demo.repository.ImageRecordRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/api/images")
public class ImageController {
    @Autowired
    private ImageRecordRepository repository;

    @PostMapping
    public ImageRecord create(@RequestBody ImageRecord record) {
        return repository.save(record);
    }

    @GetMapping
    public List<ImageRecord> list() {
        return repository.findAll();
    }

    @GetMapping("/{id}")
    public ImageRecord getById(@PathVariable Long id) {
        return repository.findById(id).orElse(null);
    }

    @DeleteMapping("/{id}")
    public String delete(@PathVariable Long id) {
        repository.deleteById(id);
        return "deleted";
    }
}

2.6 验证

在服务器通过 curl 测试四个接口，确认数据库读写正常。

# 创建一条记录
curl -X POST http://localhost:8080/api/images \
  -H "Content-Type: application/json" \
  -d '{"originalFilename":"test.jpg", "imageUrl":"/uploads/test.jpg"}'

# 查询所有
curl http://localhost:8080/api/images

三、添加图片上传接口

3.1 配置文件上传参数

application.properties 追加：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
file.upload-dir=./uploads

3.2 添加文件上传接口

在 ImageController 中追加：

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.nio.file.*;

@Value("${file.upload-dir}")
private String uploadDir;

@PostMapping("/upload")
public ImageRecord upload(@RequestParam("file") MultipartFile file) throws IOException {
    // 保证目录存在
    Files.createDirectories(Paths.get(uploadDir));

    // 保存文件
    String filename = System.currentTimeMillis() + "_" + file.getOriginalFilename();
    File dest = new File(uploadDir + "/" + filename);
    file.transferTo(dest);

    // 存数据库
    ImageRecord record = new ImageRecord(file.getOriginalFilename(), "/uploads/" + filename);
    return repository.save(record);
}

3.3 配置静态资源映射（让上传的图片可访问）

新建 src/main/java/com/example/demo/config/WebConfig.java：

package com.example.demo.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:./uploads/");
    }
}

3.4 验证

我们使用 curl 模拟上传：

curl -X POST http://localhost:8080/api/images/upload \
  -F "file=@/home/ubuntu/一张测试图片.jpg"

返回结果里应该有 imageUrl: "/uploads/xxxx.jpg"，浏览器访问 http://服务器IP:8080/uploads/xxxx.jpg 能显示图片，这样就成功了。

四、调用 Windows端 AI推理服务

4.1 确认 API 可达

先在服务器上验证穿透仍正常（笔记本端 frpc 要开着）：

curl http://localhost:5000/health

返回 {"cuda":true} 就 OK。

4.2 创建调用 Windows端 API 的服务

创建 src/main/java/com/example/demo/service/AiService.java：

package com.example.demo.service;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;
import java.util.Map;

@Service
public class AiService {
    private final RestTemplate restTemplate = new RestTemplate();
    private final String AI_BASE_URL = "http://localhost:5000";

    public Map<String, Object> predict(Map<String, Object> input) {
        return restTemplate.postForObject(
            AI_BASE_URL + "/predict", input, Map.class);
    }

    public Map<String, Object> health() {
        return restTemplate.getForObject(AI_BASE_URL + "/health", Map.class);
    }
}

4.3 在 Controller 中串联

修改 ImageController，注入 AiService 并添加一个“上传即识别”的接口：

@Autowired
private AiService aiService;

@PostMapping("/upload-and-recognize")
public ImageRecord uploadAndRecognize(@RequestParam("file") MultipartFile file) throws IOException {
    // 1. 保存文件（复用上面的上传逻辑）
    Files.createDirectories(Paths.get(uploadDir));
    String filename = System.currentTimeMillis() + "_" + file.getOriginalFilename();
    File dest = new File(uploadDir + "/" + filename);
    file.transferTo(dest);

    // 2. 调用笔记本 AI 推理
    Map<String, Object> aiInput = Map.of("imageUrl", "/uploads/" + filename);
    Map<String, Object> result = aiService.predict(aiInput);

    // 3. 存库
    ImageRecord record = new ImageRecord(file.getOriginalFilename(), "/uploads/" + filename);
    record.setRecognitionResult(result.toString());  // 实际项目解析具体字段
    return repository.save(record);
}

4.4 全链路测试

我们使用 curl 测试：

curl -X POST http://localhost:8080/api/images/upload-and-recognize \
  -F "file=@/home/ubuntu/一张测试图片.jpg"

如果返回记录中包含 recognitionResult 字段（即使是 "fake_prediction" 也算成功），代表 Spring Boot → 笔记本 AI 调用链路已打通。

五、打包部署到 Linux

5.1 打包 JAR

5.1.1 确认 JAR 文件名

在打包之前，先看一下项目最终生成的JAR叫什么名字。这个名称由 pom.xml 中的三个标签决定：

<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>

拼接规则：{artifactId}-{version}.jar

所以你的JAR文件名叫：demo-0.0.1-SNAPSHOT.jar

5.1.2 在 IDEA 中打包

IDEA 右侧边栏点击 Maven（竖排的 "m" 图标）
展开 demo → Lifecycle
先双击 clean（清理上次构建的旧文件，避免混入过期内容）
等待 BUILD SUCCESS，再双击 package

控制台出现以下字样即打包成功：

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

5.1.3 找到打包好的 JAR

打包完成后，JAR 文件位于项目的 target 目录下：

你的项目目录/
├── src/
├── target/
│   ├── demo-0.0.1-SNAPSHOT.jar      ← 这个就是我们要的
│   └── ...
├── pom.xml
└── ...

在 IDEA 中直接查看：

IDEA 左侧项目文件树，找到 target 文件夹，展开即可看到 demo-0.0.1-SNAPSHOT.jar。

右键点击 JAR 文件 → Open In → Explorer（或 Finder），可以直接在文件资源管理器中定位到该文件，方便下一步上传。

5.2 上传到服务器

:::tip

如果服务器上没有 /opt/app 目录，先 SSH 到服务器执行 mkdir -p /opt/app 创建。

:::

在 Powershell （Win + R 输入 powershell）使用 scp 命令上传服务器：

scp target/demo-xxxx.jar terryc@1.2.3.4:/opt/app

terryc 此处替换为你的用户名，如 root 。
@1.2.3.4 此处替换为你的服务器外网IP地址，如 @111.111.111.111 。
:/opt/app 此处为你的应用工作目录，你的项目将会在这个目录启动，可替换为其他目录。

5.3 在服务器上启动 Spring Boot 项目

以文件名 /opt/app/demo-0.0.1-SNAPSHOT.jar 为例。

5.3.1 使用 nohup 启动

nohup 是最简单的后台启动方式，适合临时测试：

nohup java -jar /opt/app/demo-0.0.1-SNAPSHOT.jar > /opt/app/app.log 2>&1 &

nohup：退出SSH后进程不中断
> app.log 2>&1：把日志输出到文件
&：后台运行

让我们来验证Spring Boot项目是否启动：

tail -f /opt/app/app.log

看到 Started DemoApplication in ... seconds 即启动成功。

但这种方式有明显缺点：

重启服务器后不会自动启动，需要手动执行
想停止只能手动 ps -ef | grep java 找到PID然后 kill
更新JAR包时步骤繁琐：停进程 → 换包 → 重启
时间久了容易忘记项目在哪个目录、用的哪个JAR

所以，下面我们换成更规范的方式。

5.3.2 使用 service 启动（推荐）

5.3.2.0 为什么要推荐 service ？

对比项	nohup	systemd service
开机自启	❌ 需要手动设置脚本	✅ `systemctl enable` 一行搞定
启停操作	找PID → kill	`systemctl start/stop/restart`
崩溃重启	❌ 进程挂了就挂了	✅ 配置 `Restart=on-failure` 自动拉起
日志管理	自己用 `>` 重定向	`journalctl -u demo -f` 统一查看
版本更新	手动替换JAR，容易出错	配合软链接，换JAR后 `systemctl restart` 即可
状态查看	`ps -ef \| grep java`	`systemctl status demo` 一眼看清

5.3.2.1 创建 demo.service 文件

在服务器上创建 service 配置文件：

sudo vim /etc/systemd/system/demo.service

写入以下内容：

[Unit]
Description=Spring Boot Demo Application
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/opt/app
ExecStart=/usr/bin/java -jar /opt/app/demo-current/demo-0.0.1-SNAPSHOT.jar
Restart=on-failure
RestartSec=10

[Install]
WantedBy=multi-user.target

关键字段解释：

字段	含义
`After=network.target`	等网络就绪后再启动，避免数据库连不上
`Type=simple`	标准类型，适用于Java这种前台进程
`WorkingDirectory`	工作目录，上传的文件会存在这里
`ExecStart`	启动命令，指向 /opt/app/demo-current.jar
`Restart=on-failure`	进程崩溃时自动重启
`RestartSec=10`	等10秒再重启，避免频繁重启死循环
`WantedBy=multi-user.target`	多用户模式下自动启动

5.3.2.2 创建 demo-current.jar 软链接

以后更新JAR包时，新版本文件名会是 demo-0.0.2-SNAPSHOT.jar、demo-1.0.0.jar 等。如果 service 文件里写死了具体文件名，每次更新还要改service配置，太麻烦。

用软链接的方式：service 永远指向 demo-current.jar，更新时只需把软链接指向新版本JAR即可。

# 创建软链接，指向当前版本的JAR
ln -s /opt/app/demo-0.0.1-SNAPSHOT.jar /opt/app/demo-current.jar

执行后，/opt/app/demo-current.jar 就指向了真实的JAR文件。可以用 ls -l 验证：

ls -l /opt/app/demo-current.jar
# 输出：demo-current.jar -> /opt/app/demo-0.0.1-SNAPSHOT.jar

5.3.2.3 启动并启用服务

# 重新加载 service 配置
sudo systemctl daemon-reload

# 启动服务
sudo systemctl start demo

# 设置开机自启
sudo systemctl enable demo

# 查看状态
sudo systemctl status demo

看到 active (running) 即成功。

常用管理命令：

sudo systemctl stop demo      # 停止
sudo systemctl restart demo   # 重启
sudo systemctl status demo    # 查看状态
journalctl -u demo -f         # 实时查看日志

5.4 验证部署成功

使用 curl 对项目接口进行测试。

# 服务器本地测试
curl http://localhost:8080/hello
# 应返回：Hello from Server!

curl http://localhost:8080/api/images
# 应返回已创建的图片记录列表

# 浏览器访问
http://你的服务器公网IP:8080/hello
http://你的服务器公网IP:8080/api/images

六、验收清单

GET/POST/DELETE /api/images 四个接口全部正常
POST /api/images/upload 能接收图片并返回可访问URL
POST /api/images/upload-and-recognize 能调通AI并保存识别结果

从零搭建AI小程序全栈实战（一）：环境准备

Thu, 01 Jan 2026 00:00:00 GMT

:::note

欢迎来到“从零搭建AI小程序全栈实战”系列文章！
此为本系列的第一篇文章。

:::

零、写在第一篇文章之前

0.1 总览

欢迎来到"从零搭建AI小程序全栈实战"系列。

这是一套完整的项目驱动型教程，不是零散的知识点堆砌。我们将从一台带GPU的笔记本和一台云服务器开始，一步一步搭建一个真正能用的垃圾分类识别小程序。

本系列文章包括

标题	技术步骤
从零搭建AI小程序全栈实战（一）	环境准备笔记本GPU服务器内网穿透打通
从零搭建AI小程序全栈实战（二·上篇）	Spring Boot 基础功能开发 CRUD + 图片上传 + 调用 AI 推理
从零搭建AI小程序全栈实战（二·下篇）	后端工程化加固统一响应 + 异常处理 + 接口文档 + 数据校验
从零搭建AI小程序全栈实战（三）	微信小程序前端拍照识别历史记录全链路打通
从零搭建AI小程序全栈实战（四）	模型训练 ResNet图像分类 Flask推理API部署

学完之后，你将拥有：

一个自己训练的ResNet图像分类模型，跑在笔记本GPU上
一个Spring Boot业务后端，能接收图片、调AI、存数据库
一个微信小程序，拍照上传，1秒出分类结果
一条内网穿透通道，笔记本在家，服务器在云端，网络互通

这当然是一个玩具项目，也是一个麻雀虽小、五脏俱全的全栈AI应用。

0.2 你会获得什么

把 GPU 变成远程推理服务
独立搭建 Spring Boot 业务后端
微信小程序从拍照到出结果的全链路贯通

0.3 你需要准备什么

硬件

一台带 NVIDIA 显卡的笔记本（GTX 1060 以上都能跑，不一定要 4060）
一台云服务器（2核2G，够跑Spring Boot）

软件基础

会用基础的Linux命令行例如 cd / ls / mkdir
写过一点 Python，知道 import 怎么用
不需要了解 Java 和 Spring Boot
不需要了解微信小程序

0.4 成品

一个能够识别有机物和可回收物的算法模型
一个能够上传图片进行识别的微信小程序
一个能够正常处理接口并转发请求的SpringBoot后端

一、这篇文章将要做的

1.1 总览

学完这篇文章，你能让笔记本GPU对外提供API，同时服务器能够调用到它。

1.2 目标

笔记本跑通GPU推理——驱动、CUDA、PyTorch、Flask
服务器跑通Spring Boot——JDK、Demo应用
打通网络——frps、frpc、验证

二、Windows环境

2.1 配置 Nvidia 显卡

2.1.1 安装nvidia-smi

打开 NVIDIA 官网下载对应驱动（Game Ready 即可），安装后重启。在命令行执行 nvidia-smi，确认驱动版本和 CUDA 版本（如 CUDA 12.x）。

2.1.2 安装CUDA Toolkit

下载 CUDA Toolkit 11.8（兼容性好，占用空间小）： CUDA Toolkit 11.8 Download
选择 Windows → x86_64 → exe(local)，安装时选“精简”模式。

2.1.3 安装cuDNN

下载 cuDNN（需要注册 NVIDIA 账号）： cuDNN Archive
选择和 CUDA 11.8 对应的版本，解压后将 bin、include、lib 文件夹内容复制到 CUDA 安装目录（默认 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.8）对应文件夹内。

2.2 配置 conda 环境

下载 Miniconda Windows 64-bit，一路下一步安装
打开 Anaconda Prompt，创建虚拟环境：

conda create -n ai-env python=3.10 -y
conda activate ai-env

2.3 配置 PyTorch

安装 PyTorch：

pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118

验证 GPU：

python -c "import torch; print(torch.cuda.is_available())"

输出 True 即成功。

2.4 搭建第一个 Flask API

安装 Flask：

pip install flask

新建目录 DEMO_Project\demo-assist\api-server ，在里面创建 app.py ：

from flask import Flask, request, jsonify
import torch

app = Flask(__name__)

@app.route('/health')
def health():
    return jsonify({"status": "ok", "cuda": torch.cuda.is_available()})

@app.route('/predict', methods=['POST'])
def predict():
    # 暂时返回固定结果，后续接模型
    data = request.get_json()
    return jsonify({"result": "fake_prediction", "input": data})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

启动

python app.py

用浏览器访问 http://localhost:5000/health ，看到包含"cuda":true 的 JSON 即可。

2.5 安装内网穿透客户端 frpc

下载 frp Windows 版，解压到本地，放到 DEMO_Project\demo-assist\frp 文件夹中。
先不配置，等服务器端 ready。

2.6 安装 Intellij IDEA

打开浏览器，访问 JetBrains 官网
选择 Community Edition（免费版，够用），点击下载
下载完成后双击安装包，一路下一步，注意以下选项：
- Create Desktop Shortcut → 勾选（桌面快捷方式）
- Add "Open Folder as Project" → 勾选
- 其余默认即可
安装完成后启动 IDEA，选择 "Don't send"（不发送使用数据）

三、在 Windows 上创建 Spring Boot 项目

3.1 创建 Spring Boot 项目

在 IDEA 欢迎界面，点击 New Project
左侧选择 Spring Boot（如果没有，点左侧 Spring Initializr）

右侧配置以下信息：

选项	值
Name	`demo`
Location	`[你的项目目录]\DEMO_project\demo`
Language	`Java`
Type	`Maven`
Group	`com.example`
Artifact	`demo`
JDK	选择 `JDK 21`（如果没有，点旁边的下载按钮下载）
Java	`21`
Packaging	`Jar`

点击 Next
在依赖选择界面，左侧找到 Spring Web，勾选它
点击 Create（或 Finish）
IDEA 会自动下载依赖，等待右下角进度条走完

3.2 编写 DemoApplication

IDEA 默认已经生成了 DemoApplication.java，路径在 src/main/java/com/example/demo/DemoApplication.java
将其内容替换为以下代码

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    @GetMapping("/hello")
    public String hello() {
        return "Hello from Server!";
    }
}

3.3 本地启动验证

IDEA 右上角找到绿色三角形按钮，点击运行（或快捷键 Shift + F10）
底部控制台出现 Started DemoApplication in ... seconds 表示启动成功
打开浏览器访问 http://localhost:8080/hello
看到 Hello from Server! 即成功
按红色方块按钮停止（或快捷键 Ctrl + F2）

3.4 打包 JAR

IDEA 右侧边栏点击 Maven（竖排的 "m" 图标）
展开 demo → Lifecycle
双击 package
等待控制台出现 BUILD SUCCESS
生成的 JAR 文件在项目目录 target/demo-0.0.1-SNAPSHOT.jar

四、服务器环境

4.1 安全组放行端口

安全组放行端口：8080、5000、7000（入方向）

4.2 安装软件包

4.2.1 安装 JDK 21

SSH 连接服务器，执行以下命令：

sudo apt update && sudo apt upgrade -y
sudo apt install openjdk-21-jdk git curl -y
java -version   # 确认版本为21

4.2.2 安装 frps

安装内网穿透服务端 frps：

wget https://github.com/fatedier/frp/releases/download/v0.52.3/frp_0.52.3_linux_amd64.tar.gz
tar -xzf frp_0.52.3_linux_amd64.tar.gz
cd frp_0.52.3_linux_amd64/

4.3 创建 frps 服务

创建 /etc/systemd/system/frps.service ：

sudo vi /etc/systemd/system/frps.service

输入以下内容

[Unit]
Description=frps
After=network.target

[Service]
Type=simple
ExecStart=/root/frp_0.52.3_linux_amd64/frps -c /root/frp_0.52.3_linux_amd64/frps.toml
Restart=on-failure
User=root

[Install]
WantedBy=multi-user.target

使用 :wq 保存并退出

五、打通网络

5.1 在 Windows端配置 frpc

编辑解压后的 frpc.toml（或 frpc.ini）：

serverAddr = "你的服务器公网IP"
serverPort = 7000

[[proxies]]
name = "ai-api"
type = "tcp"
localIP = "127.0.0.1"
localPort = 5000
remotePort = 5000

frpc -c frpc.toml

出现 success 等字样即连接成功。

5.2 在服务器端配置 frps

cd frp_0.52.3_linux_amd64/

编辑frps.toml

bindPort = 7000
# 如果需要 dashboard 可加下面两行（不要暴露公网）
# webServer.addr = "127.0.0.1"
# webServer.port = 7500

在服务器端启动刚配置好的服务

sudo systemctl start frps

5.3 验证打通

在服务器上执行：

curl http://localhost:5000/health

如果能返回笔记本上的 JSON（包含 "cuda":true），说明网络已打通。

现在，你的 Spring Boot 应用可以配置 http://localhost:5000 作为模型推理地址，无需公网 IP。

六、验收清单

笔记本 python -c "import torch; print(torch.cuda.is_available())" 输出 True
笔记本 Flask API 的 /health 接口能返回 GPU 可用信息
服务器 curl http://自己公网IP:8080/hello 返回 Hello from Server!
服务器 curl http://localhost:5000/health 能拿到笔记本返回的结果

技术分享随笔

从零搭建AI小程序全栈实战（四）：模型训练

一、这篇文章将要做的

1.1 回顾

1.2 目标

1.3 最终效果预览

二、 数据集准备与预处理

2.1 选择数据集

2.2 下载数据集并整理

三、模型训练脚本

3.1 安装 PyTorch 依赖

3.2 编写训练脚本

3.3 开始训练

四、使用真实模型替换 Flask API

4.1 改造 Flask API

4.2 本地测试新 API

五、Spring Boot 后端适配新模型

5.1 新增 DTO 类

5.2 修改 AiService

5.3 修改 Controller

5.4 确保网络穿透正常

六、全链路验证

七、验证清单

从零搭建AI小程序全栈实战（三）：微信小程序前端

一、这篇文章将要做的

1.1 回顾

1.2 目标

二、创建第一个小程序项目

2.1 注册小程序账号与下载工具

注册（如果还没有）

下载开发者工具

2.2 创建项目

2.3 认识四个核心文件

2.4 改造首页

2.5 预览效果

三、发起HTTP请求连接后端

3.1 配置服务器域名

3.2 封装网络请求工具

3.3 在页面中调用后端

3.4 验证全链路

四、历史记录列表页

4.1 创建 history 页面

4.2 注册页面

4.3 添加底部导航栏

五、图片压缩

5.0 为什么要压缩

5.1 改造 index.js

六、前端系统优化

6.1 加载状态与空状态完善

6.1.1 历史记录页优化 pages/history/history.js

6.1.2 历史记录页模板优化pages/history/history.wxml

6.1.3 历史记录页样式补充

6.2 错误处理

6.3 完善UI细节

6.3.1 图片预览

6.3.2 统一色调

6.3.3 首页美化与细节交互

6.3.4 底部导航图标生成

七、验收清单

从零搭建AI小程序全栈实战（二·下篇）：Java 后端工程化加固

一、这篇文章将要做的

1.1 回顾

1.2 目标

二、统一响应格式

2.0 为什么需要统一格式

2.1 创建 Result 类

2.2 改造 Controller

2.2.1 导入 Result 类

2.2.2 新建记录——返回创建好的数据

2.2.3 查询列表——返回数组

2.2.4 查询单个——不存在时返回错误

2.2.5 删除——返回成功但不带数据

2.2.6 上传并识别——返回待识别结果的记录

2.3 验证

三、全局异常处理

3.0 为什么我们需要这个

四、Springdoc 接口文档

4.0 为什么我们需要这个

4.1 添加依赖

4.2 配置类（可选）

二、数据集准备与预处理

5.1 改造 `index.js`

6.1.1 历史记录页优化 `pages/history/history.js`

6.1.2 历史记录页模板优化`pages/history/history.wxml`

5.3 Controller 参数加 `@Valid`

二、集成 MySQL 与完整 CRUD

2.1 服务器端安装 MySQL