新建一个修改云函数 art_update_row
接收前端传递过来的数据，然后解构出来，重新将值使用数据库更新方法更新到数据库
const db=uniCloud.database()
exports.main = async (event, context) => {
let {detail} = event;
return await db.collection("article").doc(detail._id).update({
title: detail.title,
author: detail.author,
content: detail.content,
posttime: Date.now()
})
};
前端传递的方法：
<template>
<view class="edit">
<form @submit="onSubmit">
<view class="item">
<!-- 标题输入框 -->
<input v-model="formValue.title" type="text" name="title" placeholder="请输入标题"></input>
</view>
<view class="item">
<!-- 作者输入框 -->
<input v-model="formValue.author" type="text" name="author" placeholder="请输入作者"></input>
</view>
<view class="item">
<!-- 多行输入框 -->
<textarea v-model="formValue.content" name="content" placeholder="请输入内容"></textarea>
</view>
<view class="item">
<button form-type="reset">重置</button>
<!-- 对按钮进行双向绑定，这样用户每次输入值才能动态的调用判断方法 判断按钮 -->
<button form-type="submit" type="primary" :disabled="inDisabled(formValue)">提交</button>
</view>
</form>
</view>
</template>
<script>
// 因为要通过详情页传过来的id获取数据,所以要定义一个全局id
let id;
export default {
data() {
return {
formValue:{
title:"",
author:"",
content:""
}
};
},
onLoad(e) {
// 把获取到的id赋值给全局id，这样整个页面哪里都能直接使用id了
id=e.id
// 调用获取新闻详情的方法,一进入页面就获取数据
this.getDetail()
},
methods:{
// 获取要修改新闻的详情
getDetail(){
uniCloud.callFunction({
name:"art_get_row",
data:{
// id:id
id
}
}).then(res=>{
this.formValue = res.result.data[0]
})
},
// 判断按钮的是否禁用
// 这里是通过obj接收值所以不用写this,不传值也可以,写上this.一样
inDisabled(obj){
// 循环判断key的三个值是否为空,不为空就返回true,使按钮变为可用状态
for(let key in obj){
// obj[key]和obj.key一样的效果，打印出来的值就是用户输入的值
// console.log(obj[key]);
if(!obj[key]){
return true
}
}
},
// 点击提交触发此方法
onSubmit(e){
// 获取到用户输入并赋值
// 这一句不用了,因为上面formValue是双向绑定的
// 可以直接拿到用户修改的值
// 在下面直接把formValue放在data中传递到后端即可
// let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_update_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail:this.formValue
}
}).then(res=>{
console.log(res);
})
}
}
}
</script>
<style lang="scss" scoped>
.edit {
padding: 30rpx;
.item {
padding-bottom: 20rpx;
input,
textarea {
border: 1rpx solid #eee;
height: 80rpx;
padding: 0 20rpx;
}
textarea {
height: 200rpx;
// 文本域有原生的宽度,所以设置这个属性
width: 100%;
// 这里有一个问题,原本在app.vue里是设置了怪异盒模型的
// 使添加的边距向父盒子内压缩
// 但是这里没有起效果,使得给文本域加了宽度为100%后
// 文本域的右边就顶到屏幕右边了
// 所以给他加一个标准盒模型,使父盒子的外边距再把它顶回来
// 但是只是右边顶到了屏幕上,左边没有,就不知道什么情况
box-sizing: border-box;
}
button {
margin-bottom: 20rpx;
}
}
}
</style>
之前这一条新闻是五旬男子开头，删掉五旬两个字后，数据库中确实保存了新的数据
这里还有一个问题，如果修改之后，点击退回，就会进入到详情页，此时详情页还是没有更新过的原始数据，但数据库中的数据已经变了，按理应该修改完成之后，跳转到首页
先修改提交成功之后，弹出成功的提示弹框，并且返回上一页 然后在上一页再进行刷新
<script>
// 因为要通过详情页传过来的id获取数据,所以要定义一个全局id
let id;
export default {
data() {
return {
formValue:{
title:"",
author:"",
content:""
}
};
},
onLoad(e) {
// 把获取到的id赋值给全局id，这样整个页面哪里都能直接使用id了
id=e.id
// 调用获取新闻详情的方法,一进入页面就获取数据
this.getDetail()
},
methods:{
// 获取要修改新闻的详情
getDetail(){
uniCloud.callFunction({
name:"art_get_row",
data:{
// id:id
id
}
}).then(res=>{
this.formValue = res.result.data[0]
})
},
// 判断按钮的是否禁用
// 这里是通过obj接收值所以不用写this,不传值也可以,写上this.一样
inDisabled(obj){
// 循环判断key的三个值是否为空,不为空就返回true,使按钮变为可用状态
for(let key in obj){
// obj[key]和obj.key一样的效果，打印出来的值就是用户输入的值
// console.log(obj[key]);
if(!obj[key]){
return true
}
}
},
// 点击提交触发此方法
onSubmit(e){
// 获取到用户输入并赋值
// 这一句不用了,因为上面formValue是双向绑定的
// 可以直接拿到用户修改的值
// 在下面直接把formValue放在data中传递到后端即可
// let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_update_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail:this.formValue
}
}).then(res=>{
uni.showToast({
title:"修改成功"
})
setTimeout(()=>{
uni.navigateBack()
},800)
})
}
}
}
</script>
之前的刷新数据方法调用是在detail页面的onload中进行的，onload只有在页面加载时才调用一次，可以把这个方法的调用写在onshow中，只要页面显示就获取一次数据，这样就实现了提交成功之后，一返回详情页就拿到修改过的新数据
onLoad(e) {
id = e.id;
this.getDetail();
},
onShow() {
// 调用获取新闻详情的方法,页面一显示就获取数据
this.getDetail()
},
