vue大型電商項目尚品匯(後臺篇)day05

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

今天繼續是對後臺管理部分的一個操作,但是快要結束了,今天結束,明天會進入一個從Vue以來,另外一個名聲顯著的東西了,一隻耳聞從未見識,而且十分的炫酷 他就是 數據可視化Echarts,迫不及待瞭解了 11.銷售屬性添加 當我們點擊添加就,應該把添加的放到table裡面來,table裡面每一行數據是一 ...


今天繼續是對後臺管理部分的一個操作,但是快要結束了,今天結束,明天會進入一個從Vue以來,另外一個名聲顯著的東西了,一隻耳聞從未見識,而且十分的炫酷
他就是------數據可視化Echarts,迫不及待瞭解了

11.銷售屬性添加

當我們點擊添加就,應該把添加的放到table裡面來,table裡面每一行數據是一個對象

image-20220619101514502

然後就可以開始整理數據,我們select收集的值不應該只是id

image-20220619102104406

收集到了數據,直接在button點擊事件,整理參數,給到我們的data對應的數據

image-20220619102442001

12.銷售屬性值展示與收集

這裡主要是button和input的一個切換

image-20220619112152929

給添加來一個點擊事件,此時的row就為當前這一行的數據,我們知道每一行必須有自己獨有的控制切換的變數,我們前面也說過先把控制切換的變數還有收集input的變數先放在這裡,並沒有去做什麼時候添加這兩個變數,現在就是時候了,當點擊添加的時候就可以把兩個變數添加進來,但是要註意我們需要點擊就重新解析頁面出來input所以要做響應式數據,同時需要把上面表單收集的值也做好,因為馬上切換為input就要開始收集了

image-20220619113024974

然後就是當我們失去焦點,需要將值呈現出來,這個就要看到我們的tag是遍歷的什麼了

image-20220619113349188

所以失去焦點後要總結一下值放到這個子列表裡面

image-20220619113817669

然後就是兩個註意事項,一個是不能存空值,一個是不能存重覆的值

image-20220619114230272

13.刪除銷售屬性與屬性值

拿到索引,直接根據splice方法刪除即可,註意tag組件點擊x的事件是close

image-20220619114932079

image-20220619115201199

順便把除了在場景0顯示其他都不能點擊的三級聯動也做了

image-20220619115506651

14.spu修改保存操作

這個頁面涉及到兩個操作的保存,一個是修改一個是新增,而且他們兩個介面要的數據都差不多就是一個id的區

image-20220619163056607

然後在我們保存點擊事件準備發請求,先要整理參數,所有的參數都能夠收集到,只是照片牆這裡需要整合進數據,我們新增的數據沒有imgname和imgurl,其次我們發過去的數據不需要name和url

image-20220619165158365

請求成功應該通知父組件回到table並刷新頁面

image-20220619165327122

image-20220619165345072

15.spu添加保存

當我們點擊添加spu,應該發起兩個請求,獲取品牌和銷售屬性的下拉框選擇,添加按鈕在父組件,所以通過ref通知子組件發請求

image-20220620084022981

image-20220620084530355

然後觀察得知都可以手機,就是category3id收集不到

image-20220620085155039

image-20220620085212172

然後就是幾個bug,當出現內容過多我在第三頁添加保存之後不應該在第三頁要回到第一頁

image-20220620093355428

取消按鈕也要改

image-20220620093427107

image-20220620094002526

二.刪除spu

準備介面,用到組件pop

image-20220620094843192

同時判斷當前位置應該停留在那

image-20220620095041741

三.添加sku

1.靜態組件

首先點擊新增sku會切換場景2

image-20220621085742559

image-20220621085759067

然後完成sku的靜態,主要就是註意一下table前面如果不是序號為選擇框,type為selection

image-20220621091141630

image-20220621091149690

2.獲取skuform數據

當我們點擊新增sku,需要發起三個請求,一樣的套路通過父組件ref來調用

image-20220621092741354

image-20220621093713278

3.sku收集與展示

總共應該分為三類數據,第一類應該是父組件傳過來的

image-20220621094913261

image-20220621095026264

第二類應該是通過v-model可以收集到的數據

image-20220621102320534

主要就是註意一下 input新增 type為number可以限制只能輸入數字

image-20220621102404630

第三類數據就是一些需要計算操作的數據

先把平臺屬性完成,遍歷

image-20220621103725173

image-20220621104610757

image-20220621104618191

這裡的難點主要在於怎麼來收集數據,看介面文檔可知,需要這些數據

image-20220621104732200

但是我們這裡其實只需要拿到這兩個就可以了

image-20220621104856543

attrId表示你選擇了那一個select,valueId表示你選擇了那一個值,有這兩個就可以了

第二個難點就是我們數據要放在哪裡,因為你要知道我們這裡收集的可能不只一個值,不只一個select,所以最好的方法其實是存放在這個select的對象裡面

image-20220621110009350

銷售屬性同理

image-20220621110335975

接下來是對sku圖片的一個收集與展示

image-20220621161820035

然後這個圖片怎麼來收集的問題,覆選框表格有一個事件,是當選擇按鈕發生變化時觸發,而且還會有參數,參數就為當前勾選的這些圖片的一行的數據

image-20220621162432194

image-20220621162531013

先不要放進skuInfo介面參數裡面,因為還不完整

image-20220621162624831

image-20220621162642111

查看我們介面數據可知有一個isDefault的參數,它是表示當前這個圖片是否是預設值,但是我們從伺服器拿回來數據的時候就沒有這個參數,所以一開始就要添加上

image-20220621163111387

然後做預設button

image-20220621163531225

image-20220621163612206

image-20220621163739436

4.sku保存

在做這一步之前,肯定是要先整理參數,首先是平臺屬性和銷售屬性的參數整理,應該點擊保存後,就對attrData來一個遍歷,然後依次每一條數據字元串轉為數組,push到一個對象裡面,最後把這個對象給到skuinfo的參數

image-20220621175229253

但是我這裡不這樣做,用另一個方法,因為這裡你會重覆往一個數組裡面添加內容,所以可以通過迭代來做

image-20220621175643026

銷售屬性同理

image-20220621175949968

整理圖片參數

image-20220621181339686

發起保存請求,成功返回頁面

image-20220621181730821

5.sku列表展示

完成介面後,這裡使用dialog展示出來,將標題改為動態

image-20220622111227305

image-20220622111233344

image-20220622111250171

然後修改table的結構

image-20220622111725099

image-20220622112937747

image-20220622113036830

6.loading效果

用到elementUI全新的組件loading

直接給table來一個v-loading指令

image-20220622114149569

然後需要在數據data定義loading為true

image-20220622114226958

記得數據回來將其改為false

image-20220622114258929

然後有兩個bug

一個是我們的loading只會執行一次,因為改為false後就永遠是false了,還有一個是會有數據回顯的問題,點了一個sku顯示之後在去點其他的 他一瞬間會顯示下上一條的數據

這些都可以通過dialog的一個回調來解決,before-close註意它是一個屬性,所以要用v-bind綁定,然後他有一個形參done,必須寫上才能正常關閉,他表示關閉dialog前的回調

image-20220622114650040

image-20220622114716952

四.Sku

1.數據展示與分頁

首先做好介面,然後完成靜態頁面

image-20220622120415339

image-20220622120421267

發請求獲取table數據

image-20220622120807483

image-20220622120813282

動態展示數據在表格上

image-20220622121457084

image-20220622121502847

然後做分頁器,點擊改變還是用的之前的套路

image-20220622121749257

image-20220622121658461

2.上架與下架功能

這是兩個介面,然後點擊切換上下架的按鈕,併發起相應的介面請求

image-20220622145624817

image-20220622150022575

3.查看詳情(多個新組件)

首先點擊查看詳情由一個從右往左出來的內容,用到Drawer 抽屜

image-20220622152817962

image-20220622153001270

同時點開查看詳情還應該發起請求

image-20220622153512766

然後給我們drawer抽屜整理下佈局,這裡應該用到一個新組件layout,跟bootstrap的柵格系統一樣,但是餓了嗎是分為了24份

image-20220622153854247

要註意要自己去修改樣式,並不是用這裡的組件當成組件標簽去修改,可以去看最終在頁面上呈現的標簽類名等來修改

image-20220622154520378

image-20220622154547613

然後頁面佈局完畢,就可以放入動態數據了,平臺屬性用的是tag標簽

image-20220622155308562

最後是圖片展示這裡,需要一個輪播圖carousel

image-20220622155605154

要修改單獨的指示器

image-20220622155851256

image-20220622155942170

image-20220622160008298

4.深度選擇器

首先回顧一點,我們給css加scoped,是為了讓當前樣式只在這個組件生效,他的方法就是給當前組件所有的標簽都加上一個隨機的屬性,再通過你的選擇器和他的屬性選擇器達到只在這裡生效

image-20220622162202509

但是要註意一點,我們的子組件 根組件也會有這個屬性,所以如果子組件根組件跟父組件設置的選擇器一樣的話那麼根組件是會受影響的,但是隻影響根組件,根組件下麵的其他標簽就沒事了

image-20220622162400855

image-20220622162337862

當我有這樣一個子組件,我也想要父組件設置了子組件能夠跟著生效

image-20220622162451331

一種方法就是父組件去掉scoped,但是我就是不能去掉,這個時候就要用到深度選擇器了,也叫樣式穿透在原生css裡面是>>>,less裡面是/deep/,scss裡面是::v-deep

image-20220622162624581

所以針對剛纔那種情況樣式穿透也可以實現

image-20220622162650393


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

-Advertisement-
Play Games
更多相關文章
  • 一:背景 1. 一個有趣的話題 最近在看 硬體異常 相關知識,發現一個有意思的空引用異常問題,拿出來和大家分享一下,為了方便講述,先上一段有問題的代碼。 namespace ConsoleApp2 { internal class Program { static Person person = n ...
  • 為什麼要使用Gridsome Gridsome 通過使用PRPL模式將超高性能構建到每個頁面中。您可以獲得開箱即用的代碼拆分、資產優化、漸進式圖像和鏈接預取。Gridsome 網站預設獲得幾乎完美的頁面速度分數。 Gridsome 生成靜態 PWA。只有關鍵的 HTML、CSS 和 JavaScri ...
  • 轉載自:https://blog.csdn.net/u013685264/article/details/121903540?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault% ...
  • 記錄windows11系統,按shift鍵中英文切換未生效解決辦法 問題由來:中英文切換不順暢 問題搜索思路: shift鍵跟粘滯鍵有關,博主顯示直接去搜Windows shift鍵切換中英文不順暢。看到有人說從Windows 10後shift鍵就有了該特性,有些大佬描述是跟粘滯鍵有關,shift按 ...
  • 一 、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接:嘗鮮少代碼高性能的Svelte框架 2.完成創建後就可以在github中查看到新增的Vite倉庫 二 、 本地編寫 Svelte3聊天室 1.將應用模版克隆到本地 首先假定你已經安裝了Git、node,沒有安裝請移步node官網 ...
  • E-R圖也稱實體-聯繫圖(Entity Relationship Diagram),它提供了表示實體類型、屬性和聯繫的方法,用來描述現實世界的概念模型。 ...
  • 本文檔內容主要是分析android設備中cgroup v1實現了哪些控制器,他們有哪些子控制器以及如何配置這些控制器的。 我是使用紅米Note4Plus的開發版本來調研分析的,手機已經解鎖並具有了root許可權,可以隨意操作修改手機內容。不涉及到源代碼層面的調查分析。 設備的基本配置信息:高通msm8 ...
  • 開發者們,你希望用戶如何獲取新聞? 有的人靠手機彈窗知天下事,有的人則在新聞應用中盡覽每一篇文章;有的人一目十行,有的人則喜歡細細咀嚼;有的人主動探索,有的人則想要應用投其所好。 科技在不斷刷新著用戶獲取新聞的方式,與此同時,用戶自身也在發出新的獲知需求。HMS Core新聞行業解決方案,為新聞行業 ...
一周排行
    -Advertisement-
    Play Games
  • 什麼是工廠模式 工廠模式是最常用的設計模式之一,屬於創建型模式。 有點: 解耦,可以把對象的創建和過程分開 減少代碼量,易於維護 什麼時候用? 當一個抽象類有多個實現的時候,需要多次實例化的時候,就要考慮使用工廠模式。 比如:登錄的抽象類ILoginBusiness,它有2個實現,一個用用戶名密碼登 ...
  • 這次iNeuOS升級主要升級圖形渲染引擎和增加豐富的圖元信息,可以很快的方案應用。總共增加41個通用和行業領域的圖元應用,增加2154個圖元信息,現在iNeuOS視圖建模功能模塊總共包括5894個行業圖元信息。現在完全支持製作高保真的工藝流程和大屏展示效果。 ...
  • 效果圖先附上: 首先 這是我是參考 教程:使用 SignalR 2 和 MVC 5 實時聊天 | Microsoft Docs 先附上教程: 在“添加新項 - SignalRChat”中,選擇 InstalledVisual> C#>WebSignalR>,然後選擇 SignalR Hub 類 (v ...
  • 一、前言 項目中之前涉及到胎兒心率圖曲線的繪製,最近項目中還需要添加心電曲線和血樣曲線的繪製功能。今天就來分享一下心電曲線的繪製方式; 二、正文 1、胎兒心率曲線的繪製是通過DrawingVisual來實現的,這裡的心電曲線我也是採用差不多相同的方式來實現的,只是兩者曲線的數據有所區別。心電圖的數據 ...
  • 安裝 Redis # 首先安裝依賴gcc, 後面需要使用make編譯redis yum install gcc -y # 進入 /usr/local/src 目錄, 把源碼下載到這裡 cd /usr/local/src # 下載 redis 7.0.2 的源碼,github被牆,可以使用國內的地址 ...
  • Redis 的定義? 百度百科: Redis(Remote Dictionary Server ),即遠程字典服務,是一個開源的使用ANSI C語言編寫、支持網路、可基於記憶體亦可持久化的日誌型、Key-Value資料庫,並提供多種語言的API。 中文官網: Redis是一個開源(BSD許可),記憶體存 ...
  • 事情的起因是收到了一位網友的請求,他的java課設需要設計實現迷宮相關的程式——如標題概括。 我這邊不方便透露相關信息,就只把任務要求寫出來。 演示視頻指路👉: 基於JavaFX圖形界面的迷宮程式演示_嗶哩嗶哩_bilibili 完整代碼鏈接🔎: 網盤:https://pan.baidu.com ...
  • Python中的字典 Python中的字典是另一種可變容器模型,且可存儲任意類型對象。鍵值使用冒號分割,你可以看成是一串json。 常用方法 獲取字典中的值 dict[key] 如果key不存在會報錯,建議使用dict.get(key),不存在返回None 修改和新建字典值 dict[key]=va ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“加班使我快樂”。 面試官: 看你簡歷上用過MySQL,問你幾個簡單的問題吧。什麼是聚簇索引和非聚簇索引? 這個問題難不住我啊。來之前我看一下一燈M ...
  • tunm二進位協議在python上的實現 tunm是一種對標JSON的二進位協議, 支持JSON的所有類型的動態組合 支持的數據類型 基本支持的類型 "u8", "i8", "u16", "i16", "u32", "i32", "u64", "i64", "varint", "float", "s ...