多端大前端项目实施方案

一套完整的多端协同方案，采用统一技术栈实现全平台覆盖。以下是详细实施步骤：

项目架构概览

multi-platform-project/
├── client-web/           # 网页端（大屏展示）
├── client-desktop/       # 桌面端（Win/Mac）
├── client-mobile/        # 移动端（Android/iOS）
├── server/               # 服务端
└── shared/               # 共享代码库

1. 环境准备

基础环境要求

# 检查Node版本 (推荐v18.18.0)
node -v
# 检查npm版本 (推荐v9.8.1)
npm -v
# 安装pnpm (推荐v8.10.0)
npm install -g pnpm@8.10.0

2. 创建共享代码库

mkdir multi-platform-project && cd multi-platform-project
mkdir shared && cd shared
pnpm init -y# 安装共享依赖
pnpm add axios@1.6.0 jwt-decode@3.1.2 socket.io-client@4.7.2
pnpm add -D typescript@5.2.2 @types/node@20.8.7

shared/src/index.ts (核心共享逻辑)

/*** 共享工具类 - 多端通用功能*/
export class SharedUtils {// JWT鉴权处理static verifyToken(token: string): boolean {try {const decoded: any = jwtDecode(token);// 检查令牌是否过期return decoded.exp * 1000 > Date.now();} catch (error) {return false;}}// 格式化日期static formatDate(date: Date): string {return new Intl.DateTimeFormat('zh-CN', {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit'}).format(date);}
}/*** 网络请求类 - 封装Axios*/
export class ApiClient {private axiosInstance;constructor(baseURL: string) {this.axiosInstance = axios.create({baseURL,timeout: 10000});// 请求拦截器添加tokenthis.axiosInstance.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;});}// 通用请求方法request<T>(config: AxiosRequestConfig): Promise<T> {return this.axiosInstance(config).then(res => res.data);}
}/*** Socket客户端 - 多端统一心跳和消息处理*/
export class SocketClient {private socket: Socket;private heartbeatInterval: NodeJS.Timeout;constructor(serverUrl: string) {this.socket = io(serverUrl);// 连接处理this.socket.on('connect', () => {console.log('Socket connected:', this.socket.id);this.startHeartbeat();});// 断线重连this.socket.on('disconnect', () => {console.log('Socket disconnected');this.stopHeartbeat();});}// 启动心跳检测private startHeartbeat() {this.heartbeatInterval = setInterval(() => {this.socket.emit('heartbeat', { timestamp: Date.now() });}, 30000); // 每30秒一次心跳}// 停止心跳检测private stopHeartbeat() {clearInterval(this.heartbeatInterval);}// 发送消息send(event: string, data: any) {this.socket.emit(event, data);}// 监听消息on(event: string, callback: (...args: any[]) => void) {this.socket.on(event, callback);}
}

3. 服务端实现 (Node + Express + Socket.io + SQLite)

cd .. && mkdir server && cd server
pnpm init -y# 安装依赖
pnpm add express@4.18.2 sqlite3@5.1.6 socket.io@4.7.2 jsonwebtoken@9.0.2 cors@2.8.5
pnpm add -D nodemon@3.0.1 @types/express@4.17.20 @types/cors@2.8.14 typescript@5.2.2

server/src/index.ts

import express from 'express';
import http from 'http';
import { Server } from 'socket.io';
import cors from 'cors';
import jwt from 'jsonwebtoken';
import sqlite3 from 'sqlite3';
import { open } from 'sqlite';// 初始化Express
const app = express();
const server = http.createServer(app);
const PORT = process.env.PORT || 3000;// JWT配置
const JWT_SECRET = 'your-secret-key'; // 生产环境需更换为环境变量// 中间件
app.use(cors());
app.use(express.json());// 初始化数据库
let db: any;
(async () => {db = await open({filename: './database.db',driver: sqlite3.Database});// 创建用户表await db.exec(`CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT,username TEXT UNIQUE NOT NULL,password TEXT NOT NULL,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)`);// 创建媒体文件表await db.exec(`CREATE TABLE IF NOT EXISTS media (id INTEGER PRIMARY KEY AUTOINCREMENT,user_id INTEGER NOT NULL,type T