1、概述
已经通过好几个篇幅来说明商家信息，包括logo、商家名称，地址，电话以及商家简介。通过表单组件和标签，以及我们的文件上传标签，都做了说明。（logo上传，用的文件上传组件是上传到公共的数据库，并没有整合上传到项目定义或需要的数据库）
下面就是关键的步骤，如何将数据上传到我们自己的数据库。前面的分类我们直接在页面中进行的数据上传和使用。但一般不这样使用，一般是采用云对象的方式来处理数据的交互，页面上主要做业务逻辑的实现，以此来实现前后对分离。
2、创建云对象
云对象是把云函数实现的方法集中放在一起，然后通过一个接口进行调用，比如所有逻辑层的增删改查一起实现，管理和使用都较为方便。
2.1 到项目中的云数据库中，cloudfunction--->创建云对象
2.2 创建一个云对象 green-mall-brand
2.3 基本样式
创建一个云对象 green-mall-brand，包含不同的数据库操作。
生成重要的文件index.obj.js 这个就是云对象，在该文件中，需要引入数据库，对数据库进行增删改查等。
3、调试和使用
3.1 green-mall-brand下进行调试
在这里进行调试就会生成green-mall-brand.parm.js的调试文件，可以在这里进行调用相应的方法，比如这里的add get update等等，但是一般用的比较少。
3.2 将该云对象调用到业务逻辑页面
一般用本地调试的较少，大多数都是用到逻辑页面进行使用，使用前需要将该云对象定义到业务逻辑页面，这里将green-mall-brand 引入了brand的页面。
const brandCloudObj = uniCloud.importObject("green-mall-brand")
3.3 使用云对象提供的方法
green-mall-brand中的index.obj.js 提供add get update几种方法，我们可以在这里编写方法进行调用。
3.3.1 get
3.3.2 add和update
3.4 传递页面逻辑的值给云对象中的接口
3.4.1 在云对象中处理
预处理定义一个参数变量
this.params = this.getParams()[0]
如下：
_before: async function () { // 通用预处理器
this.userInfo =await utils.getUserInfo(this);
this.params = this.getParams()[0]
},3.4.2 在不同接口中进行参数值的调用
在接口中使用定义的参数params
async get(){
return await db.collection("green-mall-brand").get()
},
async add(){
//需要登录
if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
//需要管理权限
if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};
return await db.collection("green-mall-brand").add(this.params)
},
async update(){
if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};
let params = {...this.params};
delete params._id
return await db.collection("green-mall-brand").doc(this.params._id).update(params)
}3.4.3 云对象整体的参数使用代码
这里我们可以看到，当云对象执行了其中的接口，也会进行结果的返回
3.4.4 页面逻辑对参数的值的传递
3.4.4.1 页面逻辑在定义表单组件就进行了双向绑定，这样就把数据传给这里的参数变量 brandFromData，都用了v-model
3.4.4.2 logo数据的处理 在提交时 onsubmit 进行了抽取，减少了很多不需要的属性值，通过执行addAndUpdate 判断是否有id值来判断该操作添加还是刷新。
3.4.5 进入页面应该是先获取数据 get 和onload
3.4.5.1 页面逻辑 onload
获取到数据就显示res.data[0]的值，没有就直接返回。
3.4.5.2 数据库获取数据 云对象中实现get 记得return
return 页面才能获取到数据。
3.5 数据库的创建
藏这里，你找到了吗？
说了很多了，但是一直没有说数据库创建，前面我们都有用schema进行表结构定义
这里没有进行表结构定义，直接就是云对象需要使用时，页面逻辑来调用云对象会自己自动创建green-mall-brand这个数据库。
4、完整的代码
4.1 云对象代码
其中package.json 为自动生成
green-mall-brand.parm.js 本地调试
下面只是云对象的代码（indexobj.js）
// 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc语法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
//第一步：链接数据库
const db = uniCloud.database();
const utils = require("self-utils")
module.exports = {
_before: async function () { // 通用预处理器
this.userInfo =await utils.getUserInfo(this);
this.params = this.getParams()[0]
},
async get(){
return await db.collection("green-mall-brand").get()
},
async add(){
//需要登录
if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
//需要管理权限
if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};
return await db.collection("green-mall-brand").add(this.params)
},
async update(){
if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};
let params = {...this.params};
delete params._id
return await db.collection("green-mall-brand").doc(this.params._id).update(params)
}
}
/**
* method1方法描述
* @param {string} param1 参数1描述
* @returns {object} 返回值描述
*/
/*
method1(param1) {
// 参数校验，如无参数则不需要
if (!param1) {
return {
errCode: 'PARAM_IS_NULL',
errMsg: '参数不能为空'
}
}
// 业务逻辑
// 返回结果
return {
param1 //请根据实际需要返回值
}
}
*/
}
4.2、页面逻辑
<template>
<view class="brand">
<!-- <uni-forms ref="brandRef" :model="brandFormData" :rules="brandRules" :label-width="100" label-align="right"> -->
<uni-forms ref="brandRef" :model="brandFormData" :label-width="100" label-align="right">
<!--
https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
ref 就是定义这个表单的标识
model：数据
rules：校验规则
label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx
label-align 对齐方式
-->
<uni-forms-item label="品牌招牌" required name="thumb">
<uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />
<!--
v-model="brandFormData.thumb" 双向绑定 所里略图 这里默认是一个数组 下面定义data 就一个数组
fileMediatype 文件类型是图像
mode 文件呈现的样式 要不是list 列表 要不是九宫格的grid
上面是三个基本的属性
limit 限制传几个文件 一般logo就一张。
-->
</uni-forms-item>
<uni-forms-item label="品牌名称" name="name" required>
<!-- name 是标签名字 后面借来标识是哪一个被验证 required 是强制输入项目 必填-->
<uni-easyinput type="text" v-model="brandFormData.name" placeholder="请输入品牌名称" />
</uni-forms-item>
<uni-forms-item label="商户电话" name="mobile" required>
<uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" />
</uni-forms-item>
<uni-forms-item label="商户地址" name="address" required>
<uni-easyinput v-model="brandFormData.address" placeholder="请输入商户地址" />
</uni-forms-item>
<uni-forms-item label="商家介绍" name="about">
<uni-easyinput v-model="brandFormData.about" placeholder="请输入商家介绍" type="textarea" />
</uni-forms-item>
<button type="primary" @click="onSubmit">提交信息</button>
<!-- type 按钮样式选择 -->
</uni-forms>
</view>
</template>
<script>
import {
mapMutations
} from "vuex"
const brandCloudObj = uniCloud.importObject("green-mall-brand")
export default {
data() {
return {
brandFormData: {
thumb: [], //数组
name: "", //品牌名称
mobile: "",
address: "",
about: ""
},
brandRules: {
thumb: {
rules: [{
required: true,
errorMessage: "品牌招聘需要上传"
}]
},
name: {
rules: [{
required: true,
errorMessage: "请输入正确的品牌名称"
}, {
minLength: 3,
maxLength: 20,
errorMessage: '长度在{minLength}到{maxLength}的字符'
}]
},
mobile: {
rules: [{
required: true,
errorMessage: "请输入正确的手机号码"
}, {
validateFunction: function(rule, value, data, callback) {
let res = /^1[3-9]\d{9}$/.test(value);
if (!res) {
callback("手机格式不正确")
}
return;
}
}]
},
address: {
rules: [{
required: true,
errorMessage: "请输入正确的商户地址"
}, {
minLength: 6,
maxLength: 100,
errorMessage: '长度在{minLength}到{maxLength}的字符'
}]
}
}
};
},
onLoad() {
this.isManage();
this.getBrand();
},
//这是日狗了，它大爷的
onReady() {
this.$nextTick(() => {
this.$refs.brandRef.setRules(this.brandRules);
});
},
methods: {
...mapMutations(["SET_BRAND"]),
//获取数据库中的品牌信息
getBrand() {
brandCloudObj.get().then(res => {
if (!res.data.length) return;
this.brandFormData = res.data[0]
})
},
//点击提交按钮
onSubmit() {
this.$refs.brandRef.validate().then(res => {
let arr = this.brandFormData.thumb.map(item => {
return {
extname: item.extname,
url: item.url,
name: item.name,
size: item.size
}
})
this.brandFormData.thumb = arr;
this.addAndUpdate();
}).catch(err => {
// console.log(err);
})
},
//新增或者修改品牌啊信息
async addAndUpdate() {
let title;
if (this.brandFormData._id) {
let res = await brandCloudObj.update(this.brandFormData)
title = "修改成功"
} else {
//新增
await brandCloudObj.add(this.brandFormData)
title = "新增成功"
}
uni.showToast({
title,
mask: true
})
setTimeout(() => {
uni.navigateBack();
}, 1500)
this.SET_BRAND(this.brandFormData);
}
}
}
</script>
<style lang="scss" scoped>
.brand {
padding: 30rpx;
//间距是30rpx， 每一个标签之 标签内部 需要label-width 来调整
}
</style>
