【免费开放源码】审批类小程序项目实战（增删改查篇）

hiddenSharp429

已于 2024-07-15 14:03:06 修改

阅读量1.8k

点赞数 2

分类专栏： # 零基础审批小程序实战微信原生小程序文章标签：数据库微信小程序前端小程序

于 2022-12-24 13:21:12 首次发布

本文链接：https://blog.csdn.net/Zchengjisihan/article/details/128427474

版权

微信原生小程序同时被 2 个专栏收录

32 篇文章 9 订阅

订阅专栏

零基础审批小程序实战

15 篇文章 5 订阅

订阅专栏

第一节：什么构成了微信小程序、创建一个自己的小程序

第二节：微信开发者工具使用教程

第三节：深入了解并掌握小程序核心组件

第四节：初始化云函数和数据库

第五节：云数据库的增删改查

第六节：项目大纲以及制作登录、注册页面

第七节：制作活动申请页面

第八节：活动申请页面的补充

第九节 ”我的“页面制作

第十节：活动详情页面制作

第十一节：活动历史页面制作

第十二节：预约老师页面制作

第十三节：预约历史页面制作

第十四节：活动审批端制作

第十五节：预约审批端制作

项目的Github仓库地址

这个项目是当时大一大二自学前端的时候做的一个算是比较大的项目，主体原型是汕头大学校团委微信小程序，该微信小程序使用微信原生语法和腾讯云开发框架开发，旨在简化汕头大学校团委的教师预约申请和活动申请的审批流程。因为一切的代码以及框架都是从零搭建的，经过了几个版本的迭代和摸爬滚打的探索，已经稳定运行了将近两年的时间。所以想写这个系列的文章，一方面是分享一些开发经历以及心得，另一方面是对学校组织贡献一点微薄之力～

希望通过这个系列的博客，能够深入介绍“汕头大学校团委微信小程序”的开发过程、功能实现和技术细节，帮助更多的开发者和用户了解和使用该小程序。我们也欢迎更多的开发者为这个开源项目做出贡献，共同完善和优化这个项目。欢迎提交PR请求和留下你的问题。这个项目单纯为爱发电，所以不会有任何金钱相关的利益。如果这个项目对你有帮助，可以给我一个小星星吗？

前言

在开始制作我们登录和注册页面之前，我们要先了解云开发数据库的增删改查操作，那么我们现在开始吧~

云开发数据库的增删改查操作

两种调用数据库的方法及其利弊

首先我们应该知道，调用数据库有两种方法。第一种是直接在JS文件中调用，方法比较简单，但具有局限性，它只能返回20条记录！第二种是在云函数中调用数据库，方法比较繁琐，但它可以返回100条记录！同时它也有缺点，就是不支持command操作。但不管是哪种方法，调用数据库的大致步骤都是一致的。1.获取数据库引用、2.构造查询/更新条件、3.发出请求。

这里我们先介绍在JS文件中的数据库操作

增删改查中的”查“

在我们调用并查询数据库的时候，如果一个集合里的记录太多，我们又只想查询我需要的那几条记录的时候我们该怎么做呢？答案是添加查询指令！可以把查询指令理解成筛选器，比如我想查找图书馆里中文书籍，那么我就可以使用where或者doc方法来对所有图书的国籍进行筛选。除此查询指令之外，还支持逻辑指令与查询指令搭配使用。如下图

在JS文件中请求数据库方法示例：（这里我只演示了查操作的代码）

                // 1. 获取数据库引用
                  const db = wx.cloud.database()
                // 2. 构造查询语句
                // collection 方法获取一个集合的引用
                // where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。也      支持高级的查询条件（比如大于、小于、in 等），具体见文档查看支持列表
                // get 方法会触发网络请求，往数据库取数据
                db.collection("你集合的名称")

              //where和doc都是用来起到筛选的作用的
               .where({

                     account:account

              })
               //执行“查”操作

              .get({})
               //箭头函数，es6中的语法，then是查操作成功执行的函数，catch是查操作失败执行的函数

              .then(res=>{   

               })

              .catch(res=>{

              })

由此可类推，当我想要添加数据到数据库中的时候（如创建账号密码，提交申请）就需要用到“增”的操作，也就是add。只需要把上图的.get改成.add即可！除此之外还有“改”操作对应的代码是upstate！

增删改查中的“增”

下面我将演示”增“操作

应用场景：当我输入完账号密码和姓名时候，我点击了注册，在验证完我输入的账号密码姓名是否为空后，运行下面”增“操作的代码后，发现在数据库的集合中新增了一跳记录，并且有_id和_openid属性，这是为什么呢，这两个属性是什么意思？

db.collection("studentUser")
                     .add({
                            data:{
                                   account:this.data.account,
                                   password:this.data.password,
                                   name:this.data.name,
                            }
                     })
                     .then(res=>{
                            console.log('注册成功')
                            console.log("账号是",this.data.account)
                            console.log("密码是",this.data.password)
                            console.log("姓名是",this.data.name)
                            wx.showToast({
                                   title: '已注册成功',
                            })

                     })
                     .catch(res=>{
                            wx.showToast({
                                   title: '注册失败',
                                   icon : "none"
                            })
                     })

每条记录都有一个 _id 字段用以唯一标志一条记录、一个 _openid 字段用以标志记录的创建者，即小程序的用户。需要特别注意的是，在管理端（控制台和云函数）中创建的不会有 _openid 字段，因为这是属于管理员创建的记录。开发者可以自定义 _id，但不可自定义和修改 _openid 。_openid 是在文档创建时由系统根据小程序用户默认创建的，开发者可使用其来标识和定位文档。

我先来解释标橙的文字意思。简单来说，_id属性是每条记录在这个集合中的身份牌，而_openid则是创建者的身份牌（每个人的_openid对个人而言是唯一的）

标蓝的意思是，当开发者自己去数据库的集合中手动添加记录的时候，这个记录只会拥有_id属性，而不会拥有_openid属性。