vue大型電商項目尚品匯（後臺篇）day04

来源:https://www.cnblogs.com/heymar/archive/2022/06/19/16389937.html
-Advertisement-
Play Games

昨天太晚就沒來得及更新，今天是spu管理界面，這個界面一共有三個界面需要切換，完成了兩個界面，而且今天的難度在於最後兩個章節，富有一定的邏輯性，當然中間也有很多需要註意的，比如ElementUI的照片牆需要添加list屬性而且值為你的數據並且必須是一個數組必須有name、url屬性 一.spu管理 ...


昨天太晚就沒來得及更新，今天是spu管理界面，這個界面一共有三個界面需要切換，完成了兩個界面，而且今天的難度在於最後兩個章節，富有一定的邏輯性，當然中間也有很多需要註意的，比如ElementUI的照片牆需要添加list屬性而且值為你的數據並且必須是一個數組必須有name、url屬性

一.spu管理

1.按鈕與三級聯動可操作性

當進入屬性的添加這個界面我們的三級聯動應該不可點擊

image-20220618094325001

image-20220618094337002

以及我們沒有添加屬性值不應該能夠點擊保存

image-20220618094505826

2.spu介紹

image-20220618094607197

spu和sku就是類與實例的關係

image-20220618094708823

添加

image-20220618094840632

修改

image-20220618094917898

等等

3.靜態

兩個card構成，上面還是我們的三級聯動

image-20220618102850143

下麵這個card先是一個button然後一個table，然後一組button，出現了多次button，後期會封裝一個el-button，利用$attrs這個api

image-20220618103403289

然後分頁器

image-20220618103601387

image-20220618103606895

4.動態展示spu列表

應該在獲取到3id這裡來發

image-20220618114335010

渲染數據

image-20220618114604145

然後是我們的button這裡，封裝一個hintbutton，讓其有懸浮提示效果

image-20220618114635750

來一個全局組件，title顯示提示內容，利用兩個api $attrs直接綁定在組件上可以讓其有傳過來的所有屬性，後面是直接有父組件傳過來的事件綁定（包括觸發方式和回調）

image-20220618114952980

image-20220618115357448

然後把分頁器也做了，註意current-change這個事件可以直接寫在獲取列表這個回調裡面，投機取巧

image-20220618115850004

image-20220618115856063

5.spu管理內容切換

在我們spu管理內容界面一共有三個界面需要切換，一個是現在的列表展示，一個是spu的管理，一個是sku的管理，如果只有兩個用true和false來切換即可，但是這裡有三個頁面所以需要一個動態數據，而切換的依據就是看數字是否匹配

image-20220618110311121

後面兩個組件由於內容比較多，我就單獨寫為兩個組件引入進來

image-20220618111237444

6.spuform靜態

首先應該點擊添加和修改進入spuform界面

image-20220618155606066

註意這裡是組件標簽，但是為什麼直接寫上系統事件可以實現，因為我們封裝了，組件那邊用一個$listeners直接獲取了這個事件的觸發方式和回調，用一個v-on綁定

image-20220618155743091

image-20220618155800468

主要就是記住el-form裡面每一項表單要配合el-form-item就行了

image-20220618161015500

image-20220618160941627

7.spuform業務分析

點擊取消回到0頁面，用到自定義事件

image-20220618165802999

image-20220618165808058

image-20220618165814368

image-20220618165818489

然後就是每次點擊編輯進入spuform這個頁面都會發送四個請求，主要是每次點進來都要發送，而且也不能寫在mounted裡面，因為並沒有銷毀路由，按理說可以給編輯按鈕來一個點擊事件，但是需要這些請求回來的數據是在子組件，而編輯按鈕是在父組件。

這裡不能用自定義事件，因為要數據的是在子組件並不是要把數據發到父組件，可以現在父組件點擊發起請求然後props給到子組件，但是過於麻煩了，這裡可以用過ref拿到子組件的實例對象，然後在子組件methods定義一個發起請求的函數，當父組件一點擊編輯的按鈕，就用這個實例對象裡面的這個方法就調用到了子組件的請求函數了

image-20220618170507673

image-20220618171805090

image-20220618171813423

8.獲取spuform數據

先整理介面

image-20220618173705435

接下來四個介面全部請求，然後給到我們對應的響應式數據

image-20220618174514808

9.spuform數據展示

  • 首先spu名稱通過v-model進行收集

image-20220618181526278

這樣一弄確實可以進行雙向收集

image-20220618181603639

但是要考慮到一點，我們是因為點擊的修改所以進來會發請求，spudata裡面才會有這些屬性，那如果我點擊新增spu，沒發請求，我也要手機，到時候點擊保存要發起保存請求，這個時候怎麼辦

觀察介面可以發現需要這麼一堆數據，給到請求

image-20220618181839506

直接將其放到spudata裡面，這時候就算是沒發請求我也可以收集到數據

  • 品牌部分

直接遍歷，然後收集tmid

image-20220618182431649

  • spu描述

    image-20220618182548317

  • spu圖片

    因為我們這裡要照片牆類型展示，所以要添加一個很重要的屬性 file-list而且值應該為你這個存放圖片的數組，而且查看官網文檔可知，添加了這個屬性後，你的照片這裡的數據必須為一個數組，每一個照片數據為一個對象必須有name和url兩個屬性

    image-20220618184533492

    那麼我這裡就可以這麼做，照片牆兩個事件，一個是上傳了文件後的回調，一個是刪除了文件後的回調，這隻是題外話，我在發起獲得這些照片的介面那裡就可以對這個list做一些操作

    image-20220618184548191

  • 銷售屬性

    首先我們表格裡面展示的是spu自身已經選擇的銷售屬性

    image-20220618215837525

    然後屬性值名稱用到動態編輯標簽

    image-20220618220711396

    然後是我們button和input的切換，當初做並不是直接在data來一個賦值讓其點擊一下切換，你要考慮到這裡不光是一行數據，如果都用這個來控制切換到時候就會出現你切換大家一起切換，所以要在各自的對象裡面加上這個屬性

    image-20220618221327029

    上面只是先占位，真正添加進對象後面再做，先把表格最後一個刪除按鈕做了

    image-20220618221501688

    下麵最重要的一個功能，全平臺一共有三個銷售屬性，你自己可能已經選擇了一些，那麼我就要把剩下沒有選擇的篩選出來，這裡用一個計算屬性來做

這裡面的邏輯有點繞註意，用系統總共的數組去篩選，再遍歷你已有的數據，用every也就是全部滿足才返回true，我就去比較老數據看是不是不等於你已經有的數據，全部滿足就返回

image-20220618223135864

然後就可以用我們篩選好的數據去渲染到表單

image-20220618223442161

image-20220618223505138

10.spu照片牆

我們前面完成了照片牆的顯示，但是並沒有完成他的收集功能

可以看到我們照片牆上面有兩個事件，on-preview表示圖片預覽的時候觸發的事件，在這裡不需要收集，on-remove表示的是圖片刪除的時候觸發的事件，這裡需要收集數據

image-20220618224929722

他有兩個參數，file表示你刪除的那個文件，fileList表示的是剩餘的文件

image-20220618225119747

下一個問題，那麼我們上傳圖片怎麼來收集，可以用upload組件的on-success事件，表示的是文件上傳成功觸發的回調

image-20220618225232696

他的三個參數分別是，上傳成功返回的一些信息，上傳成功那張圖的一些信息，上傳成功後所有的圖片信息

image-20220618225335018


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

-Advertisement-
Play Games
更多相關文章
  • 合宙AIR105(四): SPI, MAX7219 8x8LED驅動
    Air105的SPI介紹和驅動MAX7219的演示. Air105 包含五組普通SPI, 可以以半/全雙工, 同步, 串列的方式通信. 可以被配置成主模式併為從設備提供時鐘(SCK), 還能以多主配置方式工作. 支持協議Motorola Serial Peripheral Interface (SP... ...
  • [自製操作系統] 第08回 開啟分頁機制
    目錄 一、前景回顧 二、規劃頁表 三、實現頁表 四、運行測試 一、前景回顧 前面我們已經介紹了分頁機制的運行原理，那麼如何開啟分頁機制呢，也簡單，分為如下三個步驟： 1、創建頁目錄表並初始化頁記憶體。 2、將頁目錄表地址賦值為CR3。 3、打開CR0寄存器的PG位。 可以看出頁表是分頁機制的核心，接下 ...
  • Ubuntu遠程桌面助手(URDC)
    一、CDN是什麼？ CDN的全稱是Content Delivery Network，即內容分髮網絡。其目的是通過在現有的Internet中增加一層新的CACHE(緩存)層，將網站的內容發佈到最接近用戶的網路”邊緣“的節點，使用戶可以就近取得所需的內容（就近原則），提高用戶訪問網站的響應速度。從技術上 ...
  • 騰訊葉聰：朋友圈爆款背後的電腦視覺技術與應用
    分享嘉賓：葉聰 騰訊 技術專家 編輯整理：張智躍 內容來源：DataFun AI Talk「智能技術前沿實踐分享」 出品社區：DataFun 導讀： 本次分享系統介紹電腦視覺的基礎知識，如何利用這些識別演算法實現一個應用，同時進行部署、推廣這一整套流程。主要包括以下六個部分： 1、朋友圈爆款活動背後 ...
  • 厲害了，騰訊云云巢榮獲信通院“雲原生技術創新案例”獎！
    6月15日，由中國信通院主辦的以 “原生聚力，雲數賦能”為主題的“2022雲原生產業大會”在北京舉行。憑藉創新技術和領先實踐，騰訊云云巢榮獲“雲原生技術創新案例”獎。 騰訊云云巢是騰訊雲自主研發的一站式雲原生有狀態服務平臺，基於Kubernetes容器化架構，為各類有狀態服務提供統一的集群管理、資源 ...
  • H5仿原生app簡訊驗證碼vue2.0組件附源碼地址
    一、開發背景 產品出設計稿要求做一個仿原生app簡訊驗證碼組件，花了兩小時搞出來一個還可以的組件，支持屏幕自適應，可以用於彈出框，或自己封裝的vue組件里，希望可以幫助那些被產品壓榨的同學，哈哈。😄 其核心思想就是利用一個輸入框使用css3,translate屬性，每輸入一次後向右位移一個單位位置 ...
  • HTML：1.初識web
    認識WEB **「網頁」**主要是由文字、圖像和超鏈接等元素構成，當然除了這些元素，網頁中還可以包括音頻、視頻以及Flash等。 **「瀏覽器」**是網頁顯示、運行的平臺。 「瀏覽器內核」(排版引擎、解釋引擎、渲染引擎) 常見的瀏覽器及其內核 瀏覽器 內核 備註 IE Trident IE、獵豹安全 ...
  • HTML-知識點總結
    HTML各知識點總結： 基本標簽 標題標簽、段落標簽、換行標簽、水平線標簽、字體樣式標簽、註釋和特殊符號 網頁插入 圖像、超鏈接，視頻、音頻、列表、表格、表單、內聯框架等 超鏈接 錨鏈接、功能性鏈接 列表 有序列表、無序列表、自定義列表 表格 行、列、跨行、跨列 表單 提交格式、文本框、密碼框、單選 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類