uniapp-商城-52-后台 商家信息（商家信息数据，云对象利用） ...

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]
如下：

1.         _before: async function () { // 通用预处理器
2.                 this.userInfo =await utils.getUserInfo(this);
3.                 this.params = this.getParams()[0]
4.         },

复制代码

3.4.2 在不同接口中举行参数值的调用

在接口中利用定义的参数params

1.         async get(){               
2.                 return await db.collection("green-mall-brand").get()
3.         },
4.         async add(){
5.                 //需要登录
6.                 if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
7.                 //需要管理权限
8.                 if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};          
9.                 return await db.collection("green-mall-brand").add(this.params)
10.         },
11.         async update(){
12.                 if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
13.                 if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};       
14.                 let params = {...this.params};
15.                 delete params._id
16.                 return await db.collection("green-mall-brand").doc(this.params._id).update(params)
17.         }

复制代码

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）

1. // 云对象教程: 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 () { // 通用预处理器
2.                 this.userInfo =await utils.getUserInfo(this);
3.                 this.params = this.getParams()[0]
4.         },        async get(){               
5.                 return await db.collection("green-mall-brand").get()
6.         },
7.         async add(){
8.                 //需要登录
9.                 if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
10.                 //需要管理权限
11.                 if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};          
12.                 return await db.collection("green-mall-brand").add(this.params)
13.         },
14.         async update(){
15.                 if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
16.                 if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};       
17.                 let params = {...this.params};
18.                 delete params._id
19.                 return await db.collection("green-mall-brand").doc(this.params._id).update(params)
20.         }}                                /**         * method1方法形貌         * @param {string} param1 参数1形貌         * @returns {object} 返回值形貌         */        /*         method1(param1) {                // 参数校验，如无参数则不必要                if (!param1) {                        return {                                errCode: 'PARAM_IS_NULL',                                errMsg: '参数不能为空'                        }                }                // 业务逻辑                                // 返回结果                return {                        param1 //请根据实际必要返回值                }        }        */}

复制代码

4.2、页面逻辑

1. <template>
2.         <view class="brand">
3.                 <!-- <uni-forms ref="brandRef" :model="brandFormData" :rules="brandRules" :label-width="100" label-align="right"> -->
4.                 <uni-forms ref="brandRef" :model="brandFormData" :label-width="100" label-align="right">
5.                         <!--
6.                         https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
7.                         ref 就是定义这个表单的标识
8.                         model：数据
9.                         rules：校验规则
10.                         label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx
11.                         label-align 对齐方式
12.                         -->
13.                         <uni-forms-item label="品牌招牌" required name="thumb">
14.                                 <uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />
15.                                 <!--
16.                                  v-model="brandFormData.thumb"   双向绑定 所里略图  这里默认是一个数组 下面定义data 就一个数组
17.                                  fileMediatype  文件类型是图像
18.                                  mode  文件呈现的样式 要不是list 列表 要不是九宫格的grid
19.                                  上面是三个基本的属性
20.                                  limit 限制传几个文件  一般logo就一张。
21.                                  -->
22.                         </uni-forms-item>
25.                         <uni-forms-item label="品牌名称" name="name" required>
26.                                 <!-- name 是标签名字 后面借来标识是哪一个被验证  required 是强制输入项目 必填-->
27.                                 <uni-easyinput type="text" v-model="brandFormData.name" placeholder="请输入品牌名称" />
28.                         </uni-forms-item>
30.                         <uni-forms-item label="商户电话" name="mobile" required>
31.                                 <uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" />
32.                         </uni-forms-item>
34.                         <uni-forms-item label="商户地址" name="address" required>
35.                                 <uni-easyinput v-model="brandFormData.address" placeholder="请输入商户地址" />
36.                         </uni-forms-item>
38.                         <uni-forms-item label="商家介绍" name="about">
39.                                 <uni-easyinput v-model="brandFormData.about" placeholder="请输入商家介绍" type="textarea" />
40.                         </uni-forms-item>
43.                         <button type="primary" @click="onSubmit">提交信息</button>
44.                         <!-- type 按钮样式选择  -->
45.                 </uni-forms>
46.         </view>
47. </template>
49. <script>
50.         import {
51.                 mapMutations
52.         } from "vuex"
53.         const brandCloudObj = uniCloud.importObject("green-mall-brand")
54.         export default {
55.                 data() {
56.                         return {
57.                                 brandFormData: {
58.                                         thumb: [],   //数组
59.                                         name: "", //品牌名称
60.                                         mobile: "",
61.                                         address: "",
62.                                         about: ""
63.                                 },
64.                                 brandRules: {
65.                                         thumb: {
66.                                                 rules: [{
67.                                                         required: true,
68.                                                         errorMessage: "品牌招聘需要上传"
69.                                                 }]
70.                                         },
71.                                         name: {
72.                                                 rules: [{
73.                                                         required: true,
74.                                                         errorMessage: "请输入正确的品牌名称"
75.                                                 }, {
76.                                                         minLength: 3,
77.                                                         maxLength: 20,
78.                                                         errorMessage: '长度在{minLength}到{maxLength}的字符'
79.                                                 }]
80.                                         },
81.                                         mobile: {
82.                                                 rules: [{
83.                                                         required: true,
84.                                                         errorMessage: "请输入正确的手机号码"
85.                                                 }, {
86.                                                         validateFunction: function(rule, value, data, callback) {
87.                                                                 let res = /^1[3-9]\d{9}$/.test(value);
88.                                                                 if (!res) {
89.                                                                         callback("手机格式不正确")
90.                                                                 }
91.                                                                 return;
92.                                                         }
93.                                                 }]
94.                                         },
95.                                         address: {
96.                                                 rules: [{
97.                                                         required: true,
98.                                                         errorMessage: "请输入正确的商户地址"
99.                                                 }, {
100.                                                         minLength: 6,
101.                                                         maxLength: 100,
102.                                                         errorMessage: '长度在{minLength}到{maxLength}的字符'
103.                                                 }]
104.                                         }
106.                                 }
107.                         };
108.                 },
110.                 onLoad() {
111.                         this.isManage();
112.                         this.getBrand();
113.                 },
114.                
115.                 //这是日狗了，它大爷的
116.                 onReady() {
117.                         this.$nextTick(() => {
118.                                 this.$refs.brandRef.setRules(this.brandRules);
119.                         });
120.                 },
125.                 methods: {
126.                         ...mapMutations(["SET_BRAND"]),
127.                         //获取数据库中的品牌信息
128.                         getBrand() {
129.                                 brandCloudObj.get().then(res => {
130.                                         if (!res.data.length) return;
131.                                         this.brandFormData = res.data[0]
132.                                 })
133.                         },
136.                         //点击提交按钮
137.                         onSubmit() {
138.                                 this.$refs.brandRef.validate().then(res => {
139.                                         let arr = this.brandFormData.thumb.map(item => {
140.                                                 return {
141.                                                         extname: item.extname,
142.                                                         url: item.url,
143.                                                         name: item.name,
144.                                                         size: item.size
145.                                                 }
146.                                         })
147.                                         this.brandFormData.thumb = arr;
148.                                         this.addAndUpdate();
149.                                 }).catch(err => {
150.                                         // console.log(err);
151.                                 })
152.                         },
153.                         //新增或者修改品牌啊信息
154.                         async addAndUpdate() {
155.                                 let title;
156.                                 if (this.brandFormData._id) {
157.                                         let res = await brandCloudObj.update(this.brandFormData)
158.                                         title = "修改成功"
159.                                 } else {
160.                                         //新增
161.                                         await brandCloudObj.add(this.brandFormData)
162.                                         title = "新增成功"
163.                                 }
164.                                 uni.showToast({
165.                                         title,
166.                                         mask: true
167.                                 })
169.                                 setTimeout(() => {
170.                                         uni.navigateBack();
171.                                 }, 1500)
173.                                 this.SET_BRAND(this.brandFormData);
174.                         }
175.                 }
176.         }
177. </script>
179. <style lang="scss" scoped>
180.         .brand {
181.                 padding: 30rpx;
182.                 //间距是30rpx， 每一个标签之 标签内部 需要label-width 来调整
183.         }
184. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。