微信小程式結合後臺數據管理實現商品數據的動態展示、維護

来源:http://www.cnblogs.com/wuhuacong/archive/2017/09/01/7462086.html
-Advertisement-
Play Games

微信小程式給我們提供了一個很好的開發平臺，可以用於展現各種數據和實現豐富的功能，本篇隨筆介紹微信小程式結合後臺數據管理實現商品數據的動態展示、維護，介紹如何實現商品數據在後臺管理系統中的維護管理，並通過小程式的請求Web API 平臺獲取JSON數據在小程式界面上進行動態展示。 ...


微信小程式給我們提供了一個很好的開發平臺，可以用於展現各種數據和實現豐富的功能，本篇隨筆介紹微信小程式結合後臺數據管理實現商品數據的動態展示、維護，介紹如何實現商品數據在後臺管理系統中的維護管理，並通過小程式的請求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);
    });
  },

 

最後來段視頻瞭解下整體性的功能展示。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux網路檢測手段彙總
    1.iftop iftop可測量通過每一個套接字連接傳輸的數據；它採用的工作方式有別於nload。iftop使用pcap庫來捕獲進出網路適配器的數據包，然後彙總數據包大小和數量，搞清楚總的帶寬使用情況。 雖然iftop報告每個連接所使用的帶寬，但它無法報告參與某個套按字連接的進程名稱/編號（ID）。 ...
  • package-cleanup
    package-cleanup 是一個python開發的命令程式，用來清除本機已安裝的、重覆的 或孤立的軟體包。 desktop版的CentOS鏡像包含這個工具，而Minimal版的CentOS鏡像不包含這個工具 使用場景：在 Redhat/CentOS 操作系統上，安裝了 重覆、錯誤、或孤立的rp ...
  • Windows,Mac與Linux哪個更適合開發者？
    以前寫的，怕引來口水戰，乾脆不發。這段時間面試了十來人，用Mac的開發水平明顯高於Windows的，挺多感想的，於是改改發了吧。 Windows: 對普通用戶而言體驗最友好，對開發者體驗最差； Linux:開發者的天堂，普通用戶的噩夢；從嵌入式開發到應用開發，一應俱全； Mac:WEB開發與設計師首 ...
  • xamarin.android 綁定百度地圖SDK遇到的問題
    在 xamarin.android 綁定項目中，綁定 百度地圖的LBS地圖SDK，參考 https://developer.xamarin.com/guides/android/advanced_topics/binding-a-java-library/binding-a-jar/ 設置好後，編譯 ...
  • [C#] .NET Core項目修改project.json來引用其他目錄下的源碼等文件的辦法 & 解決多框架時 project.json 與 app.config衝突的問題
    作者： "zyl910" 一、緣由 項目規模大了後，經常會出現源碼文件分佈在不同目錄的情況，但.NET Core項目預設只有項目目錄下的源碼文件，且不支持“Add As Link”方式引入文件。這時需要手工修改project.json文件了。 可能是因為最新版本已將 project.json 轉為 ...
  • 讀取excel的方法（可用於批量導入）
    FileStream stream = File.Open(filePath, FileMode.Open, FileAccess.Read); //1. Reading from a binary Excel file ('97-2003 format; *.xls) IExcelDataRead ...
  • List<object>進行Distinct()去重
    有時我們會對一個list<T>集合里的數據進行去重，C#提供了一個Distinct()方法直接可以點得出來。如果list<T>中的T是個自定義對象時直接對集合Distinct是達不到去重的效果。我們需要新定義一個去重的類並繼承IEqualityComparer介面重寫Equals和GetHashCo ...
  • Installing Fonts programatically C#
    https://stackoverflow.com/questions/14796162/how-to-install-a-windows-font-using-c-sharp ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類