基于nodejs + Koa +Nuxt3的订单系统项目实战

news2025/5/11 17:03:21

以下是一个基于 Node.js + Koa + Nuxt3 的订单系统项目实战指南，包含关键实现步骤和代码示例：

一、项目架构设计

project/
├── backend/           # Koa 后端
│   ├── config/        # 配置文件
│   ├── controllers/   # 控制器
│   ├── models/        # 数据库模型
│   ├── routes/        # 路由
│   ├── middleware/    # 自定义中间件
│   └── app.js         # 入口文件
└── frontend/          # Nuxt3 前端
    ├── composables/   # 业务逻辑
    ├── components/     # 组件
    ├── pages/          # 页面
    └── nuxt.config.ts  # 配置文件

二、后端实现（Koa）

1. 基础配置

# 创建项目
mkdir order-system && cd order-system
mkdir backend && cd backend
npm init -y
npm install koa @koa/router koa-bodyparser mysql2 sequelize jsonwebtoken

2. 数据库模型（Sequelize）

// backend/models/Order.js
const { DataTypes } = require('sequelize');
const sequelize = require('../config/database');

const Order = sequelize.define('Order', {
  userId: DataTypes.INTEGER,
  productId: DataTypes.INTEGER,
  quantity: DataTypes.INTEGER,
  totalPrice: DataTypes.FLOAT,
  status: {
    type: DataTypes.ENUM('pending', 'completed', 'cancelled'),
    defaultValue: 'pending'
  }
});

module.exports = Order;

3. JWT 认证中间件

// backend/middleware/auth.js
const jwt = require('jsonwebtoken');

const auth = async (ctx, next) => {
  const token = ctx.headers.authorization?.split(' ')[1];
  if (!token) ctx.throw(401, 'Unauthorized');
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    ctx.state.user = decoded;
    await next();
  } catch (err) {
    ctx.throw(401, 'Invalid token');
  }
};

4. 订单路由示例

// backend/routes/orders.js
const Router = require('@koa/router');
const router = new Router({ prefix: '/api/orders' });
const OrderController = require('../controllers/OrderController');

router.get('/', auth, OrderController.getAllOrders);
router.post('/', auth, OrderController.createOrder);
router.put('/:id', auth, OrderController.updateOrderStatus);

三、前端实现（Nuxt3）

1. 安装依赖

cd ../frontend
npx nuxi init .
npm install
npm install @pinia/nuxt axios

2. 订单列表页面

<!-- frontend/pages/orders.vue -->
<script setup>
const { data: orders } = await useFetch('/api/orders', {
  headers: { Authorization: `Bearer ${useAuth().token}` }
});
</script>

<template>
  <div v-for="order in orders" :key="order.id">
    <h3>{{ order.product.name }}</h3>
    <p>Status: {{ order.status }}</p>
  </div>
</template>

3. 状态管理（Pinia）

// frontend/stores/order.ts
export const useOrderStore = defineStore('order', {
  actions: {
    async createOrder(productId: number, quantity: number) {
      return $fetch('/api/orders', {
        method: 'POST',
        body: { productId, quantity }
      });
    }
  }
});

四、关键功能实现

1. 支付集成（示例：Stripe）

// backend/controllers/PaymentController.js
const stripe = require('stripe')(process.env.STRIPE_KEY);

exports.createPaymentIntent = async (ctx) => {
  const { amount } = ctx.request.body;
  const paymentIntent = await stripe.paymentIntents.create({
    amount: amount * 100,
    currency: 'usd'
  });
  ctx.body = { clientSecret: paymentIntent.client_secret };
};

2. 订单状态机

// backend/models/Order.js
Order.prototype.updateStatus = async function(newStatus) {
  const allowedTransitions = {
    pending: ['completed', 'cancelled'],
    cancelled: [],
    completed: []
  };
  
  if (!allowedTransitions[this.status].includes(newStatus)) {
    throw new Error('Invalid status transition');
  }
  
  this.status = newStatus;
  return this.save();
};

五、部署优化

1. PM2 配置

// ecosystem.config.js
module.exports = {
  apps: [{
    name: 'order-api',
    script: './backend/app.js',
    instances: 'max',
    env: {
      NODE_ENV: 'production',
      DATABASE_URL: 'mysql://user:pass@host/db'
    }
  }]
};

2. Nuxt3 部署配置

// frontend/nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  },
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || 'http://localhost:3000'
    }
  }
});

六、安全实践

输入验证：

// 使用 koa-validate
app.use(validate({
  validateRequest: true,
  validationOptions: { abortEarly: false }
}));

速率限制：

npm install koa-ratelimit

const ratelimit = require('koa-ratelimit');

app.use(ratelimit({
  driver: 'memory',
  db: new Map(),
  duration: 60000,
  max: 100
}));

七、调试技巧

使用 Nuxt DevTools：

npm install -D @nuxt/devtools

Koa 调试中间件：

app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

常见问题解决方案

跨域问题：

// backend/app.js
const cors = require('@koa/cors');
app.use(cors({
  origin: process.env.CLIENT_URL,
  credentials: true
}));

Nuxt3 服务端代理：

// frontend/nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    devProxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
});