修改
修改页面和新增页面布局一样，就是新增的页面输入框是空的，修改是有内容的
复制新增页面的样式到edit中修改就可以用了，然后在detail页面中给修改按钮添加跳转点击事件
detail.vue
methods: {
// 跳转到修改页面
goEdit(){
uni.navigateTo({
url:"/pages/edit/edit?id="+id
})
},
在详情页点击修改按钮之后，就跳转到修改页面了
然后在修改页面的onload方法中，直接接收这个参数，可以拿到id
onLoad(e) {
console.log(e);
},
在详情页中点击修改按钮后，进入修改页面，就能通过onload生命周期函数拿到新闻对应id了
通过网络请求把要修改的内容展示到页面中
修改功能要先把需要修改的新闻通过id把数据请求到前端，并展示到页面中，方便用户修改，而之前做的添加功能是不需要这一步的，添加页面是空白的
<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=>{
console.log(res);
})
},
返回值写res和res.result.data[0]的区别： res
res.result.data[0]
拿到数据后，渲染到页面
将获取到的数据保存到data中，然后在DOM体中渲染到页面
这组数据是之前添加页面定义的，就可以直接用这个做就行，将修改页面拿到的数据在获取到数据后就直接赋值
data() {
return {
formValue:{
title:"",
author:"",
content:""
}
};
},
将获取到的值直接赋值给formValue
<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=>{
console.log(res.result.data[0]);
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){
// 获取到用户输入并赋值
let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_add_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail
}
}).then(res=>{
uni.showToast({
title:"发布成功"
}),
// 给跳转加一个延时,要不然看不到发布成功的提示框
setTimeout(()=>{
uni.reLaunch({
url:"/pages/index/index"
})
},800)
})
}
}
}
</script>
接下来就是根据id把新的内容覆盖旧的内容就行了
methods:{
// 获取要修改新闻的详情
getDetail(){
uniCloud.callFunction({
name:"art_get_row",
data:{
// id:id
id
}
}).then(res=>{
console.log(res.result.data[0]);
this.formValue = res.result.data[0]
})
},
在详情页点击修改进入修改页面后就是这样了
修改页面全部的代码： 更新数据库的数据在下一节
<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=>{
console.log(res.result.data[0]);
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){
// 获取到用户输入并赋值
let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_add_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail
}
}).then(res=>{
uni.showToast({
title:"发布成功"
}),
// 给跳转加一个延时,要不然看不到发布成功的提示框
setTimeout(()=>{
uni.reLaunch({
url:"/pages/index/index"
})
},800)
})
}
}
}
</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>
