小精灵儿童网站免费做踢wordpress图文模板下载

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._idreturn 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._idreturn 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.htmlref 就是定义这个表单的标识 model：数据rules：校验规则label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpxlabel-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>