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
  • 一、引言:什麼是 JSON JSON (Java Script Object Notation) 是一種很常用的數據格式,它常常用在 web 應用程式中。它可以表示結構化的數據。 下麵是常見的 JSON 文件結構 { "name": "Kamishiro Rize", "age": "22", "o ...
  • 前言 大家好,我是蝸牛,在上一篇中,我們介紹了不同版本的HTTP區別和發展背景,這篇文章我們來聊聊HTTP的缺點,HTTP缺點大致總結有以下三點: 通信使用明文(不加密),內容可能會被竊聽。 不驗證通信方的身份,因此有可能遭遇偽裝(客戶端和服務端都有可能) 無法證明報文的完整性,有可能會被篡改。 其 ...
  • resultMap處理欄位和屬性的映射關係 如果欄位名與實體類中的屬性名不一致,該如何處理映射關係? 第一種方法:為查詢的欄位設置別名,和屬性名保持一致 下麵是實體類中的屬性名: private Integer empId; private String empName; private Integ ...
  • 大家在看到這篇文章前,為了有一個舒適的c++IDE,一定感受到了Dev-c++的廉價感,Clion功能的多餘,VS的臃腫。他們也有自己的優點,但糟點太多,令人十分難受。而VS Code,可以取長補短。下麵的配置內容,可以讓你在刷題時,享受絲滑的動畫,體會集成終端的方便,讓你覺得Coding不再枯燥。 ...
  • 給定一個不含重覆數字的數組 nums ,返回其 所有可能的全排列 。你可以 按任意順序 返回答案。 示例 1: 輸入:nums = [1,2,3] 輸出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2: 輸入:nums = [0,1] 輸 ...
  • 設計模式的目的 編寫軟體過程中,程式員面臨著來自 耦合性,內聚性以及可維護性,可擴展性,重用性,靈活性 等多方面的 挑戰,設計模式是為了讓程式(軟體),具有更好 代碼重用性 (即:相同功能的代碼,不用多次編寫) 可讀性 (即:編程規範性, 便於其他程式員的閱讀和理解) 可擴展性 (即:當需要增加新的 ...
  • 本文講解了決策樹的創鍵的過程,包括熵,信息增益的計算,還有決策樹的創建,以及使用matplotlib讓決策樹可視化的詳細過程 ...
  • ♠ use C++11 倍數 若 $a,b,k \in \mathbb N$,且 $a \times k=b$,那麼 $b$ 是 $a$ 的倍數,稱 $a$ 整除 $b$,記作 $a \mid b$。 $[1,n]\in \mathbb N$ 中 $x \in \mathbb N$ 的倍數有 $\l ...
  • LinkList可以定義指向List的指針 1.當函數參數為LinkList L時,意味著只改變或操作List的內容,而不需要改變L這個指針 如 Status GetElem(LinkList L,int i,ElemType) 2.當參數為LinkList &L時,意味著需要改變或操作L這個指針本 ...
  • Spring 5框架 一、Spring概念 1、Spring是輕量級的JavaEE框架 2、Spring可以解決企業應用開發的複雜性 3、Spring有兩個核心部分:IOC和AOP ​ 1)IOC:控制反轉,把創建對象過程交給Spring進行管理 ​ 2)AOP:面向切麵,不修改源代碼進行功能增強 ...