微信小程序结合后台数据管理实现商品数据的动态展示、维护

简介:

微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示、维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通过小程序的请求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回调函数,可以实现图片的随时上传处理。

        function initEditor() {
            $('#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]);
                    }
                }
            });
        }
        //提交文件到服务器处理
        function sendFile(file) {
            data = new FormData();
            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处理即可。

 整个界面的视图部分代码如下所示。

<!--pages/product/index.wxml-->
<!--1px = 750/320 = 2.34rpx;-->
<view class="container">
   <view class="swiper-container">
        <swiper class="swiper_box" 
                    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
            <block wx:for="{{banners}}">
                <swiper-item>
                    <image bindtap="tapBanner" data-id="{{item.ID}}" src="{{item.Banner}}" class="slide-image" width="750rpx" height="562.5rpx"/>
                </swiper-item>
            </block>
        </swiper>
        <view class="dots">  
            <block wx:for="{{banners}}" wx:key="unique">  
                <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>  
            </block>  
        </view>  
   </view>
   
    <view class="type-container">
        <scroll-view class="type-navbar" scroll-x="true" style="width: 100%">
            <view class="type-box" wx:for-items="{{categories}}">
                <view id="{{item.id}}" class="type-navbar-item {{activeCategoryId == item.id ? 'type-item-on' : ''}}" bindtap="tabClick">
                    {{item.name}}
                </view>
            </view>
        </scroll-view>
    </view>
    <view class="goods-container">
        <view class="goods-box" wx:for-items="{{goods}}" wx:key="{{index}}" bindtap="toDetailsTap" data-id="{{item.ID}}">
           <view class="img-box">
              <image src="{{item.Picture}}" class="image"/>
           </view>
           <view class="goods-title">{{item.ProductName}}</view>
        </view>
    </view>
    <view hidden="{{loadingMoreHidden ? true : false}}" class="no-more-goods">没有更多啦</view>
</view>

其中小程序的数据是通过后台的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<res.length;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》有详细的使用介绍。

商品详细内容的视图代码如下所示。

<import src="../../utils/wxParse/wxParse.wxml" />
<view class="container"> 
   <view class="swiper-container">
        <swiper class="swiper_box" 
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
            <block wx:for="{{goodsDetail.pics}}">
                <swiper-item>
                    <image src="{{item.pic}}" class="slide-image" width="355" height="150"/>
                </swiper-item>
            </block>
        </swiper>
        <view class="dots">  
            <block wx:for="{{goodsDetail.pics}}" wx:key="unique">  
                <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>  
            </block>  
        </view>  
   </view>
   <view class="goods-info">
        <view class="goods-title">{{goodsDetail.ProductName}}</view>
        <view class="goods-price" hidden="true">¥ {{goodsDetail.Price}}</view>
        <view class="goods-text">{{goodsDetail.Description}}</view>
   </view>
    <view class="goods-des-info">
        <view class="label-title">商品介绍</view>
        <view class="goods-text">
            <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
         </view>
    </view>

</view>

其中后台的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);
    });
  },

最后来段视频了解下整体性的功能展示。

本文转自博客园伍华聪的博客,原文链接:微信小程序结合后台数据管理实现商品数据的动态展示、维护,如需转载请自行联系原博主。

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
目录
相关文章
|
10月前
|
数据采集 存储 安全
数据治理≠数据管理!90%的企业都搞错了重点!
在数字化转型中,数据不一致、质量差、安全隐患等问题困扰企业。许多组织跳过基础的数据管理,直接进行数据治理,导致方案难以落地。数据管理涵盖数据生命周期中的采集、存储、处理等关键环节,决定了数据是否可用、可靠。本文详解数据管理的四大核心模块——数据质量、元数据、主数据与数据安全,并提供构建数据管理体系的四个阶段:评估现状、确定优先级、建立基础能力与持续改进,助力企业夯实数据基础,推动治理落地。
|
存储 数据管理 数据格式
数据治理 vs. 数据管理:别再傻傻分不清!
数据治理 vs. 数据管理:别再傻傻分不清!
668 10
|
10月前
|
数据采集 存储 SQL
数据管理四部曲:元数据管理、数据整合、数据治理、数据质量管控
老张带你搞定企业数据管理难题!数据找不到、看不懂、用不好?关键在于打好元数据管理、数据整合、数据治理和数据质量管控四大基础。四部曲环环相扣,助你打通数据孤岛,提升数据价值,实现精准决策与业务增长。
数据管理四部曲:元数据管理、数据整合、数据治理、数据质量管控
|
JSON 安全 定位技术
微信附近人提取v3脚本, 微信附近人id提取技术插件,采集附近人wxid数据工具
本内容介绍微信“附近的人”功能的技术原理与实现方法,基于LBS服务,涉及位置模拟、协议分析及数据解析。通过修改GPS坐标或使用Frida等工具hook位置函数
|
数据采集 人工智能 监控
企业数据来源杂、质量差,如何通过主数据管理解决?如何确保数据可信、一致和可用?
本文三桥君系统介绍了主数据管理(MDM)在企业数字化转型中的关键作用。产品专家三桥君从数据清洗、治理、处理到流转四个维度,详细阐述了如何通过标准化流程将数据转化为企业核心资产。重点包括:数据清洗的方法与工具应用;数据治理的组织保障与制度设计;数据处理的三大核心动作;以及数据流转的三种模式与安全控制。专家三桥君强调主数据管理能够推动企业从"经验决策"转向"数据驱动",并提出构建统一数据服务网关、"数据血缘图谱"等实战建议,为企业数字化转型提供系统化解决方案。
428 0
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
468 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
519 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目