Vue電商后台管理系統項目第6篇-商品管理的商品列表和商品添加組件實現

本文轉載自查看原文 2019-10-05 05:28 1282 Vue/ Vue電商后台管理系統項目第6篇-商品管理的商品列表和商品添加組件實現

開胃小菜—左側導航菜單的動態生成

通過為指定的用戶指定角色，那么這個用戶登陸之后應該只能看到這個角色所對應的權限菜單, 我們是根據當前登陸用戶去獲取對應的菜單權限

步驟

分析接口文檔，發現不用傳遞參數，因為它是根據當前登陸用戶的token來動態獲取當前用戶的權限
添加接口方法獲取動態的菜單數據

// 獲取左側菜單權限
export const getLeftMenu = () => {
  return axios({
    url: `menus`
  })
}

實現菜單項的動態加載

獲取數據之后，注意看到返回數據中有path數據，這個數據就應該對應着我們的路由配置
所以，之前的路由配置如果名稱不一致，則必須進行修改

<el-menu
         :router='true'
         :unique-opened='true'
         default-active="2"
         class="el-menu-vertical-demo"
         background-color="#545c64"
         text-color="#fff"
         active-text-color="#ffd04b"
         >
    <el-submenu :index="item.id+''" v-for='item in menuList' :key='item.id'>
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{item.authName}}</span>
        </template>
        <!-- 路由映射組件
            映射就是指：讓路由所對應的組件在指定router-view中展示
            指定router-view：關注組件的嵌套結構
            <a href='../*.html'></a>
            <a href='../*.vue'></a> -->
        <el-menu-item :index="'/home/'+subitem.path" v-for='subitem in item.children' :key='subitem.id'>
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{subitem.authName}}</span>
            </template>
        </el-menu-item>
    </el-submenu>
</el-menu>

商品管理>商品列表

添加單文件組件，goods.vue

<template>
    <div class="goods">goods</div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>

</style>

list.vue

<template>
    <div class="list">list</div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>

</style>

add.vue

<template>
    <div class="add">add</div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>

</style>

配置路由

配置goods路由

{
    name: 'Goods',
    path: 'goods',
    component: Goods
}

配置list路由，這是一個嵌套路由,同時添加路由重定向

        {
          name: 'Goods',
          path: 'goods',
          component: Goods,
          // 添加重定向，讓其默認展示list.vue組件的內容
          redirect: { name: 'List' },
          children: [
            {
              name: 'List',
              path: 'list',
              component: List
            }
          ]
        }

配置add組件所對應的路由

{
    name: 'Goods',
        path: 'goods',
            component: Goods,
                // 添加重定向，讓其默認展示list.vue組件的內容
                redirect: { name: 'List' },
                    children: [
                        {
                            name: 'List',
                            path: 'list',
                            component: List
                        },
                        {
                            name: 'Add',
                            path: 'add',
                            component: Add
                        }
                    ]
}

商品列表組件

步驟：

接口對應着：商品管理》商品列表數據
新建一個專門用於處理商品的api文檔：goods.js
我們發現每個api文件中都有引入axios,設置基准路徑，添加axios攔截器這幾個操作，所以有必要對這些操作進行封裝

添加一個文件夾utils,里面添加一個封裝文件：myaxios.js

import axios from 'axios'
// 設置基准路徑
// axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'
var myaxios = axios.create({
  baseURL: 'http://localhost:8888/api/private/v1/'
})

myaxios.interceptors.request.use(function (config) {
  var token = localStorage.getItem('itcast_pro_token')
  if (token) {
    config.headers['Authorization'] = token
  }

  return config
}, function (error) {
  return Promise.reject(error)
})

// 暴露成員
export default myaxios

細節:暴露成員需要使用到export
添加接口方法獲取所有商品數據列表

import axios from '@/utils/myaxios.js'

// 獲取所有商品數據列表
export const getAllGoodsList = (obj) => {
  return axios({
    method: 'get',
    url: 'goods',
    params: obj
  })
}

組件結構的添加

面包屑
添加el-card:卡片視圖
搜索+添加按鈕
表格數據展示

引入接口方法

import { getAllGoodsList } from '@/api/goods.js'

添加一上些Data屬性

data () {
    return {
      goodsList: [],
      userKey: '',
      pagenum: 1,
      pagesize: 10
    }
  }

調用接口方法

mounted () {
    getAllGoodsList({ query: this.userKey, pagenum: this.pagenum, pagesize: this.pagesize })
      .then(res => {
        console.log(res)
        this.goodsList = res.data.data.goods
      })
      .catch(err => {
        console.log(err)
      })
  }

設置表格的屬性

<!-- 表格展示 -->
      <el-table :data="goodsList" border style="width: 100%;margin-top:15px">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="goods_name" label="商品名稱" width="580"></el-table-column>
        <el-table-column prop="goods_price" label="價格" width="180"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
        <el-table-column prop="add_time" label="創建時間"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini">編輯</el-button>
            <el-button size="mini" type="danger">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>

新增商品組件

步驟：

添加路由跳轉

聲明式導航：router-link to=""

編程式導航:$router.push({})

<el-button type="success" plain @click='$router.push({name: "Add"})'>添加商品</el-button>

完成添加商品組件制作

面包屑
步驟條

<!-- 添加步驟條 -->
<el-steps :active="0" finish-status="success">
    <el-step title="步驟 1"></el-step>
    <el-step title="步驟 2"></el-step>
    <el-step title="步驟 3"></el-step>
    <el-step title="步驟 4"></el-step>
    <el-step title="步驟 5"></el-step>
</el-steps>

細節：active屬性對應着當前需要展示的內容面板的索引，索引從0開始

標簽頁

<!-- 添加標簽頁 -->
<el-tabs v-model="activeName" tab-position='left' style='margin-top:15px'>
    <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
    <el-tab-pane label="定時任務補償" name="fifth">定時任務補償</el-tab-pane>
</el-tabs>

細節：

tab-position:用來設置標簽頁導航項的位置，內容與這個位置對應，如導航在top，內容就在bottom
v-model='activeName',用來設置當前被激活的內容面板，這個值就應該設置為內容面板的name屬性的值

實現標簽頁和步驟條的關聯

我們發現步驟條的active是控制當前步驟的，標簽頁的activeName是控制當前激活的內容面板的
那么我們就可以考慮讓這個屬性指向同一個變量，以此達到修改一個值，另外一個組件的效果也會變化
細節：步驟條中的active需要的數據類型是數值，所以記得做類型的轉換

<!-- 添加步驟條 -->
<el-steps :active="activeName - 0" finish-status="success">
    <el-step title="步驟 1"></el-step>
    <el-step title="步驟 2"></el-step>
    <el-step title="步驟 3"></el-step>
    <el-step title="步驟 4"></el-step>
    <el-step title="步驟 5"></el-step>
</el-steps>
<!-- 添加標簽頁 -->
<el-tabs v-model="activeName" tab-position='left' style='margin-top:15px'>
    <el-tab-pane label="用戶管理" name="0">用戶管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="1">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="2">角色管理</el-tab-pane>
    <el-tab-pane label="定時任務補償" name="3">定時任務補償</el-tab-pane>
    <el-tab-pane label="定時任務補償" name="4">定時任務補償</el-tab-pane>
</el-tabs>
-------------------------------------
data () {
    return {
      activeName: '0'
    }
  }

添加標簽頁內容面板的數據

商品參數：這里的數據用於后期的商品添加，所以整個數據應該都是表單數據，所以先添加一個表單結構

定義數據：

goodsForm: {
        goods_name: '',
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        atts: []
      }

級聯選擇器的添加

商品分類數據的獲取

參數值為1說明只獲取1 級分類
參數值為2說明獲取1 級和2級分類
參數值為3說明獲取1 級和2級和3級分類
參數可以以單個數值的方式傳遞，也可以以數組的形式傳遞

添加api文件:@/api/category.js

添加接口方法

import axios from '@/utils/myaxios.js'

export const getCategoriesList = (level) => {
  return axios({
    url: 'categories',
    params: { type: level }
  })
}

級聯選擇器的添加

<el-cascader 
             :options="options"  //數據源
             :props=""  // 配置選項
             clearable> //可清空
</el-cascader>

級聯選擇器的屬性設置

<el-form-item label="商品分類">
    <!-- 添加級聯選擇器 -->
    <el-cascader :options="cateList" :props="cateprops" clearable></el-cascader>
</el-form-item>
----------------------------------------
// 所有分類數據
      cateList: [],
      cateprops: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }