全网小程序·云开发·云数据库增删查改实战案例

前端

2023-11-03 20:55:31

利用小程序、云开发和云数据库构建留言功能的实用指南

简介

在移动互联网时代，小程序以其轻量便捷的特性受到广泛欢迎。本文将基于全网小程序，结合云开发和云数据库，以留言功能为例，讲解增删查改的实战操作，为小程序开发提供参考。

需求分析

留言功能主要包含以下需求：

用户端留言： 用户可以输入留言内容、上传图片、填写手机号和邮箱。
管理员端留言列表： 管理员可以查看所有留言，并标记已读未读状态。

技术选型

小程序框架：全网小程序
云开发平台：腾讯云云开发
云数据库：腾讯云云数据库（MongoDB）

实现步骤

一、云数据库创建

登录腾讯云控制台，创建MongoDB云数据库实例。
设置集合名称为"messages"，用于存储留言数据。

二、云函数创建

创建三个云函数：add_message、get_messages、mark_read。
add_message：接收用户留言内容，并存入云数据库。
get_messages：获取所有留言数据，并返回给管理员。
mark_read：标记留言为已读状态。

三、小程序开发

1. 用户端留言页面

使用表单收集留言内容、图片、手机号、邮箱。
调用add_message云函数，提交留言。

2. 管理员端留言列表页面

调用get_messages云函数，获取所有留言。
为每条留言添加点击事件，调用mark_read云函数，标记为已读。

四、测试与验证

用户在小程序中输入留言，并提交。
管理员可以在留言列表中查看留言，并标记为已读。
留言数据可以在云数据库中查询验证。

代码示例

云函数：add_message

def main_handler(event, context):
    # 获取留言数据
    data = event["body"]
    content = data["content"]
    image_url = data["image_url"]
    phone = data["phone"]
    email = data["email"]

    # 将留言数据存入云数据库
    db = context.get_mongodb()
    result = db.messages.insert_one({
        "content": content,
        "image_url": image_url,
        "phone": phone,
        "email": email,
        "read": False
    })

    return result.inserted_id

小程序端：用户留言页面

// 提交留言
submitMessage() {
  const content = this.data.content
  const image_url = this.data.image_url
  const phone = this.data.phone
  const email = this.data.email

  wx.cloud.callFunction({
    name: 'add_message',
    data: {
      content,
      image_url,
      phone,
      email
    },
    success: res => {
      wx.showToast({
        title: '留言成功',
        icon: 'success'
      })
    },
    fail: err => {
      wx.showToast({
        title: '留言失败',
        icon: 'error'
      })
    }
  })
}