新增页面
在新增文章页面将用户提交的数据添加到数据库
在form表单标签上给submit事件写一个提交方法onSubmit，当点击提交按钮时，会自动触发onSubmit事件
要在提交按钮中写上这个属性
form-type="submit"，否则，给form表单写了submit方法也没用
<template>
<view class="add">
<form @submit="onSubmit">
<view class="item">
<!-- 标题输入框 -->
<input type="text" name="title" placeholder="请输入标题"></input>
</view>
<view class="item">
<!-- 作者输入框 -->
<input type="text" name="author" placeholder="请输入作者"></input>
</view>
<view class="item">
<!-- 多行输入框 -->
<textarea 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 {
};
},
methods:{
// 点击提交触发此方法
onSubmit(e){
console.log(e);
}
}
}
</script>
onSubmit事件接收一个值，就是用户提交的数据 获取到的每一个值的键就是输入框的name属性，值是用户在输入框中的输入
这里textarea的name值是content，之前在数据库中存的新闻内容部分的字段名也是content，所以可以直接使用，如果这两者不一致，要重新赋值
<template>
<view class="add">
<form @submit="onSubmit">
<view class="item">
<!-- 标题输入框 -->
<input type="text" name="title" placeholder="请输入标题"></input>
</view>
<view class="item">
<!-- 作者输入框 -->
<input type="text" name="author" placeholder="请输入作者"></input>
</view>
<view class="item">
<!-- 多行输入框 -->
<textarea 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 {
};
},
methods:{
// 点击提交触发此方法
onSubmit(e){
// 获取到用户输入并赋值
let detail=e.detail.value
console.log(detail);
}
}
}
</script>
<style lang="scss" scoped>
.add {
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>
接下来就是要将获取到的用户输入提交到服务器了，新建云函数art_add_row
将前端传递过来的数据存储到数据库
'use strict';
const db=uniCloud.database();
exports.main = async (event, context) => {
let {detail} = event;
return await db.collection("article").add({
posttime:Date.now(),
// detail是一个对象,不解构出来就存为一个对象了
...detail
})
};
添加新闻的前端代码：
<template>
<view class="add">
<form @submit="onSubmit">
<view class="item">
<!-- 标题输入框 -->
<input type="text" name="title" placeholder="请输入标题"></input>
</view>
<view class="item">
<!-- 作者输入框 -->
<input type="text" name="author" placeholder="请输入作者"></input>
</view>
<view class="item">
<!-- 多行输入框 -->
<textarea 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 {
};
},
methods:{
// 点击提交触发此方法
onSubmit(e){
// 获取到用户输入并赋值
let detail=e.detail.value
// 接收云函数传过来的值
uniCloud.callFunction({
name:"art_add_row",
// 将获取到的用户输入传递到服务器
data:{
// detail:detail
detail
}
}).then(res=>{
console.log(res);
})
}
}
}
</script>
<style lang="scss" scoped>
.add {
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>
现在前端能拿到两条数据了
