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

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

這幾天更新有點小慢,逐漸開始回歸狀態了。儘快把這個後臺做完,要開始vue3了 3.添加修改品牌 用到組件 Dialog 對話框,其中visible.sync這個配置是修改他的顯示隱藏的,label-width是這個標題的寬度 然後上傳頭像的按鈕,upload組件,他有自己的一些樣式記得複製在styl ...


這幾天更新有點小慢,逐漸開始回歸狀態了。儘快把這個後臺做完,要開始vue3了

3.添加修改品牌

用到組件 Dialog 對話框,其中visible.sync這個配置是修改他的顯示隱藏的,label-width是這個標題的寬度

image-20220615095802257

然後上傳頭像的按鈕,upload組件,他有自己的一些樣式記得複製在style裡面

image-20220615100818021

image-20220615101134106

前面靜態佈局完成,下麵完成功能

首先完成介面

一個添加和一個修改的介面,由於發現他們參數都差不多,所以完全可以用一個函數來完成,只是判斷有無攜帶id參數

image-20220615115013587

首先表單是可以收集自己數據的配置項 model,然後品牌名稱的值通過v-model來收集

image-20220615115411136

image-20220615115417218

關鍵是下麵這個圖片怎麼來收集,因為這裡是用的 upload來做的,它上面有一個 action,表示上傳後的圖片放到哪裡

image-20220615120622944

然後通過他自己的一個事件 on-success表示上傳成功後會觸發,兩個參數,一個res會返回上傳後圖片的地址,一個是file顯示更詳細的圖片的一些內容

我讓上傳成功後的圖片地址給到from表單數據不就是完成了表單收集

image-20220615120841560

這樣一來原來的圖片鏈接也要變

image-20220615120914864

3.1添加品牌

給確定按鈕添加點擊事件,通過$message餓了麽的api來彈出消息

image-20220615161834476

3.2修改品牌

將修改增加點擊事件,重要的是修改點擊出來應該有數據,將我們組建的slot裡面row拿過來,表示當前這一行的數據

image-20220616093759883

image-20220616093935890

但是這裡有個bug,當我修改dialog的值時,表格的值也會跟著變

image-20220616101037052

這裡我理解了很久,錯誤應該是由於,我們將row賦值給了form,我們的row是伺服器發過來的這一行的數據,這時給了form,那我們的list也就是table綁定的data他也是拿的伺服器的數據,所以現在的list和form相當於指向的都是同一個數組,我修改dialog也就是修改form,那就修改了同一個數組所以table的值也會跟著變

這裡的解決思路就是不要直接去賦值row,利用淺拷貝也就是讓他們指向不同的數組即可

image-20220616101513658

完善邏輯

image-20220616102104062

4.表單驗證

添加rules

image-20220616114905490

制定規則,註意,required表示前面那個*號,trigger表示觸發方式一般表單就change或者blur,圖片用的upload組件不屬於表單所以觸發方式可以不寫

image-20220616115123400

然後給我們要驗證的item添加prop,值就為這裡的屬性名

image-20220616115221191

但是現在並沒有完,因為需要一個全部驗證成功才可以點擊確定的驗證

image-20220616121710084

4.1自定義校驗規則

首先rule、ref不變包括prop都是一樣的,主要是驗證裡面的配置變了,這個validator就需要要去data裡面自己書寫你的邏輯

image-20220616122251982

寫在return外面

image-20220616122451826

5.刪除品牌

用到組件 mesageBox,點擊刪除的回調

image-20220616154558959

因為我們點擊確定是真的要刪除,所以要發起介面

image-20220616161144290

但是有bug,就是我們刪除刷新表格,會自動回到第一頁,我想要當前頁還有數據就在當前頁,沒有數據再回到前一頁

list是當前頁的數據列表,判斷他為pager即可

image-20220616163237573

四.平臺屬性管理

image-20220616163326263

1.三級聯動靜態組件

整體外部是兩個帶陰影的框是 card

image-20220616174214541

然後三級聯動作為全局組件,因為後面會用到,裡面是行內表單,即可以在一行顯示的表單元素,在from裡面可以找到

image-20220616174905974

2.三級聯動動態展示

首先一級聯動需要一開始就請求介面

image-20220616183301896

將數組遍歷

image-20220616183352490

首先我們的內容展示 修改label,然後value也要收集值,然後最關鍵的是我們要收集id,因為二級分類需要一級分類的id以此類推,option的value是給到select的value,通過select的value收集起來id,由於這裡是form,前面說過他有model屬性收集表單數據,所以form也可以收集一份註意只有當select的value靈活動起來,也就是靈活設置一個data裡面配置好的數據我們選擇下拉框之後才會顯示出來

image-20220616190435226

通過change事件知道一級分類已選擇,發起二級分類介面請求

image-20220616190839408

image-20220616191013313

渲染頁面同一級

image-20220616191141397

三級分類同上,只不過要註意,三級分類也要一個change事件,因為選擇完畢過後,會獲取下麵詳細信息的請求

image-20220616191332002

3.三級聯動完成

完善一個地方,當一級分類發生變化,後面二級三級分類id以及內容應該清空,二級分類發生變化,三級id內容應該清空

image-20220616193208917

下麵的需求,因為我是在子組件裡面完成的id獲取,但是我下麵這個card是在父組件裡面,所以子給父傳id自定義事件

但是我切換一個就發送一個id,所以我需要知道這個id是幾級id,傳過來的數據應該標明

image-20220616193411662

image-20220616193523776

判斷幾級分類做出相應的處理

image-20220616212724607

同樣的這邊也需要,當重新選擇了一次,應該把二級和三級清空

image-20220616212835286


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

-Advertisement-
Play Games
更多相關文章
  • Memory Resource Controller 記憶體資源控制器 註意: 這個文檔完完全全地過時了,需要整個地重寫。但它還是包含了有用的信息,所以我們仍舊把它保留在這裡,但是如果你需要深入理解的話,需要確保核對過當前的代碼。 註意: 記憶體資源控制器在本文檔中指的是記憶體控制器。不要混淆了這裡記憶體控 ...
  • 延時統計Delay accounting 任務在執行時等待某個內核資源會意外遇到延遲,例如可運行的任務正在等待空閑CPU。 per-task的延時統計功能測量下列情況下任務經歷的延遲: 正在等待CPU,waiting for a CPU (while being runnable) 同步塊I/O的完 ...
  • 一、視圖概念 • 視圖概念 • 視圖是基於一個表或多個表或視圖的邏輯表(虛表),本身不包含數據,通過它可以對錶裡面的數據進行查詢。 • 基表 • 視圖是從一個或多個實際表中獲得的,這些表的數據存放在資料庫中。那些用於產生視圖的表叫做該視圖的基表。 • 視圖優點 • 簡化性 • 安全性 二、視圖分類 ...
  • 一、索引概念 • 在關係資料庫中,索引是一種與表有關的資料庫對象,它可以使對應於表的SQL查詢語句執行得更快。 • 索引的作用類似於圖書的目錄,可以根據目錄中的頁碼快速找到所需的內容。 • 對於資料庫來說,索引是一個必選項,對於現在的各種大型資料庫來說,索引可以大大提高資料庫的性能,以至於它變成了數 ...
  • 一、觸發器簡介 • 什麼是觸發器(trigger) • 觸發器在資料庫里以獨立的對象存儲,由資料庫產生某一類事件而啟動運行,即觸發器是當某個事件發生時自動地隱式運行。 • 觸發器的特點 • 由特定事件觸發,外部無法調用。 • 觸發器無參數。 • 一個表上最多可有12個觸發器。 • 觸發器的作用 • ...
  • 騰訊雲資料庫TDSQL與中國人民大學最新聯合研究成果被SIGMOD 2022接收並將通過長文形式發表。SIGMOD是國際數據管理與資料庫領域頂尖的學術會議之一,騰訊雲資料庫TDSQL論文已連續多年入選VLDB、SIGMOD、ICDE等國際頂級會議。 本次入選論文題目為:CompressDB: Ena ...
  • 本文介紹什麼是 SQL GROUPING 運算符,如何使用 SQL GROUPING 運算符。GROUPING 指示是否聚合 GROUP BY 列表中的指定列表達式。 本文重點 只使用 GROUP BY 子句和聚合函數是無法同時得出小計和合計的。如果想要同時得到,可以使用 GROUPING 運算符。 ...
  • springboot整合ueditor實現圖片上傳和文件上傳功能 寫在前面: 在閱讀本篇之前,請先按照我的這篇隨筆完成對ueditor的前期配置工作: springboot+layui 整合百度富文本編輯器ueditor入門使用教程(踩過的坑)https://www.cnblogs.com/rain ...
一周排行
    -Advertisement-
    Play Games
  • C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手,剛進公司跟領導報道,我說我是java全棧,他問我會不會C#,我說大學學過,他說這個TMS系統就給你來管了。外包已經把代碼給我了,這幾天先把增刪改查的代碼背一下,說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • 委托與事件 委托 委托的定義 委托是C#中的一種類型,用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法,實現回調、事件處理和動態調用等功能。通俗來講,就是委托包含方法的記憶體地址,方法匹配與委托相同的簽名,因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法:委托允許存儲對方法的引用, ...
  • 前言 這幾天閑來沒事看看ABP vNext的文檔和源碼,關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式,構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下: 這時候我就開始疑惑了,因為我知道 ...
  • C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面,ok,領導開完會就被裁掉了,很突然啊,他收拾東西的時候我還以為他要旅游提前請假了,還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走,怕被偷嗎?還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多,這邊的 ...
  • 概述:在C#中,通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`,實現多條件動態查詢。通過創建表達式樹,可輕鬆構建複雜的查詢條件。 在C#中,可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • 1. 案例 成某三甲醫預約系統, 該項目在2024年初進行上線測試,在正常運行了兩天後,業務系統報錯:The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 背景 我們有些工具在 Web 版中已經有了很好的實踐,而在 WPF 中重新開發也是一種費時費力的操作,那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF?莫問為什麼,老 C# 開發的堅持,另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...