迎不删档内测《KO堂》道具商城上线

《从零搭建游戏道具商城：基于《KO堂》内测的实战技术指南》

一、技术选型与项目初始化

我们采用前后端分离架构，前端使用Vue 3 + Element Plus，后端使用Node.js + Express，数据库使用MySQL 8.0。

1.1 环境准备

安装Node.js 18.0+：

``` Ubuntu/Debian curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs macOS brew install node@18 验证安装 node --version npm --version ```

安装MySQL 8.0：

``` Ubuntu/Debian sudo apt install mysql-server-8.0 sudo systemctl start mysql sudo mysql_secure_installation 创建数据库 mysql -u root -p CREATE DATABASE kt_mall DEFAULT CHARACTER SET utf8mb4; ```

1.2 项目结构创建

创建项目目录并初始化：

``` mkdir kt-game-mall cd kt-game-mall mkdir backend frontend cd backend npm init -y cd ../frontend npm init vue@latest 选择以下配置： √ TypeScript: No √ JSX: No √ Router: Yes √ Pinia: Yes √ ESLint: No √ Prettier: No ```

二、后端服务搭建

2.1 安装依赖

进入backend目录安装必要包：

``` cd backend npm install express mysql2 cors dotenv npm install -D nodemon ```

2.2 数据库表设计

创建商品表、用户表、订单表：

``` -- 商品表 CREATE TABLE items ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, description TEXT, price DECIMAL(10,2) NOT NULL, stock INT DEFAULT 0, category ENUM('weapon', 'armor', 'consumable', 'special') NOT NULL, game_server VARCHAR(50) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, INDEX idx_category (category), INDEX idx_server (game_server) ); -- 用户表（关联游戏账号） CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, game_uid VARCHAR(50) UNIQUE NOT NULL, balance DECIMAL(10,2) DEFAULT 0.00, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- 订单表 CREATE TABLE orders ( id VARCHAR(50) PRIMARY KEY, user_id INT NOT NULL, item_id INT NOT NULL, quantity INT NOT NULL, total_price DECIMAL(10,2) NOT NULL, status ENUM('pending', 'completed', 'failed') DEFAULT 'pending', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id), FOREIGN KEY (item_id) REFERENCES items(id) ); ```

2.3 核心接口实现

创建app.js主文件：

``` const express = require('express'); const mysql = require('mysql2/promise'); const cors = require('cors'); require('dotenv').config(); const app = express(); app.use(cors()); app.use(express.json()); // 数据库连接池 const pool = mysql.createPool({ host: process.env.DB_HOST || 'localhost', user: process.env.DB_USER || 'root', password: process.env.DB_PASSWORD || '', database: process.env.DB_NAME || 'kt_mall', waitForConnections: true, connectionLimit: 10, queueLimit: 0 }); // 获取商品列表 app.get('/api/items', async (req, res) => { try { const { category, server, page = 1, limit = 20 } = req.query; let sql = 'SELECT FROM items WHERE 1=1'; const params = []; if (category) { sql += ' AND category = ?'; params.push(category); } if (server) { sql += ' AND game_server = ?'; params.push(server); } sql += ' LIMIT ? OFFSET ?'; params.push(parseInt(limit), (page - 1) limit); const [rows] = await pool.execute(sql, params); res.json({ success: true, data: rows }); } catch (error) { res.status(500).json({ success: false, error: error.message }); } }); // 创建订单 app.post('/api/orders', async (req, res) => { const connection = await pool.getConnection(); try { await connection.beginTransaction(); const { user_id, item_id, quantity } = req.body; // 检查商品库存 const [items] = await connection.execute( 'SELECT price, stock FROM items WHERE id = ? FOR UPDATE', [item_id] ); if (items.length === 0) { throw new Error('商品不存在'); } if (items[0].stock < quantity) { throw new Error('库存不足'); } // 计算总价 const total_price = items[0].price quantity; // 生成订单号 const order_id = 'ORD' + Date.now() + Math.random().toString(36).substr(2, 9); // 创建订单 await connection.execute( 'INSERT INTO orders (id, user_id, item_id, quantity, total_price, status) VALUES (?, ?, ?, ?, ?, ?)', [order_id, user_id, item_id, quantity, total_price, 'pending'] ); // 扣减库存 await connection.execute( 'UPDATE items SET stock = stock - ? WHERE id = ?', [quantity, item_id] ); await connection.commit(); res.json({ success: true, data: { order_id, total_price } }); } catch (error) { await connection.rollback(); res.status(400).json({ success: false, error: error.message }); } finally { connection.release(); } }); // 启动服务器 const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); }); ```

创建.env环境变量文件：

``` DB_HOST=localhost DB_USER=root DB_PASSWORD=your_password DB_NAME=kt_mall PORT=3000 ```

在package.json中添加启动脚本：

``` "scripts": { "start": "node app.js", "dev": "nodemon app.js" } ```

三、前端商城实现

3.1 安装UI组件库

在frontend目录下：

``` cd frontend npm install element-plus npm install axios ```

3.2 配置Element Plus

修改main.js：

``` import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(router) app.use(ElementPlus) app.mount('app') ```

3.3 商品列表组件

创建src/views/Items.vue：

``` ```

3.4 配置路由

修改router/index.js：

``` import { createRouter, createWebHistory } from 'vue-router' import Items from '../views/Items.vue' const routes = [ { path: '/', name: 'items', component: Items } ] const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes }) export default router ```

四、部署与配置

4.1 生产环境配置

创建Nginx配置文件/etc/nginx/sites-available/kt-mall：

``` server { listen 80; server_name your-domain.com; 前端静态文件 location / { root /var/www/kt-mall/frontend/dist; try_files $uri $uri/ /index.html; } 后端API代理 location /api/ { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } ```

4.2 PM2进程管理

在后端目录安装PM2并配置：

``` cd backend npm install pm2 -g pm2 init ```

修改生成的ecosystem.config.js：

``` module.exports = { apps: [{ name: 'kt-mall-api', script: 'app.js', instances: 'max', exec_mode: 'cluster', env: { NODE_ENV: 'production', DB_HOST: 'localhost', DB_USER: 'kt_mall_user', DB_PASSWORD: 'your_secure_password', DB_NAME: 'kt_mall', PORT: 3000 } }] } ```

启动服务：

``` pm2 start ecosystem.config.js pm2 save pm2 startup ```

4.3 数据库安全配置

创建专用数据库用户：

``` CREATE USER 'kt_mall_user'@'localhost' IDENTIFIED BY 'your_secure_password'; GRANT SELECT, INSERT, UPDATE, DELETE ON kt_mall. TO 'kt_mall_user'@'localhost'; FLUSH PRIVILEGES; ```

五、测试验证

5.1 插入测试数据

在MySQL中执行：

``` INSERT INTO items (name, description, price, stock, category, game_server) VALUES ('烈焰剑', '攻击力+50，附带火焰伤害', 1500.00, 100, 'weapon', 'server1'), ('龙鳞甲', '防御力+80，火抗性+30%', 2500.00, 50, 'armor', 'server1'), ('生命药水', '瞬间恢复500点生命值', 100.00, 1000, 'consumable', 'server1'), ('传送卷轴', '可传送到任意已访问地点', 500.00, 200, 'special', 'server1'); INSERT INTO users (game_uid, balance) VALUES ('player_001', 10000.00), ('player_002', 5000.00); ```

5.2 启动测试

按顺序执行以下命令：

``` 启动后端 cd backend npm run dev 启动前端（新终端） cd frontend npm run dev 访问前端 打开浏览器访问 http://localhost:5173 ```

验证步骤：

• 访问前端页面，查看商品列表是否正确显示
• 测试分类筛选功能
• 点击购买按钮，查看订单是否创建成功
• 检查数据库库存是否正确扣减
• 验证订单表是否生成记录

5.3 性能优化建议

在实际部署中，建议添加以下配置：

• 在Nginx中启用gzip压缩
• 配置MySQL查询缓存
• 添加Redis缓存热门商品数据
• 使用CDN分发前端静态资源
• 配置HTTPS证书