功能展示区：关键字搜索，商品信息的显示与隐藏逻辑
案例页面代码：
<template>
<view class="content">
<!-- 搜索框 -->
<view class="main" style="display: flex;height: 100upx;background-color: #ccc;align-items: center;justify-content: space-around;">
<view class="search_box" style="background-color: #eee;width: 630upx;height: 80upx;border-radius: 20upx;display: flex;align-items: center;padding-left: 20upx;">
<image src="../../static/search.png" style="width: 50upx;height: 50upx;" mode=""></image>
<input type="text" @input="searchInput" placeholder="请输入商品名称" value="" style="height: 75upx;width: 500upx;margin-left: 20upx;" />
</view>
</view>
<!-- 搜索内容显示区 -->
<view v-for="(item,index) in showGoodsList" :key="index" v-show="isShow" class="item" style="border: 1upx solid #C0C0C0;margin-top: 20upx;height: 300upx;display: flex;justify-content: space-around;">
<view style="display: flex;flex-direction: column;align-items: center;justify-content: space-around;">
<view style="font-weight: bolder;">{{item.goodsName}}</view>
<view>
<image :src="item.path" mode="" style="width: 250upx;height: 200upx;"></image>
</view>
</view>
<view style="display: flex;flex-direction: column;align-items: center;justify-content: space-around;">
<view style="color: blue;">评论:{{item.comment}}条</view>
<view style="color: orange;">价格:{{item.price}}￥</view>
<view style="color: #4CD964;">地址:{{item.address}}</view>
<view style="color: red;">存量:{{item.store}}</view>
</view>
</view>
<!-- <button type="default" @click="choose">点击</button> -->
</view>
</template>
<script>
export default {
data() {
return {
isShow: false,
showGoodsList: {}
}
},
onLoad() {
},
methods: {
choose() {
uni.chooseImage({
count: 1,
success(res) {
console.log(res.tempFilePaths[0])
uniCloud.uploadFile({
cloudPath: '1.jpg',
filePath: res.tempFilePaths[0],
success: (res) => {
console.log(res.fileID)
const db = uniCloud.database()
db.collection("goodsList").add({
path: res.fileID
})
}
})
}
})
},
searchInput(e) {
uniCloud.callFunction({
name: "searchGoods",
data: {
"keywords": e.detail.value,
}
}).then(res => {
console.log(res)
if (res.result.affectedDocs > 1) { //如果匹配到的结果>1,证明是拿到结果，就可以将数据返回给界面
this.showGoodsList = res.result.data
this.isShow = true
} else {
this.showGoodsList = {} //恢复初始状态
this.isShow = false //关闭显示区域
}
})
}
}
}
</script>
<style>
</style>
云函数：
'use strict';
exports.main = async (event, context) => {
//event为客户端上传的参数
console.log('event : ', event)
return new Promise((resolve,reject) => {
const db = uniCloud.database()
db.collection("goodsList").where(event).get()
.then(res=>{
resolve(res)
})
.catch(res => {
reject(res)
})
})
//返回数据给客户端
return event
};
数据库数据：
数据库里面的图片是怎么来的？
我们都知道web开发添加记录只能添加一些纯文字的字段，并不能添加一张图片。
那图片的路径到底是怎么弄到数据库里面的呢？其实图片最先是到不了数据库当中去的，为什么呢？其实我们就是缺一个后台管理。
-
其实我们是在客户端（模拟后台）进行上传的，如果我们要开发这种商城类网站，图片是必不可少的，因为我们没有后台，所以我们就只能在前端写代码上传图片路径。
-
首先给button按钮绑定uni.chooseImg的API获取到图片暂时的缓存路径。
-
不过注意了，不能直接用db.collection().add({上面拿到的图片的缓存路径})添加到数据库里面去，因为这时候的图片缓存路径tempFiles仅仅只是在localhost服务器上的本地路径。
-
必须经过一轮uniCloud.uploadFile再加工，先上传到云存储，这时候这张图片就由缓存路径直接变成了云存储的云端路径，然后我们再把云端路径，通过db.collection().add({云端路径})API，将图片上传到数据库。
这样数据库当中就有了一张图片，在这张图片的基础上，而我们只需要再补充一些文字记录就可以使用了。
怎么样？上传图片是不是很简单？
注意：
因为我们用到的是数据库的API所以要开这个权限。
如果是使用云函数的API其实是不需要开启权限的。
为什么使用云数据库的增删改查API要开启权限，而通过云函数就不需要开启权限了呢？为什么现在流行的都提倡使用云函数的API管理数据库，而不提倡直接使用云数据库的API操纵数据库了呢？是因为权限过大吗？
网友评论