微信小程序云开发实现订坐位功能_微信小程序云开发实现座位预定

微信小程序云开发实现订坐位功能
本人专注使用云开发，实现一个前端可以做后端以及整个项目的部署与上线。
如果觉得我讲的好就可以给我点个赞。也可以加我微信了解详情。

1.首先你需要先了解 一下基本的云开发知识。

我们主要用到的数据库的操作为，查询，添加，删除。
1.查询 我们查的是全部定坐消息，所以我们应该使用云函数请求数据库，可以查询到表中所有数据，这样权限就更高了。如果是在js中查询只能查询自己添加的数据，以及cms添加的 数据。
2.添加，这个操作是属于自己本身 的操作不需要其他的参与，所以我们可以使用本地请求数据库。
3.删除，这个和添加是一样的，要求是只能删除自己添加的数据 ，就可以使用本地请求数据库删除数据，如果你需要删除别人的数据，这时候就应该需要使用云函数提高自己的权限了。

//查询操作
1.传统的查询数据库的语法。 list_name:这个是数据表的名字
	const db = wx.cloud.database()
	db.collection('list_name').get({
      success(res){
      //查询成功返回的数据res中
        console.log(res)
      },fail(err){
      //请求失败时的报错信息
        console.log(err)
      }
    })
//添加操作
	db.collection('list_name').add({
		data:{
			name:'李四',
			price:'15'
		}
	}).than(res=>{}).catch(res=>{})
//删除操作
	db.collection('a_1').doc(字段id唯一值).remove()
	.than(res=>{}).catch(res=>{})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

开始我们的项目阶段了。首先我们先要了解这个排座的原理。

1.我们以8行8列的座位来举例说明吧，我举例以下几个问题，
问题1，怎么把8*8的矩阵列表渲染出来？
问题2，如何把我们的订座信息渲染进去？
问题3，我的数据库表该怎么设计？

如上图所示在8*8的矩阵中我们要渲染进去我们可以使用两个for循环把数组循环出来 ，
数组数据比如如先数据

let lists = [[
			{
				row:0,
				low:0,
				data:[],
				ifshow:true
			},{
				row:0,
				low:1,
				data:[],
				ifshow:true
			},{
				row:0,
				low:2,
				data:[],
				ifshow:false
			}
			],[
			{
				row:1,
				low:0,
				data:[],
				ifshow:true
			},{
				row:1,
				low:1,
				data:[],
				ifshow:true
			},{
				row:1,
				low:2,
				data:[],
				ifshow:true
			},
			]]
			...........
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

---

@通过上面的数据我们可以知道row为行号，low为列号。ifshow为是否已选座。data储存选坐信息。

-------------通过数据库的设计来确定数据的模式、

我的数据库的设置为：如下图。

数据库中只有一个表有五个字段，选择的行，选择的列，姓名，创建的时间以及XXXXX（反正不是文档id，你们猜猜那个字段是什么吧。）就这些就可以构成一个选课系统，如果要不同教室的话就还需要一个教室表 。

我们获取到数后我们就可以在前端渲染出来了。我们同样是通过循环把上面的list列表装配好。然后通过 wxml文件的循环遍历出来。

let setting = []
      for(let i= 0;i<row;i++){
        let set = []
        for(let j=0;j<low;j++){
          let rows = {}
          for(let m= 0;m<res.result.data.length;m++){
            if(i == res.result.data[m].chiose_row && j == res.result.data[m].chiose_low){
              rows['type'] = true;
              rows['login_inf'] = res.result.data[m];
              rows['row'] = i;
              rows['low'] = j;
              break;
             }else{
              rows['type'] = false;
              rows['login_inf'] = ''
              rows['row'] = i;
              rows['low'] = j;
             }
          }
          set.push(rows);
        };
        setting.push(set);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

你们可可能会有疑问为什么会是 这个样子的，其实第一个循环是循环的行，第二个是列。第三个是循环的我们从数据库中请求过来的数据。判断一下是否有已经选坐了的，如果有就用一个break跳出来不然会覆盖掉的。最后我们的setting就是我们组装到的列表数据了我们就可以通过wxml渲染进页面中去了。

<!-- 表格样式 -->
<view class="padding-xs">
  <view class="table">
    <view class="tr" wx:for="{{listdata}}" wx:key='index'>
      <block wx:for="{{item}}" wx:key='index2' wx:for-item="imgList" >
        <view class="th {{imgList.type?'bg-red':'bg-green'}} text-white" bindtap="showModal" data-target="Modal" data-item="{{imgList}}" style=" width: {{datalow>10?'70rpx':'90rpx'}};">
        {{imgList.row+1}}-{{imgList.low+1}}
        </view>
      </block>
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

到这里我们就完成了一个基本的选座系统的显示，

我们开始讲解如何添加选坐

这里我们是通过增加数据库中的数据来实现选座功能的应用。具体代码如下。

wx.cloud.database().collection('login_infs').add({data:{
          chiose_low:this.data.modellist.low,
          chiose_row:this.data.modellist.row,
          treach:this.data.modellist.treach,
          login_name:this.data.content,
          srting_time:this.data.nowtime
        }}).then(res=>{
          console.log(res);
          ml_showToast('成功！');
          wx.navigateBack({
            delta: 1,
          })
        })
1
2
3
4
5
6
7
8
9
10
11
12
13

以上是我 的一个小项目的 源码，如有不正确的希望大神可以不吝赐教，大家也可以 看看我的思路。最后希望大家可以给我一个关注。我会继续创造下去的，谢谢大家。