尚品汇后台管理系统
尚品匯后臺管理系統
- 1、登錄(退出登錄)
- 2、路由設置(***)
- 路由表component屬性
- 3、品牌列表模塊
- 3.1 el-pagination layout屬性
- 3.2 封裝四個模塊api
- 3.3 this濫用和參數解構
- 3.4 品牌列表展示(插槽)
- 3.5 品牌信息新增和修改
- 3.6 表單驗證
- 3.7 刪除品牌信息
- 4、商品屬性
- 4.1 三級聯動
- 4.2 商品屬性展示
1、登錄(退出登錄)
后臺接口swagger在線文檔:
后臺接口1
后臺接口2
1、將所有的api接口url更換為和swagger在線文檔相同的url。
2、跨域解決
devServer部分(proxy代理解決跨域)
記得重啟項目
3、切記將請求攔截器的X-Token改為token,否則后臺會返回jwt空錯誤。
config.headers['token'] = getToken()
退出登錄部分可以不做修改。
2、路由設置(***)
路由部分代碼
export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true},{path: '/404',component: () => import('@/views/404'),hidden: true},{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: { title: '首頁', icon: 'dashboard' }}]},{path: '/product',name: 'Product',component: Layout,meta: { title: '商品管理', icon: 'el-icon-goods' },children: [{path: 'trademark',name: 'TradeMark',component: () => import('@/views/tradeMark'),meta: { title: '品牌管理' }}, {path: 'attr',name: 'Attr',component: () => import('@/views/Attr'),meta: { title: '平臺屬性管理' }}, {path: 'sku',name: 'Sku',component: () => import('@/views/Sku'),meta: { title: 'Sku管理' }}, {path: 'spu',name: 'Spu',component: () => import('@/views/Spu'),meta: { title: 'Spu管理' }}]},// 404 page must be placed at the end !!!{ path: '*', redirect: '/404', hidden: true } ]路由表component屬性
component用法一:
path: 'trademark', name: 'TradeMark', component: () => import('@/views/tradeMark'),當訪問path為trademark時,會顯示tradeMark這個組件。上面只是component最簡單的應用。
component用法二
如果一個路由只是一個菜單項,并不對應相應的組件,那么此時的component為本菜單項所在的路由組件。
例如:上面代碼中product只是一個菜單項,并不對應相應組件。所以他的component應該為他所在的組件,即component: Layout。trademark為子菜單項,有具體對應的組件,所以component: () => import('@/views/tradeMark'),trademark的component原理就是用法一。
前端菜單欄顯示的實現具體如下:
遍歷路由信息數組,將路由項渲染為菜單項。菜單項的信息在路由信息中獲取。
(1)如果路由項只有一個子路由,則將該子路由信息作為作為菜單項信息。
(2)如果路由項有多個子路由,將父路由信息作為一級菜單項信息。然后,遍歷所有的子路由,生成相應的二級菜單項。
這個前端菜單項顯示代碼值得研究,寫的非常好。
3、品牌列表模塊
3.1 el-pagination layout屬性
layout是指分頁器各組件的排列方式,例如:
layout=" prev, pager, next, jumper,->,sizes,total"
->后面的組件會被放在頁面的最右邊。如下圖所示:
3.2 封裝四個模塊api
四個模塊分別為attr、sku、spu、tradeMark。
每個模塊的api封裝為對應的js文件,如下圖所示:
為了方便使用,將四個模塊再次封裝到一個js文件中,然后統一暴露。
這樣如果我們使用時,只需要import這個js文件就可以使用了,但是為了更加簡介,我們可以將這個js文件在main.js中注冊,將其是設置為全局屬性。
之后在組件中使用四個模塊的api函數時,可直接通過this.$API.函數名調用。
3.3 this濫用和參數解構
data中的數據十分常用,當我們使用時可能會頻繁的通過this.使用data中的數據,這樣容易發生濫用this去讀取data中數據,程序性能會下降。具體原因鏈接描述
解決方法:ES6允許我們通過參數解構來避免this的濫用。
例如,getPageList函數需要使用page, limit兩個屬性。直接const { page, limit } = this解構出這兩個屬性。
export default {name: 'TradeMark',data() {return {page: 1,limit: 3}},mounted() {this.getPageList()},methods: {getPageList() {const { page, limit } = thisthis.$API.trademark.getTradeMarkInfo(page, limit)}} }3.4 品牌列表展示(插槽)
1、獲取數據函數
設置了pager = 1參數,調用時,如果傳值就會將值賦給pager ,如果不傳pager = 1。即默認獲取的是第一頁數據。
2、需要注意的是插槽的使用。我們需要通過插槽獲取父組件數據。
el-table插槽使用方法:
品牌logo列使用了插槽。所以通過一下代碼探究插槽的使用
下面三個箭頭分別對應slot-scope="{row, column, $index}中的row, column, $ index。
row表示表格當前一行的全部信息;
column表示當前列的一些屬性;
$index表示當前行數據在整個數據數組中的下標。
這里我們只需要用到當前行所包含的品牌logo圖片鏈接,所以只需要使用row,完整代碼如下:
3、分頁器修改頁面大小和修改當前頁碼都比較簡單,直接貼代碼。
// 修改當前頁碼handleCurrentChange(current) {this.getPageList(current)},// 修改頁面大小handleSizeChange(size) {this.limit = sizethis.getPageList()},注意:handleSizeChange中的getPageList需要帶參數,因為getPageList定義了默認參數pager=1,如果不傳入current,則getPageList的默認參數pager=1就會生效,就會一直請求第一頁數據。
3.5 品牌信息新增和修改
1、頭像上傳組件
新增中比較重要的時頭像上傳組件,代碼如下
圖片數據不能用v-model綁定,
action 必選參數,上傳的地址。這里的 action取值是上傳圖片的接口,是后臺提供好的接口。
before-upload表示上傳成功前的函數
on-success表示上傳成功后的函數
handleAvatarSuccess(res, file) {// res是上傳成功后返回給前端的數據// file是上傳成功后服務器返回給前端的數據this.tmFrom.logoUrl = URL.createObjectURL(file.raw)}上面兩個函數餓了嗎UI官網都以給出,理解即可。
2、新增和修改函數
新增和修改按鈕使用的是同一個彈窗。
(1)點擊添加按鈕顯示彈窗
記得清空上次操作的數據
(2)點擊修改按鈕顯示彈窗(淺拷貝問題)
this.$tmFrom = row會使得二者同時指向數據的引用,當修改tmFrom表單項時,表格中數據也會改變,如果修改后點了取消按鈕,表格中數據會發生改變。所以,要解決淺拷貝
當賦值的對象row中還有對象元素時,又會出現上面的問題,所以可以通過深拷貝JSON.parse(JSON.stringfy())實現。
(3)擊彈窗的確定按鈕實現數據的修改或新增
新增和修改成功后,需要再次獲取品牌信息。需要注意,如果時新增則刷新后顯示第一頁,如果是修改,則要在當前頁刷新顯示。
新增或修改品牌API函數
// 新增或修改品牌 export const addOrUpdateTradeMark = (tradeMark) => {// 有id則為修改if (tradeMark.id) {return request({ url: 'admin/product/baseTrademark/update', method: 'put', data: tradeMark })}// 無id則為新增return request({ url: 'admin/product/baseTrademark/save', method: 'post', data: tradeMark }) }3.6 表單驗證
表單驗證,主要分以下幾步:
(1)定義rules
(2)表單綁定rules,表單項prop綁定驗證屬性
(3)提交表單時觸發的函數內,先進行表單驗證,如果成功執行后續操作,否則彈出失敗。
3.7 刪除品牌信息
(1)氣泡確認框
@onConfirm="deleteTradeMark(row)"綁定的是刪除函數
(2)刪除函數
刪除成功后要刷新頁面。
示例:
4、商品屬性
4.1 三級聯動
(1)三級聯動靜態組件
示例
由于多個頁面都使用到了上面的el-card,所以將其封裝為全局組件。
main.js
注意:雖然該全局組件的名字是CategorySelect ,但是在使用時最好用后面的形式<category-select></category-select>。
原因:html不區分大小寫,會將大寫字母轉換為小寫,并在前面加-。即CategorySelect 轉換為category-select
(2)三級聯動數據展示
示例:
html靜態代碼
data屬性
data() {return {category1List: [],category2List: [],category3List: [],formList: {category1: '',category2: '',category3: ''}}注意:formList內容是三個選擇框選中屬性的id。后續也是通過id去查詢。
針對于選中一級屬性后,自動獲取二級屬性列表,選中二級屬性后,再自動獲取三級屬性列表問題。
最初思路:通過computed或者watch去實現,但都沒有成功。
老師的方法:通過給選擇框添加@change屬性,再回調函數內去獲取下一級屬性列表。
@change綁定的獲取三級列表函數都比較簡單,這里就不過多描述。
// 獲取一級分類// 獲取一級分類async getCategory1List() {const result = await this.$API.attr.reqCategory1List()if (result.code === 200) {this.category1List = result.data} else {alert(result.message)}},// 通過選中一級屬性id獲取二級屬性列表async getCategory2List() {// 當一級分類改變時,上一次選擇的二級和三級分類應設置為空this.category2List = []this.category3List = []this.formList.category2 = ''this.formList.category3 = ''const result = await this.$API.attr.reqCategory2List(this.formList.category1)if (result.code === 200) {this.category2List = result.data} else {alert(result.message)}},// 通過選中二級屬性id獲取三級屬性列表async getCategory3List() {// 當二級分類改變時,上一次選擇的三級分類應設置為空this.category3List = []this.formList.category3 = ''const result = await this.$API.attr.reqCategory3List(this.formList.category2)if (result.code === 200) {this.category3List = result.data} else {alert(result.message)}},(3)將選中的三級分類id傳遞給父組件
這里是通過點擊查詢按鈕實現的父子組件通信
查詢按鈕綁定的回調
父組件
<category-select @getCategoryId="getCategoryId"></category-select>父組件data
data() {return {category1Id: '',category2Id: '',category3Id: ''}},父子組件通信,父組件的接收函數:getCategoryId函數
只有當三級id不為空時,才發請求。
4.2 商品屬性展示
通過三級聯動獲取到要展示的屬性id后,接下來就是通過該id請求數據,然后展示。
總結
- 上一篇: Java8新特性Stream
- 下一篇: 浅拷贝深拷贝问题