微信小程序菜品做法展示数据库设计_微信小程序结合后台数据管理实现商品数据的动态展示、维护...
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示、维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通过小程序的请求Web API 平台获取JSON数据在小程序界面上进行动态展示。
1、整体性的架构设计
我们整体性的架构设计,包含一个Web管理后台、一个Web API统一接口层、当然还有数据库什么,另外还有一个小程序客户端。整个架构体系还是以我之前随笔介绍的《整合微信小程序的Web API接口层的架构设计》内容为蓝本
整个体系以Web API为主提供服务,同时后台管理系统通过各种界面维护着数据的增删改等基础管理工作。
Web API的分层,我们可以通过下图来了解具体的分层结构。
Web API 是一个统一的出口,因此会整合很多Web API控制器,以提供所有业务的接口,因此对Web API 控制器的管理就显得很重要,这里建议引入Area区域进行管理控制器类,这种各个模块就能够很好分门别类的进行管理了。
如下图所示是我们的Web API项目的控制器Area区域分类,把微信公众号、企业号、小程序、基础框架、第三方接口、CRM等内容进行不同的划分。
而后台管理系统,我们通过下面的来了解整体功能,整个后台管理系统使用了Bootstrap的框架进行前端处理。
各种账号的维护如下所示。
2、后台管理系统的数据维护
前面介绍了,后台管理和Web API层是分开的,它们的数据最终都是集中在一个数据库上,实现我们所要的数据集中化管理。
我们言归正题,介绍如何实现商品数据的后台管理,数据数据我们分为几种类型,方便在前端界面展示。
商品编辑界面包括对基础信息的修改、封面和Banner图片的维护、以及商品多个展示图片、商品详细介绍的内容维护,如下界面所示。
除了商品的封面图片以及Banne图片外,我们在小程序的商品详细界面里面,需要在顶端展示多个可以滚动的图片效果,那么我们需要维护商品的图片,如下界面所示。
当然商品的详细信息需要一个富文本的编辑器来进行图片文字的编辑处理,如下界面所示。
HTML图文的编辑,我们这里是用SummerNote插件来进行处理,这个控件的使用非常方便,另外通过修改onImageUpload回调函数,可以实现图片的随时上传处理。
functioninitEditor() {
$('#Note').summernote({
lang:'zh-CN', //default: 'en-US'
height: 600, //set editor height
minHeight: null, //set minimum height of editor
maxHeight: null, //set maximum height of editor
focus: true, //set focus to editable area after initializing summe
callbacks: {
onImageUpload:function (files) { //the onImageUpload API
img = sendFile(files[0]);
}
}
});
}//提交文件到服务器处理
functionsendFile(file) {
data= newFormData();
data.append("file", file);//增加额外的参数
data.append("folder", '商品信息');
data.append("guid", $("#ID").val());
$.ajax({
data: data,
type:"POST",
url:"/FileUpload/Upload",
cache:false,
contentType:false,
processData:false,
success:function(json) {var data =$.parseJSON(json);var url = data.urls[0];
$("#Note").summernote('insertImage', url, 'image name'); //the insertImage API
}
});
}
3、小程序整合Web API接口实现数据展示
上面介绍了管理后台的数据维护,我们就是基于上面的数据模型,在小程序上实现商品数据的展示的。
下图是小程序的商品展示首图,其中包括了顶部Banner栏目、中间的商品分类、底部的商品信息展示几部分。
其中Banner栏目的是一个swiper界面组件,商品类型使用了scroll-view来展示,而商品信息则是使用普通的View处理即可。
整个界面的视图部分代码如下所示。
{{item.name}}
{{item.ProductName}}
没有更多啦
其中小程序的数据是通过后台的JS文件实现数据的加载绑定的。
/**
* 生命周期函数--监听页面加载*/onLoad:function(options) {var that = this;this.getCategorys();this.getTopBanners();this.getGoodsList(0);
},
其中上面的几个函数就是分别通过Web API来获取对应的JSON数据的,函数代码如下所示。
//获取顶部Banner的数据
getTopBanners : function() {//获取产品列表
var url = config.product_api;//'http://localhost:27206/api/Framework/Product/list'
var data ={
status :1, //推荐
pageindex : 1,
pagesize:10}
app.utils.get(url, data).then(res=>{this.setData({
banners : res.list
})
});
},//获取商品类型
getCategorys : function() {var url = config.category_api;//'http://localhost:27206/api/Framework/Product/GetProductType'
app.utils.get(url, {}).then(res=>{var that = this;var categories = [{id:0, name:"全部"}];for(var i=0;i
categories.push(res[i]);
}
that.setData({
categories:categories,
activeCategoryId:0});
});
},//获取商品列表
getGoodsList: function(categoryId) {if (categoryId == 0) {
categoryId= "";
}this.setData({
goods: [],
loadingMoreHidden:true});//获取产品列表
var url = config.product_api;//'http://localhost:27206/api/Framework/Product/list'
var data ={
type: categoryId,
status:'', //所有状态
pageindex: 1,
pagesize:50}
app.utils.get(url, data).then(res=>{this.setData({
goods: res.list,
loadingMoreHidden:false,
})
});
},
如果你对上面请求数据的代码
app.utils.get(url, data).then(res=>{this.setData({
banners : res.list
})
});
有疑问,你可以参考我的随笔《在微信小程序的JS脚本中使用Promise来优化函数处理》了解Promise插件的使用过程,这里通过引入Promise以及JS的模块化方式,可以直接重用这些通用的JS函数,
而详细部分内容,则是需要滚动展示商品的多个图片,另外还需要展示详细的HTML内容,HTML内容的展示使用富文本转化插件wxParse即可实现,这部分在随笔《在微信小程序中使用富文本转化插件wxParse》有详细的使用介绍。
商品详细内容的视图代码如下所示。
{{goodsDetail.ProductName}}
¥ {{goodsDetail.Price}}
{{goodsDetail.Description}}
商品介绍
其中后台的JS主要负责详细信息的获取和绑定工作。
onLoad: function(e) {var that = this;//获取商品详细信息
var url = config.product_detail_api;//'http://localhost:27206/api/Framework/Product/getdetail';
var data ={id: e.id};
app.utils.get(url, data).then(res=>{
console.log(res);
that.data.goodsDetail=res;
that.setData({
goodsDetail:res
});
WxParse.wxParse('article', 'html', res.Note, that, 5);
});
},
最后来段视频了解下整体性的功能展示。
微信小程序菜品做法展示数据库设计_微信小程序结合后台数据管理实现商品数据的动态展示、维护...相关推荐
- 自动回复mysql数据库设计_微信自动回复数据库设计思路【微擎】
多商户设计 关键字触发 查找rule_keyword表 -> rule表 -> 回复资源表[news_reply 图文表.images_reply 图片表.video_reply 视频表. ...
- 公众号 mysql数据库设计_微信公众号之灵活自定义菜单显示包含数据库结构设计...
package com.ihaidou.entity.db.wechat; import io.swagger.annotations.ApiModelProperty; import lombok. ...
- 生成数据库设计文档小技巧
目录 生成数据库设计文档小技巧 利用数据库自身功能生成excel和word文档 使用的软件环境说明 查询所有表名 查询所有列名 设置excel 生成数据库设计文档小技巧 利用数据库自身功能生成exce ...
- 考试系统mysql数据库设计_《在线考试系统数据库设计与实现》.doc
网上测试系统 PAGE28 / NUMPAGES29 西南财经大学 Southwestern University of Finance and Economics 课程实验报告 课程名称: 数据库 ...
- 数据库综合设计java_JAVA程序综合设计数据库设计_
JAVA程序综合设计数据库设计_ 北华大学开放实验报告实验项目名称: JAVA 程序综合设计(数据库设计)所属课程名称: 面对象程序设计--JAVA 实 验 类 型: 设 计 型 班 级: 信 息 1 ...
- 小福利,用Excel vba设计一个变色小游戏
小福利,用Excel vba设计一个变色小游戏 Option ExplicitPrivate Sub CommandButton1_Click() Dim i, j For i = 1 To 100F ...
- 小福利,用Excel VBA设计一个查询小应用
小福利,用Excel VBA设计一个查询小应用 Option ExplicitSub 查询_Click()Dim rng1, rng2, rng As RangeDim firstaddressDim ...
- web界面左边菜单设计_微信小程序UI设计规范
第一部分:概述 微信小程序,大家应该都不陌生,从2018年开始,小程序迅猛发展,小程序依托微信,凭借"触手可及用完即走"的用户体验备受青睐.现已为各大企业广泛采用.今天就给大家分享 ...
- 基于PHP+小程序(MINA框架)+Mysql数据库的评选投票小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序评选投票系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加资讯.管理上传投票信息.用户管理等:用 ...
最新文章
- 雷林鹏分享:CSS 链接
- Android开发之adb命令输入文本到手机输入框中的方法
- 视频日志之android的总结与思考
- springMVC简易学习笔记一
- C# BackgroundWorker的使用 转
- 旋转矩阵中6保6_双色球旋转矩阵公式中6保4的
- Appium 国内下载地址(百度云盘)
- hd获取硬盘序列号_获取硬盘序列号
- 2022CPA审计-第三编-各类交易和账户余额的审计-【完结-有点感觉了?】
- 20175212童皓桢 实验五 网络编程与安全
- 如何找出zeppelin的登入帳號密碼?
- 医疗健康大数据基础知识
- 计算几何入门 1.4:凸包的构造——Jarvis March算法
- colorkey口红怎么样_colorkey镜面唇釉怎么样 唇釉和口红有什么区别
- 3月下旬到5月中旬之前采制的茶叶
- u盘安装linux戴尔boot设置,戴尔台式机bios设置,详细教您如何安装U盘启动
- 一年挥霍150亿:TA抱头痛哭、懊悔不已!
- 中国移动规范学习——4A技术要求(账号管理)
- CCleaner 4.07中文版下载 绿色精简
- 遥望星空WINDOWS证书生成导出加解密工具