Java SpringBoot+Vue 智能客服后台实战：从零搭建到生产部署

Java SpringBoot+Vue 智能客服后台实战：从零搭建到生产部署 | 极客日志

// 统一响应体
@Data
public class ApiResponse<T> {
    private Integer code; // 状态码，如 200 成功，401 未授权
    private String message; // 提示信息
    private T data; // 业务数据
    private Long timestamp; // 时间戳

    public static <T> ApiResponse<T> success(T data) {
        ApiResponse<T> response = new ApiResponse<>();
        response.setCode(200);
        response.setMessage("success");
        response.setData(data);
        response.setTimestamp(System.currentTimeMillis());
        return response;
    }
}

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 注册处理器，指定连接路径，允许跨域
        registry.addHandler(myWebSocketHandler(), "/ws/chat")
                .setAllowedOrigins("*"); // 生产环境应指定具体域名
    }

    @Bean
    public WebSocketHandler myWebSocketHandler() {
        return new MyWebSocketHandler();
    }
}

@Component
public class MyWebSocketHandler extends TextWebSocketHandler {
    // 保存在线用户（客服或用户）的会话，Key 可以是用户 ID
    private static final Map<String, WebSocketSession> onlineUsers = new ConcurrentHashMap<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 连接建立，通常从 session 属性中获取用户 ID（在连接时通过 URL 参数传递）
        String userId = (String) session.getAttributes().get("userId");
        if (userId != null) {
            onlineUsers.put(userId, session);
            log.info("用户 {} 连接成功，当前在线人数：{}", userId, onlineUsers.size());
        }
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理客户端发来的消息
        String payload = message.getPayload();
        // 解析消息内容，可能是普通聊天消息，也可能是心跳包"ping"
        if ("ping".equals(payload)) {
            // 心跳回应，保持连接活跃
            session.sendMessage(new TextMessage("pong"));
            return;
        }
        // ... 处理业务消息，如转发给目标用户
        // 1. 解析出目标用户 ID 和消息内容
        // 2. 从 onlineUsers 中获取目标用户的 session
        // 3. 调用 session.sendMessage() 发送消息
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // 连接关闭，从在线列表移除
        String userId = (String) session.getAttributes().get("userId");
        onlineUsers.remove(userId);
        log.info("用户 {} 断开连接，原因：{}", userId, status);
    }
}

@Component
public class JwtUtil {
    // 密钥，应从配置文件中读取
    private String secret = "your-secret-key-change-in-production";
    // 过期时间，如 7 天
    private long expiration = 604800000L;

    // 生成 Token
    public String generateToken(String username) {
        Date now = new Date();
        Date expiryDate = new Date(now.getTime() + expiration);
        return Jwts.builder()
                .setSubject(username)
                .setIssuedAt(now)
                .setExpiration(expiryDate)
                .signWith(SignatureAlgorithm.HS512, secret)
                .compact();
    }

    // 验证并解析 Token
    public String getUsernameFromToken(String token) {
        Claims claims = Jwts.parser()
                .setSigningKey(secret)
                .parseClaimsJws(token)
                .getBody();
        return claims.getSubject();
    }

    // 验证 Token 是否有效
    public boolean validateToken(String token) {
        try {
            Jwts.parser().setSigningKey(secret).parseClaimsJws(token);
            return true;
        } catch (Exception e) {
            log.error("JWT token 验证失败：{}", e.getMessage());
            return false;
        }
    }
}

// src/utils/request.js
import axios from 'axios'
import { Message } from 'element-ui'
import router from '../router'

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取
  timeout: 15000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加 token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    console.error('Request Error:', error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 假设后端统一返回格式为 { code, message, data }
    if (res.code !== 200) {
      // 业务逻辑错误，例如 token 过期
      Message.error(res.message || 'Error')
      if (res.code === 401) {
        // 未授权，跳转到登录页
        router.push('/login')
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      // 成功，直接返回 data 部分
      return res.data
    }
  },
  error => {
    // HTTP 状态码错误，如 404, 500
    console.error('Response Error:', error)
    Message.error(error.message || '网络请求失败')
    return Promise.reject(error)
  }
)
export default service

// src/store/modules/user.js
const state = {
  token: localStorage.getItem('token') || '',
  userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}')
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
    localStorage.setItem('token', token)
  },
  SET_USER_INFO: (state, userInfo) => {
    state.userInfo = userInfo
    localStorage.setItem('userInfo', JSON.stringify(userInfo))
  },
  REMOVE_INFO: (state) => {
    state.token = ''
    state.userInfo = {}
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
  }
}

const actions = {
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      // 调用封装的 request 发起登录请求
      loginApi(userInfo).then(response => {
        const { token, user } = response
        commit('SET_TOKEN', token)
        commit('SET_USER_INFO', user)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
  logout({ commit }) {
    commit('REMOVE_INFO')
    // 可能还需要调用后端的退出接口
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

export default {
  data() {
    return {
      ws: null,
      messages: [],
      inputMessage: ''
    }
  },
  mounted() {
    this.initWebSocket()
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close()
    }
  },
  methods: {
    initWebSocket() {
      const token = this.$store.state.user.token
      // 连接 WebSocket 服务器，将 token 作为参数或放在 header 中（需后端支持）
      const wsUrl = `ws://your-backend-domain/ws/chat?token=${token}`
      this.ws = new WebSocket(wsUrl)
      this.ws.onopen = () => {
        console.log('WebSocket 连接成功')
        // 开始发送心跳，保持连接
        this.heartBeat()
      }
      this.ws.onmessage = (event) => {
        const msg = JSON.parse(event.data)
        if (msg.type === 'pong') {
          // 心跳回应，忽略
          return
        }
        // 处理业务消息，如添加到 messages 数组
        this.messages.push(msg)
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }
      this.ws.onclose = () => {
        console.log('WebSocket 连接关闭')
        // 尝试重连
        setTimeout(() => {
          this.initWebSocket()
        }, 3000)
      }
    },
    heartBeat() {
      // 每隔一段时间发送心跳
      setInterval(() => {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
          this.ws.send('ping')
        }
      }, 30000) // 30 秒一次
    },
    sendMessage() {
      if (this.inputMessage.trim() && this.ws) {
        const msgObj = {
          type: 'text',
          content: this.inputMessage,
          to: this.currentSession.userId
        }
        this.ws.send(JSON.stringify(msgObj))
        this.inputMessage = ''
      }
    }
  }
}

@Service
public class MessageService {
    @Async // 声明为异步方法
    public void handleMessageAsync(ChatMessage message) {
        // 1. 消息持久化到数据库（可能较慢）
        messageRepository.save(message);
        // 2. 调用第三方服务发送推送通知
        pushNotificationService.send(message);
        // 这个方法会在线程池中执行，不会阻塞调用者
    }
}

spring:
  datasource:
    hikari:
      maximum-pool-size: 20 # 根据数据库和服务器配置调整
      minimum-idle: 10
      connection-timeout: 30000 # 连接超时 30 秒
      idle-timeout: 600000 # 空闲连接存活 10 分钟
      max-lifetime: 1800000 # 连接最大生命周期 30 分钟

server {
    listen 80;
    server_name your-domain.com;
    # 前端静态资源
    location / {
        root /path/to/your/vue/dist;
        index index.html;
        try_files $uri $uri/ /index.html; # 支持 Vue Router 的 history 模式
    }
    # 反向代理到后端 SpringBoot 服务
    location /api/ {
        proxy_pass http://127.0.0.1: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;
    }
    # 代理 WebSocket 连接
    location /ws/ {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 3600s; # WebSocket 长连接超时时间
    }
}

Java SpringBoot+Vue 智能客服后台实战：从零搭建到生产部署

Java SpringBoot+Vue 智能客服后台实战：从零搭建到生产环境部署

1. 为什么选择 SpringBoot + Vue 来做？

2. 核心实现：后端 SpringBoot 三板斧

2.1 RESTful API 设计

2.2 WebSocket 实现实时消息推送

2.3 JWT 鉴权机制

3. 核心实现：前端 Vue 工程化

3.1 Axios 封装与拦截器

3.2 Vuex 状态管理

3.3 Element UI 组件化开发

4. 生产环境部署与优化

4.1 后端优化：异步与连接池

4.2 前端部署：Nginx 配置

4.3 监控与日志

5. 避坑指南：我遇到的五个'坑'

6. 写在最后与延伸思考

更多推荐文章

相关免费在线工具

Java SpringBoot+Vue 智能客服后台实战：从零搭建到生产部署

Java SpringBoot+Vue 智能客服后台实战：从零搭建到生产环境部署

1. 为什么选择 SpringBoot + Vue 来做？

2. 核心实现：后端 SpringBoot 三板斧

2.1 RESTful API 设计

2.2 WebSocket 实现实时消息推送

2.3 JWT 鉴权机制

3. 核心实现：前端 Vue 工程化

3.1 Axios 封装与拦截器

3.2 Vuex 状态管理

3.3 Element UI 组件化开发

4. 生产环境部署与优化

4.1 后端优化：异步与连接池

4.2 前端部署：Nginx 配置

4.3 监控与日志

5. 避坑指南：我遇到的五个'坑'

6. 写在最后与延伸思考

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具