尚品汇后台管理系统
尚品匯后臺管理系統
- 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
- 下一篇： 浅拷贝深拷贝问题