示例09 综合实战全栈项目

示例09 综合实战全栈项目

对应教程：第 9 章 · 综合实战与最佳实践

项目结构

my-cloudbase-app/
├── client/                  # 前端（Vue/React）
│   ├── src/
│   │   ├── pages/
│   │   ├── components/
│   │   └── utils/
│   │       └── cloudbase.js # SDK 初始化
│   └── package.json
├── functions/               # 云函数
│   ├── get-articles/
│   ├── create-article/
│   └── upload-image/
├── cloudbaserc.json         # CloudBase 配置
└── README.md
​

1. 统一 SDK 初始化

// client/src/utils/cloudbase.js
import cloudbase from '@cloudbase/js-sdk'

const app = cloudbase.init({ env: 'your-env-id' })
export const db = app.database()
export const auth = app.auth()
export const storage = app.storage()
export const callFunction = (name, data) =>
  app.callFunction({ name, data })
export default app
​

2. 文章管理云函数

// functions/get-articles/index.js
const cloud = require('@cloudbase/node-sdk')
const tcb = cloud.init({ env: cloud.SYMBOL_CURRENT_ENV })
const db = tcb.database()

exports.main = async (event, context) => {
  const { page = 1, pageSize = 10, tag } = event
  const skip = (page - 1) * pageSize
  
  let query = db.collection('articles')
    .where({ status: 'published' })
  
  if (tag) {
    query = db.collection('articles')
      .where({ status: 'published', tags: tag })
  }
  
  const { data, total } = await query
    .orderBy('createdAt', 'desc')
    .skip(skip)
    .limit(pageSize)
    .field({ title: true, summary: true, author: true, createdAt: true })
    .end()
  
  return { data, total, page, pageSize }
}
​

3. 前端页面调用

// client/src/pages/ArticleList.vue
import { callFunction } from '@/utils/cloudbase'

export default {
  data() {
    return { articles: [], page: 1, total: 0, loading: false }
  },
  async mounted() {
    await this.loadArticles()
  },
  methods: {
    async loadArticles() {
      this.loading = true
      const res = await callFunction('get-articles', {
        page: this.page,
        pageSize: 10
      })
      this.articles = res.result.data
      this.total = res.result.total
      this.loading = false
    }
  }
}
​

4. 上线检查清单

• 环境配置正确（dev / prod 分离）
• 数据库安全规则已配置（非全公开写）
• 云函数超时与内存设置合理
• 静态托管已部署并绑定域名
• HTTPS 已开启
• 前端无硬编码环境 ID
• 云函数日志正常无报错