上一篇uniapp云功能教程①：登录，我们实现了简单的登录注册逻辑。在本文中，我们将实现一个商品列表的增删改查小项目。源码见文末。扫码体验或浏览器访问1.数据库设计我们需要2张表：商品分类表（mall_type）和商品表（mall_shop），商品表通过keykey关联到商品分类表1.1商品分类表（mall_type）{"bsonType"：“对象”，“必需”：[]，“权限”：{“读取”：假，“创建”：假，“更新”：假，“删除”：假}，“属性”：{“_id”:{"description":"ID，系统自动生成"},"name":{"description":"一级商品分类"}}}1.2商品表（mall_shop）{"bsonType":"object","required":[],"permission":{"read":false,"create":false,"update":false,"delete":false},"properties":{"_id":{"description":"ID，系统自动生成"},"name":{"description":"产品名称"},"key":{"description":"对应一级分类Id"},"icon":{"description":"ProductImage"},"price":{"description":"Price"}}}在只是下面展示了关键代码，具体代码可以查看源码。代码3.商品入库接口开发3.1商品分类功能开发3.1.1商品分类添加功能新建云函数addType，上传部署上传操作，添加PATH/http/addtype'usestrict';exports.main=async(event,上下文）=>{缺点tdb=uniCloud.database();//代码块是cdbconstdbCmd=db.commandconstcollection=db.collection('mall_type');letqueryStringParameters=event.queryStringParametersletname=queryStringParameters['name']letcallback={}letisHasRes=awaitcollection.where({name:dbCmd.eq(name)}).get()//简单重复检查if(isHasRes.data.length){callback={mesg:'商品重复分类',code:500}}else{letres=awaitcollection.add({name:queryStringParameters['name']})callback={mesg:'添加成功',code:200,id:res.id}}returncallback};添加表单和界面addType(){uni.showLoading({title:'Adding'});uni.request({url:'https://**.com/http/addtype',data:{name:this.form.name},success:(res)=>{if(res.data.code==200){uni.showToast({icon:'success',title:'添加成功'});this.$refs.uForm.resetFields()}else{uni.showToast({icon:'error',title:res.data.mesg||'添加失败'});}},complete:()=>{uni.hideLoading();this.getType()}})},3.1.2商品分类查询函数创建新增云函数getType，上传部署和上传运行，添加PATH/http/gettypeexports.main=async(event,context)=>{constdb=uniCloud.database();//代码块是cdbconstres=awaitdb.collection('mall_type').get()returnres};添加显示当前有多少个分类接口，这里我们使用标签形式，做删除也方便getType(){uni.showLoading({title:'获取分类'});uni.request({url:'https://**.com/http/gettype',成功:(res)=>{this.typeList=res.data.data||[]uni.hideLoading()}})}3.1.2商品分类删除函数新建一个云函数delType，上传部署和上传运行，添加PATH/http/deltype'usestrict';exports.main=async(event,context)=>{constdb=联云。数据库（）;constdbCmd=db.commandletid=event.queryStringParameters['id']constcollection=db.collection('mall_type');让res=awaitcollection.where({_id:dbCmd.eq(id)}).remove()返回res};在标签上添加方法，删除二级弹窗tagClick(item,index){this.show=true;this.selectItem=item},confirm(){uni.request({url:'https://**.com/http/deltype',数据:{id:this.selectItem._id},成功:(res)=>{uni.showToast({icon:'success',title:'删除成功'});this.getType()}})}3.2商品功能开发3.2.1商品添加功能新增云功能addShop，上传部署和上传操作，添加PATH/http/addshop'usestrict';exports.main=async(event,context)=>{constdb=uniCloud.database();//代码块是cdbconstdbCmd=db.commandconstcollection=db.collection('mall_shop');//因为数据有base64图片，所以把body改成getletbody=JSON.parse(event.body)letname=body['name']letkey=body['key']leticon=body['icon']letprice=body['price']letcallback={}letisHasRes=awaitcollection.where({name:dbCmd.eq(name)}).get()if(isHasRes.data.length){回调={mesg:'商品重复',code:500}}else{letres=awaitcollection.add({name:name,key:key,icon:icon,price:price,})callback={mesg:'添加成功',code:200,id:res.id}}//返回数据给客户端returncallback};这里图片直接使用base64保存添加表单和界面提交将图片上传改为自上传，并获取base64changeImg(){letfile=this.$refs.uUpload.lists[0]varfr=newFileReader();fr.onloadend=function(e){this.form.icon=e.target.result;}.bind(这个);fr.readAsDataURL(file.file);},addShop(){uni.showLoading({title:'添加'});uni.request({url:'https://f**.com/http/addshop',method:'POST',data:{key:this.form.key,price:this.form.price,name:这个.form.name,icon:this.form.icon,},success:(res)=>{if(res.data.code==200){uni.showToast({icon:'success',title:'添加成功'});//this.$refs.uForm.resetFields()}else{uni.showToast({icon:'error',title:res.data.mesg||'添加失败'});}},完成:()=>{uni.hideLoading();}})},3.2.2商品查询功能新建一个云函数getShop，上传部署和上传运行，添加PATH/http/getshop这里的数据格式以uview商品模板的数据格式为准。只是[{name:"xxx",foods:[{name:"xx",key:"xx",icon:"xx",price:"xx"}]}];'usestrict';exports.main=async(event,context)=>{constdb=uniCloud.database();//代码块为cdbconstdbCmd=db.command//查询商品分类consttypeRes=awaitdb.collection('mall_type').get()constcollsection=db.collection('mall_shop');让shopList=[]让typeList=typeRes.data||[]for(vari=0;i{this.tabbar=res.data.data||[]uni.hideLoading()}})},3.2.3产品删除函数新建一个云函数delShop，上传部署和上传操作，添加PATH/http/delshop'usestrict';exports.main=async(event,context)=>{constdb=uniCloud.database();//代码块是cdbconstdbCmd=db.commandletid=event.queryStringParameters['id']constcollection=db.collection('mall_shop');letres=awaitcollection.where({_id:dbCmd.eq(id)}).remove()//返回数据给客户端returnres};在商城列表中，我们为商品添加长按（longpress）删除功能，关于mallMenu.vue的第24行并添加一个辅助确认弹出窗口{{item1.name}},,,,,,del(item){this.delItem=itemthis.show=true},confirm(){uni.request({url:'https://**.com/http/delshop',data:{id:this.delItem._id},success:(res)=>{uni.showToast({icon:'success',title:'删除成功'});this.getShop()}})}至此已经开发完商品的存储、查看、删除功能完成成品图片素材包下载源码下载源码下载gitee
