unicloud7-小案例

<template>
	<view class="home">
    <form action="" @submit="onSubmit">
      <input type="text" name="name">
      <input type="text" name="tel">
      <button form-type="submit">提交</button>
    </form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
      
		},
		methods: {
      onSubmit(e){
        console.log(e);
      }
		}
	}
</script>

<style lang="scss">
.row {
  border-bottom: 1px solid #ccc;
  padding: 30rpx;
}
</style>

在输入框中随意输入一些字符，点击提交之后，控制台拿到的值

输入的值在detail中

将用户输入的数据保存到云数据库中

前端代码： index.vue

<template>
	<view class="home">
    <form @submit="onSubmit">
      <input type="text" name="name">
      <input type="text" name="tel">
      <button form-type="submit">提交</button>
    </form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        listArr:[],
        userArr:[]
			}
		},
		onLoad() {
      
		},
		methods: {
      onSubmit(e){
        // 接收用户提交的数据
        let obj = e.detail.value;
        // 调用此方法,将用户提交的数据上传到云函数
        this.pushCloud(obj)
      },
      pushCloud(obj){
        console.log(obj);
        uniCloud.callFunction({
          name:"cloudDemo1",
          data:obj
        }).then(res=>{
        console.log(res);
      })
      }
      //这种写法效果和上面一样
      // onSubmit(e){
      //   console.log(e);
      //   let obj = e.detail.value;
        
      //   uniCloud.callFunction({
      //     name:"cloudDemo1",
      //     data:obj
      //   }).then(res=>{
      //    console.log(res);
      //  })
      // }
		}
	}
</script>

<style lang="scss">
.row {
  border-bottom: 1px solid #ccc;
  padding: 30rpx;
}
</style>

页面打印结果：

云函数代码：

// 'use strict';
// 1.连接数据库,写在main函数外面里面都行
const db = uniCloud.database()
exports.main = async (event, context) => {
	// 接收前端传过来的数据
  let {name, tel} = event;
  // 将前端传递过来的数据插入数据库
  let res = await db.collection("users").add({
    // name:name,
    // tel:tel
    // es6中属性名和值相等可以省略成下面写法
    name,
    tel
  })
  return res; 
};

数据库中保存了这个值