小程序云开发之数据库增删改查操作

小白学习，大神略过。

 

创建一张新的表格

 

增加数据

 

 

权限处理

 

 

下面开始代码编写

index.wxml

<!--index.wxml-->
输入学号：<input bindinput="getStuId"/>
输入姓名：<input bindinput="getName"/>
输入年级：<input bindinput="getGrade"/>
输入专业：<input bindinput="getMajor"/>
输入年龄：<input bindinput="getAge"/>
输入性别：<input bindinput="getAge"/>
<button type="primary" bindtap="addStu">添加学生</button>
<view wx:for="{{list}}">
    <view>学号：{{item.stuId}} 姓名：{{item.name}}</view>
    <view>年级：{{item.grade}} 专业：{{item.major}}</view>
</view>

 

 输入框样式

input{
    border:1px solid gray;
}

 json 配置

这个其实是当前页面标题配置

"navigationBarTitleText": "学生列表"

 与用户交互的 index.js 文件

//全局变量，方便获取输入信息
let stuId=''
let name=''
let grade=''
let major=''
let age=''
let sex=''
Page({
    onLoad(){
        //获取学生信息
        this.getList()
    },
    getList(){
        let db = wx.cloud.database()
        // 查询 student 这张表
        db.collection('student')
        .get() 
        .then(res=>{
            this.setData({
                list:res.data  // 拿到表中的数据
            })
            console.log('获取信息成功')
        })
        .catch(err=>{
            console.log('获取信息失败')
        })
    },
    //获取学生id
    getStuId(event){
        stuId = event.detail.value
    },
    //获取学生姓名
    getName(event){
        name = event.detail.value
    },
    //获取学生年级
    getGrade(event){
        grade = event.detail.value
    },
    //获取学生专业
    getMajor(event){
        major = event.detail.value
    },
    //获取学生性别
    getSex(event){
        sex = event.detail.value
    },
    //获取学生年龄
    getAge(event){
        age = event.detail.value
    },
    //添加学生
    addStu(){
        //当输入为空时，打印提示信息
        if(stuId == ''){
            wx.showToast({
                icon:"none",
                title:"学号不能为空"
            })
        }else if(name == ''){
            wx.showToast({
                icon:"none",
                title:"姓名不能为空"
            })
        }else if(grade == ''){
            wx.showToast({
                icon:"none",
                title:"年级不能为空"
            })
        }else if(major == ''){
            wx.showToast({
                icon:"none",
                title:"专业不能为空"
            })
        }else if(age == ''){
            wx.showToast({
                icon:"none",
                title:"年龄不能为空"
            })
        }else if(sex == ''){
            wx.showToast({
                icon:"none",
                title:"性别不能为空"
            })
        }else{
            //添加学生信息
            wx.cloud.database().collection('student')
            .add({
                data:{
                    stuId:stuId,
                    name:name,
                    grade:grade,
                    major:major,
                    age:age,
                    sex:sex
                }
            })
            .then(res=>{
                console.log('添加成功')
                 //添加后，刷新数据
                this.getList()
            })
            .catch(err=>{
                console.log('添加失败')
            })
        }
    }
})

这里面的代码逻辑其实就是获取 student 这张表格中的数据，并对外提供获取表中字段的方法，添加到表中数据的方法。

 这时候编辑一下可以看到下图

表中插入数据

往数据库表 student 中插入一条数据 

点击添加，这样在表中就添加进去 “002、李四” 这条数据 。

这时候打开云开发，查看记录列表，发现李四的消息里有openid而张三的却没有，这是因为李四的信息是我们在控制台添加的，而张三不是：

 我们要把李四的openid复制，然后在张三信息里添加openid,openid的值和李四的一样，这样我们后续才能对张三进行删除、修改操作。

对表中数据进行移除操作

在创建一个页面对表中数据进行删除

先修改 index.wxml

<!--index.wxml-->
输入学号：<input bindinput="getStuId"/>
输入姓名：<input bindinput="getName"/>
输入年级：<input bindinput="getGrade"/>
输入专业：<input bindinput="getMajor"/>
输入年龄：<input bindinput="getAge"/>
输入性别：<input bindinput="getSex"/>

<button type="primary" bindtap="addStu">添加学生</button>
<view wx:for="{{list}}">
    <view bindtap="goDetail" data-id="{{item._id}}">
    学号：{{item.stuId}} 姓名：{{item.name}} 年级：{{item.grade}} 专业：{{item.major}} 
    </view>
</view>

在修改 index.js

增加跳转方法：

// 跳转到具体页面
    goDetail(event){
        wx.navigateTo({
            url:"/pages/student/student?id="+ event.currentTarget.dataset.id
        })
    }

完整的代码：

//全局变量，方便获取输入信息
let stuId=''
let name=''
let grade=''
let major=''
let age=''
let sex=''
Page({
    onLoad(){
        //获取学生信息
        this.getList()
    },
    getList(){
        let db = wx.cloud.database()
        // 查询 student 这张表
        db.collection('student')
        .get() 
        .then(res=>{
            this.setData({
                list:res.data  // 拿到表中的数据
            })
            console.log('获取信息成功')
        })
        .catch(err=>{
            console.log('获取信息失败')
        })
    },
    //获取学生id
    getStuId(event){
        stuId = event.detail.value
    },
    //获取学生姓名
    getName(event){
        name = event.detail.value
    },
    //获取学生年级
    getGrade(event){
        grade = event.detail.value
    },
    //获取学生专业
    getMajor(event){
        major = event.detail.value
    },
    //获取学生性别
    getSex(event){
        sex = event.detail.value
    },
    //获取学生年龄
    getAge(event){
        age = event.detail.value
    },
    //添加学生
    addStu(){
        //当输入为空时，打印提示信息
        if(stuId == ''){
            wx.showToast({
                icon:"none",
                title:"学号不能为空"
            })
        }else if(name == ''){
            wx.showToast({
                icon:"none",
                title:"姓名不能为空"
            })
        }else if(grade == ''){
            wx.showToast({
                icon:"none",
                title:"年级不能为空"
            })
        }else if(major == ''){
            wx.showToast({
                icon:"none",
                title:"专业不能为空"
            })
        }else if(age == ''){
            wx.showToast({
                icon:"none",
                title:"年龄不能为空"
            })
        }else if(sex == ''){
            wx.showToast({
                icon:"none",
                title:"性别不能为空"
            })
        }else{
            //添加学生信息
            wx.cloud.database().collection('student')
            .add({
                data:{
                    stuId:stuId,
                    name:name,
                    grade:grade,
                    major:major,
                    age:age,
                    sex:sex
                }
            })
            .then(res=>{
                console.log('添加成功')
                 //添加后，刷新数据
                this.getList()
            })
            .catch(err=>{
                console.log('添加失败')
            })
        }
    },

    // 跳转到具体页面
    goDetail(event){
        wx.navigateTo({
            url:"/pages/student/student?id="+ event.currentTarget.dataset.id
        })
    }
})

student.wxml

<view>
    <view>学号：{{student.stuId}} 姓名：{{student.name}}</view>
    <view>年级：{{student.grade}} 专业：{{student.major}}</view>
    <view>年龄：{{student.age}} 性别：{{student.sex}}</view>
</view>
修改学生专业：
<input bindinput="getMajor"></input>
<button bindtap='update' type="primary">修改专业</button>
<button type="warn" bindtap='delete'>删除学生</button>

student.js

var id = ''
let major = ''
Page({
    onLoad(options){
        id = options.id
        this.getDetail()
    },
    getDetail(){
        wx.cloud.database().collection('student')
        .doc(id)
        .get()
        .then(res => {
            console.log('获取成功',res)
            this.setData({
                student:res.data
            })
        })
        .catch(err => {
            console.log('获取失败',err)
        })
    },
    //获取学生专业
    getMajor(event){
        major = event.detail.value
    },
    //修改学生
    update(){
        if(major == ''){
            wx.showToast({
                icon:"none",
                title:"专业不能为空"
            })
        }else{
            wx.cloud.database().collection('student')
            .doc(id)
            .update({
                data:{
                     major:major
                }
            })
            .then(res => {
                console.log('修改成功',res)
                //修改后刷新
                this.getDetail()
            })
            .catch(err => {
                console.log('修改失败',err)
            })
        }
    },
    //删除学生
    delete(){
        //弹窗提示
        wx.showModal({
            title:"确定删除吗？",
            content:"您再仔细想想要不要开除该学生",
            success(res){
                if(res.confirm == true){ //确定删除
                    wx.cloud.database().collection('student')
                    .doc(id)
                    .remove()
                    .then(res => {
                        console.log('删除成功',res)
                        wx.navigateTo({
                            url:"/pages/index/index"
                        })
                    })
                    .catch(err => {
                        console.log('删除失败',err)
                    })
                }
                else if(res.cancel == true){ //取消删除
                    console.log('已取消')
                }
            }
        })
    }
})

记得在 app.json 配置页面路径

{
  "pages":[
    "pages/index/index",
    "pages/student/student"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

这样就能达到效果了