细节优化
输入框内容为空时也能提交成功，而且能保存到数据库中，所以必须进行验证，以后可以使用扩展组件的表单验证
现在使用内置组件实现，通过双向绑定，判断输入框是否为空
用双向绑定也可以不用表单提交
测试双向绑定 在data中定义一个对象，把输入框的三个变量先声明，然后用v-model绑定到标签中，相当于在输入框里输入的值，会自动赋值到data中，通过页面最顶部的这三个测试插值表达式也会被赋的值改变，这就是双向绑定
<template>
<view class="add">
{{formValue.title}}
{{formValue.author}}
{{formValue.content}}
<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">提交</button>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
formValue:{
title:"",
author:"",
content:""
}
};
},
先禁用提交按钮，给按钮的disabled属性双向绑定，再给disabled属性绑定判断方法，把用户输入值传入方法进行判断，每次用户输入，按钮都能借助这个方法动态的进行判断，如果三个值都不为空，就返回true将按钮置为可用状态
视频中有人提示这里用计算属性更好
计算属性：写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用
提交成功之后，跳转到首页
跳转到首页后刷新有很多方法，这里有两种，可以跳转到首页后，在onshow中进行刷新，也可以提交之后，跳转到首页，下拉刷新
可以用返回上一页进行跳转，也可以通过relaunch关闭所有页面跳转到首页，鉴于有可能用户不是从首页过来的，所以用relaunch方法进行跳转
先写一个发布成功的提示框
onSubmit(e){
// 获取到用户输入并赋值
let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_add_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail
}
}).then(res=>{
uni.showToast({
title:"发布成功"
})
})
}
发布成功后，跳转到首页 实际还需要对发布的内容进行验证，确认真的发布成功了才跳转
<template>
<view class="add">
<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>
export default {
data() {
return {
formValue:{
title:"",
author:"",
content:""
}
};
},
methods:{
// 判断按钮的是否禁用
// 这里是通过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>
成功跳转到了首页，relaunch会让内容刷新一次
