小程序云开发之数据库增删改查操作
最近在学习小程序的云开发，刚好学到云数据库，这里做个笔记，方便下次查看
先创建一个小程序项目，不要选择云开发，然后也不要选择模板，不然会创建许多不需要用到的东西。
然后我们在pages中创建一个目录，假设就叫study,
然后，我们点击云开发
选择数据库，点击+号创建一个student表
然后我们在这个表中添加数据(‘0001’,‘张三’,‘2020’,‘软件工程’)
从上到下分别代表学生的学号、姓名、年级和专业
然后我们修改数据权限，以便后续进行增删改查
我们修改study.wxml文件，代码如下：
输入学号：<input bindinput="getStuId"/>
输入姓名：<input bindinput="getName"/>
输入年级：<input bindinput="getGrade"/>
输入专业：<input bindinput="getMajor"/>
<button type="primary" bindtap="addStu">添加学生</button>
<view wx:for="{{list}}">
<view>学号：{{item.stuId}} 姓名：{{item.name}}</view>
<view>年级：{{item.grade}} 专业：{{item.major}}</view>
</view>
然后修改student.wxss文件，设置input的外观，代码如下：
input{
border:1px solid gray;
}
然后修改student.json文件，设置标题，代码如下：
{
"usingComponents": {},
"navigationBarTitleText": "学生列表"
}
最后修改study.js文件，代码如下：
//全局变量，方便获取输入信息
let stuId=''
let name=''
let grade=''
let major=''
Page({
onLoad(){
//获取学生信息
this.getList()
},
getList(){
let db=wx.cloud.database()
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
},
//添加学生
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{
//添加学生信息
wx.cloud.database().collection('student')
.add({
data:{
stuId:stuId,
name:name,
grade:grade,
major:major
}
})
.then(res=>{
console.log('添加成功')
//添加后，刷新数据
this.getList()
})
.catch(err=>{
console.log('添加失败')
})
}
}
})
当我们输入信息，若有一个信息为空时，会显示提示信息
添加成功后，如下图
我们打开云开发，查看记录列表，发现李四的消息里有openid而张三的却没有，这是因为李四的信息是我们在控制台添加的，而张三不是
我们要把李四的openid复制，然后在张三信息里添加openid,openid的值和李四的一样，这样我们后续才能对张三进行删除、修改操作。
接着我们再创建一个目录，假设名为study1
我们先修改study.wxml，代码如下：
输入学号：<input bindinput="getStuId"/>
输入姓名：<input bindinput="getName"/>
输入年级：<input bindinput="getGrade"/>
输入专业：<input bindinput="getMajor"/>
<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>
再修改study.js文件，代码如下：
//全局变量，方便获取输入信息
let stuId=''
let name=''
let grade=''
let major=''
Page({
onLoad(){
//获取学生信息
this.getList()
},
getList(){
let db=wx.cloud.database()
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
},
//添加学生
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{
//添加学生信息
wx.cloud.database().collection('student')
.add({
data:{
stuId:stuId,
name:name,
grade:grade,
major:major
}
})
.then(res=>{
console.log('添加成功')
//添加后，刷新数据
this.getList()
})
.catch(err=>{
console.log('添加失败')
})
}
},
//转发到具体页面
goDetail(event){
wx.navigateTo({
url:"/pages/study1/study1?id="+ event.currentTarget.dataset.id
})
}
})
然后我们修改study1.wxml文件，代码如下：
<view>
<view>学号：{{student.stuId}} 姓名：{{student.name}}</view>
<view>年级：{{student.grade}} 专业：{{student.major}}</view>
</view>
修改学生专业：
<input bindinput="getMajor"></input>
<button bindtap='update' type="primary">修改专业</button>
<button type="warn" bindtap='delete'>删除学生</button>
修改study1.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/study/study"
})
})
.catch(err=>{
console.log('删除失败',err)
})
}
else if(res.cancel==true){//取消删除
console.log('已取消')
}
}
})
}
})
效果如下，
点击某行学生后，跳转到学生页面
点击删除时，会有提示
确定删除后跳转会学生列表页面
