微信小程序云开发 初学者入门教程二

微信小程序云开发 初学者入门教程二-前端操作数据库模块

如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必有所得。

数据库操作大多数需要用户openid,需要先配置好吧login云函数,如果已经配置好了,获取用户的openid之后,开始步骤:

步骤

1:打开云开发控制台,进入到数据库管理模块

图片.png

2:选择添加集合,集合名称为counters,添加完成之后的界面

图片.png

3:可以看到counters集合出现在左侧集合列表中

注:集合必须在云开发控制台中创建

4:新增一条记录试一试

a. 打开pages/databaseGuide/databaseGuide.js文件,定位到 onAdd 方法

图片.png

b:选中所有注释过的代码,ctrl+/快捷键,解除注释

  onAdd: function () {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败:', err)
      }
    })
  },

c. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录

{ "_id": "数据库自动生成记录 ID 字段",
 "_openid": "数据库自动插入记录创建者的 openid", "count": 1 }

在桌面新建一个json文件,将这段代码复制黏贴进去,备用

图片.png

导入之后显示的界面

图片.png

d: 点击按钮:新增记录

图片.png

e:在云开发 -> 数据库 -> counters 集合中可以看到新增的记录

图片.png

微信小程序云开发数据库操作一添加记录实例演示

官方文档解读:

<!-- 新增记录 -->
  <view class="guide" wx:if="{{step === 3}}">
    <text class="headline">新增记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onAdd 方法</text>
    <text class="p">2. 把注释掉的代码解除注释</text>
    <image class="code-image" src="../../images/code-db-onAdd.png" mode="aspectFit"></image>
    <text class="p">3. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录</text>
    <text class="code">
    {
      "_id": "数据库自动生成记录 ID 字段",
      "_openid": "数据库自动插入记录创建者的 openid",
      "count": 1
    }
    </text>
    <text class="p">4. 点击按钮</text>
    <button size="mini" type="default" bindtap="onAdd">新增记录</button>
    <text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>
    <text class="p">5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep" wx:if="{{counterId}}">下一步</button>
    </div>
  </view>

做一个小demo

效果如下:点击新增记录的按钮的时候,会出现提示,新增的记录为多少,并且有弹框提示,新增记录成功。

U6QBH3PeXy.gif

打开云开发控制台,点击数据库模块,可以看到刚刚添加的记录

图片.png

wxml代码:

<button size="mini" type="default" bindtap="onAdd">新增记录</button>
<text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>

js代码:

// pages/databaseGuide/databaseGuide.js

const app = getApp()

Page({

  data: {
    step: 1,
    counterId: '',
    openid: '',
    count: null,
    queryResult: '',
  },

  onLoad: function (options) {
    if (app.globalData.openid) {
      this.setData({
        openid: app.globalData.openid
      })
    }
  },

  onAdd: function () {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败:', err)
      }
    })
  },
})

对于数据库的增删改查 后续会有更加细致的文章: 1:微信小程序云开发数据库操作一添加记录 2:微信小程序云开发数据库操作二查询记录 3:微信小程序云开发数据库操作三删除记录 4:微信小程序云开发数据库操作四更新记录

下班之后带着电脑回家,在地铁上拥挤非常,感觉电脑都要被挤坏了,这几天反思了一下从前,每天上班下班,完成老板给的任务就可以潇洒走人了,总觉得自己不够努力,又或者每天重复着老旧的技术,周而复始,早已落后于前端发展的潮流,不觉开始惶恐。每天晚上开始学习,戒掉游戏和手机,让自己尽快达到一个沉迷于代码不可自拔的境界。

原文作者:祈澈姑娘

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java达人

项目本机部署过程中的若个问题

项目本机部署对老手来说纯粹是一个操作的过程,没有任何的技术难点,因此不会去关注,也不常去操作,有时候换一台计算机,或者在别人的计算机上开发一个新项目,部署的时候...

19650
来自专栏程序猿

面试问题之mysql修改哪些配置文件可以进行优化?

配置文件中具体修改的内容是什么呢?要是面试官问你,你该怎么回答?你想下,你坐在一间屋子里。 服务器的mysql性能优化,有两个大...

31770
来自专栏后端云

Raft算法和Gossip协议

raft 集群中的每个节点都可以根据集群运行的情况在三种状态间切换:follower, candidate 与 leader。leader 向 follower...

53030
来自专栏进击的君君的前端之路

npm、npm scripts

21140
来自专栏逸鹏说道

Rookey.Frame企业级快速开发框架开源了

Rookey.Frame是一套基于.NET MVC + easyui的企业级极速开发框架,支持简单逻辑模块零代码编程、支持工作流(BPM)、支持二次开发,具有...

46660
来自专栏TARS GO

TarsGo新版本发布,支持protobuf,zipkin和自定义插件

Tars是腾讯从2008年到今天一直在使用的后台逻辑层的统一应用框架,目前支持C++、Java、PHP、Nodejs、Golang语言。该框架为用户提供了涉及到...

35360
来自专栏FreeBuf

如何通过Emond在macOS上实现持久化访问

在这篇文章中,我们会介绍如何通过emond在macOS上实现持久化访问。根据苹果公司的说法,事件监视进程(emond)会“接受来自各种服务的事件,通过一个简单的...

21090
来自专栏lonelydawn的前端猿区

基于java swing的设备管理系统

一.系统介绍 一个简易的设备管理系统,包含了管理员登录注册、设备录入、设备状态管理功能,具体状态有购买时、正在运行、正在修理和已报废。 二.开发环境 开发环境:...

34170
来自专栏云瓣

打包优化实践(如何Code Spliting)

开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例:浏览器中输入 http://localhost:3000/a...

13320
来自专栏数据和云

深入剖析:RAC的全局死锁问题

杨廷琨(yangtingkun) 云和恩墨 CTO 高级咨询顾问,Oracle ACE 总监,ITPUB Oracle 数据库管理版版主 RAC的全局死锁时间检...

46590

扫码关注云+社区

领取腾讯云代金券